색상 변환기

색상 변환기 사용 방법

1. 1. 색상을 입력하세요. 상자가 받는 어떤 표기법으로든 붙여넣거나 입력하세요. 예를 들어 #336699, rgb(51 102 153), hsl(210 50% 40%), hwb(210 20% 40%), cmyk(67%, 33%, 0%, 40%) 또는 rebeccapurple 같은 CSS 이름이 있습니다. 숫자만 쓰면(51 102 153) RGB로 읽습니다.
2. 2. 또는 선택기를 쓰세요. 선택기로 고른 색이 적용되며, 이미 입력해 둔 투명도는 그대로 유지됩니다.
3. 3. 필요한 값을 복사하세요. 표기법마다 복사 버튼이 있고, CSS 복사를 누르면 HEX, RGB, HSL, OKLCH 값을 스타일시트용 사용자 지정 속성으로 받을 수 있습니다.
4. 4. 이름을 확인하세요. 색이 CSS 키워드와 정확히 일치하면 그 키워드를 보여 주고(rebeccapurple은 #663399입니다), 일치하지 않으면 가장 가까운 키워드를 보여 줍니다.

변환 방식

모든 변환은 브라우저가 화면에 그리는 색 공간인 sRGB를 거칩니다. HEX 코드는 16진수로 쓴 RGB입니다. 예를 들어 #336699에서 빨강 0x33은 51, 초록 0x66은 102, 파랑 0x99는 153입니다. 다른 표기법들은 같은 세 숫자를 다르게 배열할 뿐입니다.

• HSL은 색을 색상(색상환에서의 각도, 0–360°), 채도, 명도로 나타냅니다. 가장 큰 채널을 max, 가장 작은 채널을 min이라 하고 각각 255로 나누면, 명도는 (max + min) ÷ 2이고 채도는 (max − min) ÷ (1 − |2L − 1|)입니다. 색상은 어느 채널이 가장 큰지에 따라 정해집니다.
• HSV(HSB라고도 함)는 같은 색상을 쓰지만, 명도는 max로, 채도는 (max − min) ÷ max로 측정합니다. 대부분의 색상 선택기가 그리는 모델입니다.
• HWB는 순수한 색상 위에 흰색도(min)와 검정도(1 − max)를 얹은 값입니다. 명도나 음영을 생각할 때 HSL보다 다루기 쉽습니다. 흰색도와 검정도의 합이 100%에 이르면 결과는 회색입니다.
• CMYK는 단순 장치 변환으로 표시합니다. K = 1 − max이고, C, M, Y는 각각 (1 − 채널 − K) ÷ (1 − K)입니다. 잉크, 종이, 프로파일은 관여하지 않습니다.
• OKLCH는 Björn Ottosson의 OKLab 공간에서 명도, 채도, 색상을 나타내며, CSS Color 4는 이를 oklch()로 지원합니다. L의 같은 간격은 RGB나 HSL의 같은 간격보다 밝기 차이가 훨씬 고르게 느껴집니다.

여기서 CMYK가 인쇄 색이 아닌 이유

화면은 빨강, 초록, 파랑 빛을 더해 색을 만들고, 인쇄기는 종이 위에 시안, 마젠타, 노랑, 검정 잉크를 올립니다. 두 색역은 서로 다르며, 실제로 찍히는 잉크의 색은 종이, 인쇄기, 그리고 이를 설명하는 ICC 프로파일에 따라 달라집니다. RGB만으로 계산하는 공식은 이런 정보를 알 수 없습니다. 그래서 위의 CMYK는 예측이 아니라 표기입니다. 예를 들어 순수한 화면 파랑 #0000ff는 시안 100%와 마젠타 100%가 되며, 이는 더 탁한 보라색으로 인쇄됩니다. 포스터나 인쇄 그림이라면 인쇄소에 RGB 원본을 주고 그들의 프로파일을 요청하거나, 디자인 프로그램에서 그 프로파일로 변환하세요.

반올림, 범위 제한, 투명도

• 반올림. HEX와 rgb()는 0에서 255 사이의 정수만 담습니다. 그래서 hsl(210 50% 41%)로 입력한 색은 가장 가까운 8비트 값으로 반올림됩니다. 그 값을 다시 변환하면 HSL이 조금 달라지는데, 8비트 격자가 HSL보다 거칠기 때문입니다.
• 범위를 벗어난 채널. 범위를 벗어난 값은 브라우저처럼 범위 안으로 맞춥니다. 예를 들어 rgb(300 0 0)는 #ff0000이고, 음수 채널은 0이 됩니다.
• 색상 단위. deg, grad, rad, turn을 모두 받으며, 색상 각도는 순환합니다. −150°는 210°와 같습니다.
• 투명도. #rrggbbaa, #rgba, / 50% 모두 쓸 수 있습니다. 8자리 HEX에서 투명도는 8비트로 저장되므로 50%는 80이 되고, 다시 읽으면 50.2%입니다.

자주 묻는 질문

HEX를 RGB로 어떻게 변환하나요?

6자리 숫자를 두 자리씩 세 쌍으로 나누고, 각 쌍을 16진수로 읽으면 됩니다. #336699는 33, 66, 99이며, 이는 51, 102, 153입니다. HEX 코드를 상자에 붙여넣으면 RGB 값이 HSL, HWB, HSV, CMYK, OKLCH와 함께 바로 나타납니다.

HSL과 HSV는 어떻게 다른가요?

둘 다 같은 색상 각도를 씁니다. HSL은 채도와 관계없이 명도가 최대일 때 흰색이 되므로, 중간값이 순수한 색입니다. HSV는 명도와 채도가 최대일 때 순수한 색이 되고, 채도가 0이면 흰색이 됩니다. HSL은 CSS의 hsl()로 지원되며, HSV(또는 HSB)는 대부분의 색상 선택기가 보여 주는 방식입니다.

CMYK 값은 인쇄에 정확한가요?

아닙니다. 잉크, 종이, ICC 프로파일 없이 RGB에서 단순 변환한 값이므로, 인쇄기가 실제로 찍을 색을 예측하는 것이 아니라 같은 숫자를 다른 방식으로 적은 것입니다. 밝은 화면 파랑이나 초록처럼 인쇄 색역을 벗어난 색은 더 탁하게 인쇄됩니다. 중요한 작업이라면 인쇄소의 프로파일을 사용하세요.

가장 가까운 CSS 이름은 무엇을 뜻하나요?

CSS에는 148개의 색상 키워드가 정의되어 있습니다. 색이 정확히 그중 하나라면 조건 없이 보여 줍니다. 그렇지 않으면 OKLab에서 가장 가까운 키워드를 보여 줍니다. OKLab은 거리가 인지되는 차이와 맞도록 만들어진 색 공간입니다. 주석에서 색에 이름을 붙일 때는 유용하지만, 색상 코드를 대신하지는 않습니다.

왜 왕복 변환 후 HSL 값이 조금 달라지나요?

HEX와 RGB는 각 채널을 256개 값 중 하나로 저장하는데, HSL은 이 격자와 일대일로 대응하지 않습니다. HSL로 입력한 색은 가장 가까운 RGB 값으로 반올림되며, 표시되는 HSL은 반올림된 값에서 계산됩니다. HEX 코드에서 시작하면 모든 변환은 표시된 정밀도까지 정확합니다.

입력한 색 데이터가 어디로 전송되나요?

전송되지 않습니다. 변환은 브라우저에서 이루어지는 단순한 계산이며, 입력한 내용은 업로드되거나 저장되지 않습니다.