색상 코드 변환기

HEX, RGB, HSL, HSV, CMYK는 각각 무엇인가요?

같은 색을 서로 다른 좌표계로 적은 것이 색상 코드입니다. 모니터와 스마트폰은 빨강·초록·파랑 세 가지 빛의 세기를 섞어 색을 내므로, 화면용 코드는 모두 이 RGB 값에서 출발합니다. 어떤 코드를 쓸지는 "무엇을 하려는가"에 따라 달라집니다.

• RGB: 빨강(R), 초록(G), 파랑(B)을 각각 0~255의 정수로 적습니다. 채널당 8비트이므로 256³ = 16,777,216가지 색을 표현합니다. CSS에서는 rgb(201 169 97) 또는 rgb(201, 169, 97)처럼 씁니다.
• HEX: RGB 세 값을 각각 두 자리 16진수로 바꿔 이어 붙인 것입니다. #C9A961은 C9(=201), A9(=169), 61(=97)이라는 뜻이라 RGB와 정보량이 완전히 같습니다. #FA0처럼 3자리로 줄이면 각 자리를 두 번 반복해 #FFAA00으로 해석합니다.
• HSL: 색상(Hue, 0~360°), 채도(Saturation, %), 명도(Lightness, %)로 표현합니다. 색상환의 각도와 "얼마나 선명한가, 얼마나 밝은가"로 생각할 수 있어 사람이 톤을 조절하기 쉽습니다. 채도·명도가 같은 상태에서 색상 각도만 바꾸면 비슷한 느낌의 다른 색이 나옵니다.
• HSV(HSB): 색상, 채도, 명도(Value, 가장 밝은 채널의 값)로 표현합니다. Photoshop·Figma 같은 디자인 도구의 색상 선택 창은 대개 HSB 방식입니다. HSL의 L=50%가 "가장 선명한 색"이라면, HSV는 V=100%, S=100%가 가장 선명한 색입니다. 같은 이름의 S라도 HSL과 HSV에서 값이 다르다는 점에 주의하세요.
• CMYK: 시안·마젠타·옐로·블랙 잉크의 비율로 적는 인쇄용 방식입니다. 빛을 더하는 RGB와 달리 잉크가 빛을 흡수하는 감산 혼합이라 원리가 다릅니다.

변환 수식

이 도구가 사용하는 수식은 다음과 같습니다. R, G, B를 255로 나눠 0~1 범위로 만든 값을 r, g, b라 하고, max와 min은 세 값 중 최댓값과 최솟값, d = max − min이라 하겠습니다.

• RGB → HSL: L = (max + min) / 2. d가 0이면 회색이라 H=0, S=0. 아니면 S = d / (1 − |2L − 1|). H는 max가 r이면 60° × ((g − b)/d mod 6), max가 g이면 60° × ((b − r)/d + 2), max가 b이면 60° × ((r − g)/d + 4)이며, 음수면 360을 더합니다.
• RGB → HSV: V = max, S = d / max(max가 0이면 0). H는 HSL과 같은 식을 씁니다.
• HSL → RGB: C = (1 − |2L − 1|) × S, X = C × (1 − |(H/60 mod 2) − 1|), m = L − C/2. H가 속한 60° 구간에 따라 (C,X,0), (X,C,0), (0,C,X), (0,X,C), (X,0,C), (C,0,X) 중 하나를 고르고 m을 더한 뒤 255를 곱해 반올림합니다.
• RGB → CMYK(단순 수식): K = 1 − max, C = (1 − r − K)/(1 − K), M = (1 − g − K)/(1 − K), Y = (1 − b − K)/(1 − K). K가 1(검정)이면 C=M=Y=0으로 둡니다.

직접 계산해 본 예시

예시 1: 클릭웹 골드 #C9A961. RGB는 (201, 169, 97)입니다. max = 201/255 = 0.788, min = 97/255 = 0.380, d = 0.408이므로 L = (0.788 + 0.380)/2 ≈ 58%, S = 0.408 / (1 − |2×0.584 − 1|) ≈ 49%, max가 R이므로 H = 60 × ((169 − 97)/104 mod 6) ≈ 42°입니다. 따라서 HSL은 약 (42°, 49%, 58%)이고, HSV는 S ≈ 52%, V ≈ 79%, CMYK(단순 수식)는 (0%, 16%, 52%, 21%)입니다. 흰색 배경과의 대비율은 약 2.25:1이라 이 색을 흰 바탕의 본문 글자색으로 쓰기에는 부족하고, 검정과는 약 9.33:1로 충분합니다.

예시 2: 주황빛 빨강 #FF5733. RGB (255, 87, 51)에서 max=1, min=0.2, d=0.8이므로 L=60%, S=100%, H = 60 × ((87 − 51)/204 ) ≈ 10.6° → 약 11°입니다. HSL 약 (11°, 100%, 60%), HSV (11°, 80%, 100%), CMYK (0%, 66%, 80%, 0%)입니다. 흰색 대비는 약 3.15:1로 큰 글자(18pt 이상) 기준 3:1은 넘지만 일반 본문 기준 4.5:1에는 못 미칩니다.

예시 3: 순수한 파랑 #0000FF. HSL (240°, 100%, 50%), HSV (240°, 100%, 100%), CMYK (100%, 100%, 0%, 0%)입니다. 흰색과의 대비는 약 8.59:1입니다. 같은 "100%"라도 HSL과 HSV의 의미가 다르다는 것을 보여주는 좋은 예입니다.

기본 색상 참고표

아래 표는 페이지가 만들어질 때 위의 변환 수식으로 계산한 값입니다. 각 행의 HEX를 입력창에 넣어 결과를 비교해 볼 수 있습니다.

CMYK 값은 왜 "근사"라고 하나요?

화면의 RGB는 기기가 낼 수 있는 빛의 범위(색역, gamut)가 정해져 있고, 인쇄 CMYK는 잉크와 종이, 인쇄 방식에 따라 표현 가능한 범위가 전혀 다릅니다. 위 수식은 두 체계를 단순한 곱셈·뺄셈으로 이어 놓은 수학적 변환일 뿐 실제 잉크의 색을 반영하지 않습니다. 같은 CMYK 수치라도 코팅지와 비코팅지에서 다르게 보이고, 인쇄소의 ICC 프로파일(예: FOGRA, SWOP 계열)을 적용하면 다른 수치가 나옵니다. 특히 형광에 가까운 선명한 초록·주황·파랑은 CMYK로 재현할 수 없어 인쇄하면 탁해집니다. 이 도구의 CMYK는 대략의 참고용이며, 인쇄물 제작에는 디자인 소프트웨어에서 인쇄소가 안내한 색상 프로파일로 변환하고 필요하면 실제 색상 견본(팬톤 등)으로 확인하는 것이 안전합니다.

글자색 대비율은 어떻게 계산하나요?

웹 접근성 지침(WCAG)은 글자색과 배경색의 밝기 차이를 대비율로 평가합니다. 먼저 각 채널을 선형 값으로 바꿉니다. sRGB 값 v(0~1)가 0.04045 이하면 v/12.92, 그보다 크면 ((v + 0.055)/1.055)^2.4입니다. 상대 휘도는 L = 0.2126×R + 0.7152×G + 0.0722×B로 계산하고, 대비율은 (밝은 쪽 L + 0.05) / (어두운 쪽 L + 0.05)입니다. WCAG 2.x 기준으로 일반 본문은 AA 등급에서 4.5:1 이상, 큰 글자(약 24px 이상 또는 굵은 18.7px 이상)는 3:1 이상이 권장됩니다. AAA 등급은 각각 7:1과 4.5:1입니다. 이 도구는 선택한 색을 흰색 또는 검정 배경 위의 글자색(또는 반대)으로 쓸 때의 대비율만 빠르게 보여줍니다. 임의의 두 색 조합을 비교하려면 색상 대비 검사기를 이용하세요.

투명도(알파)를 HEX로 표기하는 방법

CSS는 #RRGGBBAA 형태의 8자리 HEX를 지원하며, 마지막 두 자리가 불투명도입니다. 불투명도 p%는 round(p/100 × 255)를 16진수로 바꾼 값입니다. 예를 들어 50%는 127.5를 반올림한 128, 즉 80이고, #C9A96180은 클릭웹 골드의 약 50% 불투명 색입니다. 같은 값은 rgb(201 169 97 / 50%)로도 쓸 수 있고, 가독성은 후자가 좋습니다.

팔레트는 어떻게 만들어지나요?

톤 팔레트는 선택한 색의 색상(H)과 채도(S)는 유지한 채 명도(L)만 90, 75, 60, 45, 30, 15%로 바꿔 밝은 톤부터 어두운 톤까지 만듭니다. 보색은 색상각에 180°를 더해, 유사색은 ±30°를 더해 계산합니다. 이 방식은 HSL 기반의 기계적 계산이어서 실제 사람이 느끼는 밝기를 균일하게 나누지는 않습니다. 예를 들어 노랑 계열은 L이 같아도 파랑 계열보다 훨씬 밝아 보입니다. 팔레트는 출발점으로 삼고, 실제 UI에 쓸 때는 대비율을 확인하며 미세 조정하세요. 보다 다양한 조합이 필요하면 색상 팔레트 생성기를, 이름이 붙은 CSS 색상을 찾으려면 CSS 색상 이름 참고표를 참고하세요.

흔한 실수와 주의할 점

• HSL로 바꿨다 돌아오면 값이 조금 달라집니다. HSL의 H, S, L을 정수로 반올림하기 때문에 HEX → HSL → HEX 왕복에서 ±1~2 정도 차이가 날 수 있습니다. 정확한 값을 보관하려면 HEX 또는 RGB를 기준으로 삼으세요.
• 화면과 인쇄물의 색은 같지 않습니다. 모니터 밝기, 색 온도, 색상 프로파일 설정에 따라 같은 HEX도 다르게 보입니다.
• HSL의 S와 HSV의 S는 다른 값입니다. 디자인 툴에서 가져온 HSB 값을 CSS의 hsl()에 그대로 넣으면 다른 색이 나옵니다.
• 회색은 색상 값이 의미 없습니다. R=G=B이면 H는 0으로 표시되지만 실제로는 정의되지 않은 값이며, 채도가 0이므로 색상각을 바꿔도 달라지지 않습니다.
• HEX는 대소문자를 구분하지 않습니다. #c9a961과 #C9A961은 같은 색입니다.

결과를 어떻게 활용하나요?

1. 디자인 툴에서 고른 색의 HEX를 입력해 CSS용 rgb()/hsl() 표기를 복사합니다.
2. 브랜드 색을 HSL로 바꾼 뒤 명도만 조절해 버튼 hover, 비활성, 배경 톤을 만듭니다.
3. 글자색으로 쓸 후보가 흰색·검정 위에서 4.5:1을 넘는지 확인하고, 넘지 못하면 명도를 낮추거나 높입니다.
4. 인쇄물이 필요하면 CMYK 근사값을 출발점으로 삼되, 인쇄소의 프로파일로 다시 변환합니다.

관련 변환 도구로 16진수 표기 자체가 궁금하다면 진법 변환기를, 길이·무게 같은 일반 단위 변환은 단위 변환기를 이용하세요. CSS 그라데이션 코드를 만들 때는 CSS 그라데이션 생성기가 도움이 됩니다.

자주 묻는 질문