0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0 1 0
설정
모든 형식(Hex, RGB, HSL, HWB, HSV, LAB, LCH, OKLab, OKLCh, XYZ D50/D65, Display P3, A98, ProPhoto, Rec. 2020 및 CMYK) 간에 색상을 변환할 수 있습니다. 대화형 시각적 선택기를 포함합니다.
#3b82f6
HEX, rgb(), hsl(), oklch(), color(), etc.
결과
기본
#RRGGBB
#RRGGBBAA
rgb(r g b)
CSS 3레벨
hsl(h s% l%)
CSS 4레벨
hwb(h w% b%)
lab(l a b)
lch(l c h)
oklab(l a b)
oklch(l c h)
color(xyz-d50 x y z)
color(xyz-d65 x y z)
color()
color(display-p3 r g b)
color(a98-rgb r g b)
color(prophoto-rgb r g b)
color(rec2020 r g b)
기타
hsv(h s% v%)
인쇄
cmyk(c% m% y% k%)

작동 방식

같은 색도 여러 방식으로 표기할 수 있습니다. HEX(#RRGGBB)와 RGB는 빨강, 초록, 파랑의 혼합을 나타냅니다. HSL과 HSV는 색상, 채도, 밝기로 표현하여 변형을 고르기에 더 직관적입니다. CMYK는 인쇄용입니다.

이 도구는 HEX, RGB 또는 HSL 색을 받아 HWB, LAB, LCH, OKLab, OKLCh 및 color() 함수(Display P3, Rec. 2020, ProPhoto) 같은 최신 CSS 레벨 4 색 공간을 포함해 모든 형식으로 즉시 변환합니다.

시각적 선택기와 숫자 컨트롤로 색을 조정하고 모든 값이 동시에 변하는 것을 볼 수 있습니다. 모든 계산은 브라우저에서 이루어집니다.

예시

#ff0000rgb(255 0 0) · hsl(0 100% 50%) · cmyk(0% 100% 100% 0%)순수한 빨강: 빨강 채널은 최대, 초록과 파랑은 0.
#3b82f6rgb(59 130 246)각 16진수 두 자리(3b, 82, f6)는 한 채널의 0-255 값입니다: 59, 130, 246.
#ffffffrgb(255 255 255) · hsl(0 0% 100%)흰색은 세 채널이 모두 최대이며, HSL에서 밝기 100%입니다.

활용 사례

  • 디자인 가이드의 HEX 색을 CSS나 프레임워크가 요구하는 RGB 또는 HSL 형식으로 바꾸기.
  • 인쇄물을 준비하기 위해 화면 색의 CMYK 등가값을 얻기.
  • 광색역 팔레트를 조정할 때 최신 색 공간(OKLCh, Display P3)을 탐색하기.

자주 묻는 질문

알파 채널이란 무엇이며 HEX에서 어떻게 쓰나요?

알파는 불투명도로, 0(투명)에서 100%까지입니다. HEX에서는 끝에 두 자리를 추가합니다: #RRGGBBAA. 예를 들어 #ff000080은 불투명도 50%의 빨강입니다.

HSL과 HSV의 차이는 무엇인가요?

둘 다 색상과 채도를 쓰지만 세 번째 축이 다릅니다: HSL은 밝기(100%가 흰색)를 쓰고 HSV는 명도(값)(100%가 가장 진한 색)를 씁니다. HSL은 보통 밝은 색조와 어두운 색조를 만들기에 더 편리합니다.

OKLab와 OKLCh는 왜 존재하나요?

이들은 지각적으로 균일한 색 공간입니다: 값 사이의 같은 거리가 비슷한 시각적 차이에 대응합니다. HSL보다 더 자연스러운 그러데이션과 밝기 조정을 만들며, CSS는 레벨 4부터 이를 지원합니다.

표시되는 CMYK가 인쇄에 정확한가요?

이는 참고용 근사 변환입니다. 실제 인쇄 결과는 색 프로필, 잉크, 종이에 따라 달라지므로 전문 작업에는 인쇄소의 ICC 프로필을 사용하는 것이 좋습니다.

관련 항목