HEX · RGB · HSL 변환, 셰이드 팔레트, WCAG 대비율 체크. 아무 칸에나 입력하면 나머지가 따라옵니다.
--color-brand: #HEX; 형태의 CSS 변수 선언을 제공합니다.--brand-50~--brand-950 변수 11줄이 복사됩니다.주소창 끝에 #FF6600처럼 HEX가 붙어 있으면 그 색으로 시작하고, 색을 바꿀 때마다 주소도 갱신되어 링크로 공유하기 좋습니다.
#RRGGBB, 빨강·초록·파랑을 각각 16진수 두 자리(00~FF)로. #F60처럼 3자리 축약형도 입력할 수 있습니다.rgb(255, 102, 0), 같은 정보를 10진수 0~255로 쓴 것. 쉼표 대신 공백으로 구분해도 인식합니다.hsl(24, 100%, 50%), 색상환 각도(0~360°)·채도·밝기. "조금 더 어둡게", "채도만 낮게" 같은 조정이 직관적이라 디자인 시스템 팔레트를 만들 때 편합니다.입력한 색을 HSL로 바꾼 뒤 색상(H)과 채도(S)는 그대로 두고, 밝기(L)만 97, 93, 85, 75, 63, 52, 43, 35, 27, 20, 12%로 바꿔 11단계를 만듭니다. 숫자가 작을수록 밝은 색이고, 500 근처가 기준색과 비슷한 중간 톤입니다. 버튼 배경은 500~600, 호버 상태는 한 단계 진한 색, 연한 배경 박스는 50~100처럼 역할을 나눠 쓰면 일관된 화면을 만들기 쉽습니다. 각 칸의 숫자 색은 배경 밝기에 따라 검정·흰색 중 잘 보이는 쪽으로 자동 선택됩니다.
주황색 #FF6600을 hex 칸에 넣으면 이렇게 나와요.
| 항목 | 결과 | 계산 |
|---|---|---|
| RGB | rgb(255, 102, 0) | FF=255, 66=102, 00=0 |
| HSL | hsl(24, 100%, 50%) | 최댓값 R, 최솟값 B → 밝기 (1+0)÷2 = 50% |
| 셰이드 500 / 700 / 900 | #FF6C0A / #B34700 / #662900 | H·S 고정, 밝기 52% / 35% / 20% |
| 흰 배경 대비 | 2.94 : 1 (AA 본문 FAIL) | 흰 바탕 글자색으로는 부족해요 |
| 검정 글자 대비 | 7.15 : 1 (AAA 본문 PASS) | 주황 배경엔 검정 글씨가 잘 읽혀요 |
처음 화면의 기본값(글자 #0A0B0D, 배경 #C6FF3D)은 대비율 16.66 : 1로 네 기준을 모두 통과해요.
대비율은 두 색의 상대 휘도 L로 (L밝은 + 0.05) ÷ (L어두운 + 0.05)를 계산한 값으로, 1:1(같은 색)부터 21:1(검정/흰색)까지 나옵니다.
| 등급 | 본문 텍스트 | 큰 글씨 |
|---|---|---|
| AA (권장 최소) | 4.5 : 1 이상 | 3 : 1 이상 |
| AAA (강화) | 7 : 1 이상 | 4.5 : 1 이상 |
"큰 글씨"는 보통 18pt(약 24px) 이상, 또는 굵게 14pt(약 18.7px) 이상을 말합니다.
투명도(alpha)는 지원하지 않습니다. rgba(), hsla()를 입력하면 알파 값은 무시되고, 8자리 HEX(#RRGGBBAA)는 인식하지 않습니다. 셰이드 팔레트는 HSL 밝기를 고정 단계로 나눈 단순한 방식이라 Tailwind 기본 팔레트와 정확히 같지는 않습니다.
HEX·RGB·HSL은 모두 같은 sRGB 색을 다르게 적은 거예요. 정의는 W3C CSS Color Module Level 4에 있어요.
C6 = 12 × 16 + 6 = 198).| HEX | 10진수 | 비율 | HEX | 10진수 | 비율 |
|---|---|---|---|---|---|
| 00 | 0 | 0% | 99 | 153 | 60% |
| 33 | 51 | 20% | B3 | 179 | 70% |
| 4D | 77 | 30% | CC | 204 | 80% |
| 66 | 102 | 40% | E6 | 230 | 90% |
| 80 | 128 | 50% | FF | 255 | 100% |
8자리 HEX(#RRGGBBAA)의 마지막 두 자리도 이 표로 읽어요. #FF660080은 주황 50% 불투명이에요(이 도구는 8자리를 받지 않으니 앞 6자리만 넣으세요).
#C6FF3D → rgb(198, 255, 61), hsl(78, 100%, 62%). 초록 채널이 가장 커서 색상각이 노랑(60°)과 초록(120°) 사이 78°로 나와요.hsl(210, 100%, 50%)을 넣으면 #0080FF, rgb(0, 128, 255)이에요. 50% 밝기에서 G는 정확히 127.5라 반올림으로 128(80)이 돼요.rgb(18, 52, 86) → #123456, hsl(210, 65.4%, 20.4%). 채도·밝기에 소수점이 붙는 색은 HSL을 정수로 반올림해 적으면 원래 HEX로 정확히 돌아오지 않을 수 있어요.| 표기 | 예 | 이 도구에서 |
|---|---|---|
| 공백 문법 + 알파 | rgb(255 102 0 / 50%) | RGB만 읽고 알파는 무시 → #FF6600 |
| 이름 색 | orange = #FFA500, tomato = #FF6347 | 입력 안 됨 — HEX로 넣기 |
| HWB | hwb(24 0% 0%) | 입력 안 됨 |
| OKLCH | oklch(70% 0.2 50) | 입력 안 됨 (sRGB 밖의 넓은 색역까지 표현) |
hsl(60,100%,50%) 노랑과 hsl(240,100%,50%) 파랑은 L이 같지만 흰 배경 대비는 1.07:1과 8.59:1로 크게 달라요.#F60은 #FF6600만 줄일 수 있어요. #123456처럼 두 자리가 다르면 줄일 수 없어요.글자와 배경 대비를 AA·AAA 기준으로 자세히 따지고 통과하는 가장 가까운 색까지 찾으려면 색상 대비 검사기를 쓰세요.
#C6FF3D → C6=198, FF=255, 3D=61 → rgb(198, 255, 61).