색상 변환기 (HEX/RGB/HSL)
HEX, RGB, HSL 색상 코드를 상호 변환하고 색상을 미리보기로 확인합니다.
명도 팔레트 (50 → 900)
색상·채도는 유지하고 밝기만 단계별로 조정한 스케일입니다. 디자인 시스템 색상표로 그대로 쓸 수 있습니다.
배색 추천
WCAG 명도 대비 검사
| 조합 | 대비비 | 일반 텍스트 AA (4.5:1) | 일반 텍스트 AAA (7:1) | 큰 텍스트 AA (3:1) |
|---|
WCAG 2.x 상대 휘도 공식으로 계산합니다. 큰 텍스트는 18pt(24px) 이상 또는 굵은 14pt(18.66px) 이상을 뜻합니다. 버튼 테두리 같은 UI 구성 요소·그래픽은 3:1 이상이 필요합니다.
색상 변환기 (HEX/RGB/HSL)란?
웹 디자인이나 개발 작업 시 HEX, RGB, HSL 등 다양한 색상 코드를 다루는 일은 흔합니다. 이들을 서로 변환하고, 배색을 고민하고, 접근성 기준까지 맞추는 과정은 번거로울 수 있습니다. '색상 변환기'는 이 모든 과정을 하나의 도구에서 해결합니다. #FF5733 같은 HEX 코드를 입력하면 즉시 rgb(255, 87, 51)과 hsl(12, 100%, 60%)은 물론, HSV, CMYK, CSS 이름색까지 모든 형식으로 변환해 줍니다. 여기서 그치지 않고, 입력된 색상을 기준으로 디자인 시스템에 바로 적용할 수 있는 10단계 명도 팔레트를 자동으로 생성합니다. 또한 보색, 유사색 등 다양한 배색 조합을 추천하여 디자인 영감을 더하고, 웹 접근성(WCAG) 명도 대비 기준을 통과하는지 실시간으로 검사해 줍니다. 모든 계산은 브라우저 안에서만 처리되므로, 여러분의 색상 정보는 어디에도 전송되지 않습니다.
사용 방법
- HEX, RGB, HSL 등 알고 있는 형식의 색상 코드를 입력하거나, 왼쪽의 색상 피커로 직접 색을 고릅니다. `royalblue` 같은 CSS 이름색으로도 입력할 수 있습니다.
- 입력과 동시에 HEX, RGB, HSL, HSV, CMYK 형식의 색상 코드가 자동으로 계산됩니다. 각 입력창 옆의 '복사' 버튼으로 필요한 값을 간편하게 복사하세요.
- 스크롤을 내려 '명도 팔레트'를 확인하세요. 디자인 시스템에 바로 쓸 수 있는 10단계 색상 스케일이 생성됩니다. 각 색상 칸을 클릭하면 해당 HEX 코드가 복사됩니다.
- '배색 추천' 섹션에서 보색, 유사색, 분할 보색 등 현재 색상과 어울리는 다양한 색상 조합을 확인하고 디자인에 활용할 수 있습니다.
- 'WCAG 명도 대비 검사' 표를 통해 현재 색상이 흰색/검은색 배경 및 글자와 사용될 때 웹 접근성 가이드라인을 만족하는지 즉시 확인할 수 있습니다.
색상 변환기 (HEX/RGB/HSL) 사용 가이드
실제 작업에서 이 도구를 어떻게 쓰는지, 무엇을 조심해야 하는지 정리했습니다.
HEX·RGB·HSL — 언제 무엇을 쓰나
세 형식은 같은 색을 다르게 적은 것뿐이라 변환은 무손실입니다. 다만 사람이 다루기 편한 상황이 각각 다릅니다.
| 형식 | 이럴 때 | 이유 |
|---|---|---|
| HEX | 디자인 시안에서 받은 값을 코드에 옮길 때 | 가장 짧고, 디자인 툴이 이걸 줌 |
| RGB / RGBA | 투명도가 필요할 때, 캔버스·이미지 처리 | 채널별 숫자를 직접 계산하기 좋음 |
| HSL | 색을 손으로 조정할 때, 팔레트를 만들 때 | 밝기·채도를 숫자 하나로 움직일 수 있음 |
| HSV / HSB | 포토샵·피그마의 색상 피커와 값을 맞출 때 | 디자인 툴이 이 모델을 씀 |
| CMYK | 인쇄물로 나갈 때 | 잉크 기준. 화면 색과 다름 |
HSL이 실무에서 편한 이유
#4f46e5 를 "조금 더 어둡게" 하려면 HEX 로는 어떻게 해야 할까요. 세 채널을 각각 얼마나 줄여야 할지 감이 오지 않습니다. HSL 이라면 hsl(243, 75%, 59%) 에서 마지막 숫자만 45%로 내리면 끝입니다. 색상(H)과 채도(S)는 그대로이므로 같은 색 계열이 유지됩니다.
이 성질이 그대로 쓰이는 것이 "명도 팔레트(50 → 900)"입니다. 색상·채도는 고정하고 명도만 96%에서 16%까지 열 단계로 나눈 것으로, 요즘 디자인 시스템의 색상 스케일과 같은 방식입니다. 브랜드 색 하나만 정하면 배경(50~100)·테두리(200~300)·본문(700~900)에 쓸 색이 한 번에 나옵니다.
- 호버 상태 — 기준색에서 명도만 10% 정도 내리면 자연스러운 hover 색이 됩니다.
- 비활성 상태 — 채도를 크게 낮추면(단색 배색의 "저채도" 스와치) 회색에 가까워지면서도 원래 색의 인상이 남습니다.
- 배색 추천의 보색·유사색은 HSL 의 색상(H)만 회전시킨 것입니다. 강조색이 필요하면 보색(180°), 안정적인 조합이 필요하면 유사색(±30°)에서 고르면 됩니다.
WCAG 명도 대비 4.5:1이 무슨 뜻인가
대비비는 두 색의 밝기 차이를 1:1(같은 색)에서 21:1(검정과 흰색)까지의 숫자로 나타낸 값입니다. WCAG(웹 접근성 지침)는 일반 크기 본문에 4.5:1 이상을 요구합니다(AA 등급). 이 숫자가 나온 배경은 시력이 20/40 정도인 사람 — 대략 노안이 온 중년층 — 이 읽을 수 있는 선입니다.
즉 4.5:1 은 장애인만을 위한 기준이 아닙니다. 밝은 야외에서 화면을 보는 사람, 오래된 모니터, 40대 이상 사용자 전부에게 해당합니다. 국내에서는 공공기관 웹사이트가 웹 접근성 품질인증 심사에서 이 항목을 봅니다.
- 연한 회색 본문(#999)은 흰 배경에서 약 2.85:1 로 실패합니다. "세련돼 보인다"는 이유로 가장 많이 저지르는 실수입니다.
- 브랜드 색 버튼에 흰 글자를 얹는 조합은 표의 "이 색 배경 위 흰 글자" 줄을 보세요. 파스텔 톤 브랜드 색이면 대체로 실패합니다 — 이때는 글자를 검정으로 바꾸거나 배경색을 어둡게(명도 팔레트의 600~700) 조정합니다.
- "권장 글자색" 통계가 이 판단을 바로 해 줍니다. 흰색과 검정 중 대비가 더 나은 쪽을 알려 줍니다.
| 기준 | 대비비 | 적용 대상 |
|---|---|---|
| AA (일반 텍스트) | 4.5:1 | 본문. 사실상의 최소 기준 |
| AA (큰 텍스트) | 3:1 | 24px 이상 또는 굵은 18.66px 이상 |
| AAA (일반 텍스트) | 7:1 | 더 엄격한 등급. 필수는 아님 |
| UI 구성 요소·그래픽 | 3:1 | 버튼 테두리, 아이콘, 입력창 경계 |
CMYK — 화면 색이 인쇄에서 그대로 나오지 않는 이유
RGB 는 빛을 더해서 색을 만들고(더할수록 밝아짐), CMYK 는 잉크를 얹어서 만듭니다(얹을수록 어두워짐). 원리가 반대이고 표현 가능한 색 영역도 다릅니다. 화면의 형광 계열 색 — 쨍한 파랑, 네온 그린, 밝은 주황 — 은 CMYK 잉크로 재현이 안 되어 인쇄물에서 눈에 띄게 탁해집니다.
이 도구의 CMYK 값은 수식으로 계산한 근사치입니다. 실제 인쇄는 용지·잉크·컬러 프로파일에 따라 결과가 또 달라지므로 여기 값을 그대로 인쇄 데이터로 넘기면 안 됩니다.
CSS 이름색과 스포이드 대신 쓰는 법
이름색 칸에 royalblue 처럼 입력하면 변환되고, 반대로 색을 고르면 정확히 일치하는 이름이 있을 때만 이름이 채워집니다. 일치하는 이름이 없으면 플레이스홀더에 "≈ 가장 가까운 이름"으로 표시됩니다 — 근사치라는 뜻이므로 그 이름을 코드에 쓰면 다른 색이 됩니다.
CSS 이름색은 이름과 실제 색이 직관과 어긋나는 것도 많습니다(darkgray 가 gray 보다 밝습니다). 프로토타입이나 디버깅용으로는 편하지만 제품 코드에는 HEX 를 쓰는 편이 낫습니다.
- 입력 칸은 형식을 가리지 않습니다. HEX 칸에 rgb(79,70,229) 를 붙여넣어도 인식하고, 숫자만 "79, 70, 229" 로 넣어도 그 칸의 성격에 맞게 해석합니다.
- 이 도구에는 화면 색을 집는 스포이드 기능이 없습니다. 웹페이지의 색을 알아내려면 브라우저 개발자 도구의 색상 피커나 OS 기본 도구를 쓴 뒤, 얻은 HEX 를 여기에 붙여넣어 팔레트·대비를 확인하는 흐름이 됩니다.
자주 묻는 질문
투명도(알파 채널)도 지원하나요?
네, 지원합니다. `rgba(255, 87, 51, 0.5)`나 8자리 HEX 코드 `#FF573380`처럼 투명도 값을 포함한 색상을 입력하고 변환할 수 있습니다. 다만 '명도 팔레트', '배색 추천' 등 추가 기능은 색상 자체의 특성을 기준으로 하므로, 입력된 값의 불투명 버전을 기준으로 계산 결과를 보여줍니다.
CMYK 값은 인쇄용으로 바로 써도 되나요?
이 도구에서 제공하는 CMYK 값은 RGB(빛의 삼원색)에서 변환된 근사치입니다. 화면 색상과 인쇄 색상(색의 삼원색)은 표현 방식이 달라 완벽한 변환이 어렵습니다. 대략적인 색감을 참고하는 용도로 사용하시고, 정밀한 인쇄 작업에는 전문 디자인 프로그램의 프로파일 기반 변환 기능을 사용하시는 것이 좋습니다.
'명도 팔레트'는 어떤 원리로 만들어지나요?
'명도 팔레트'는 입력된 색상의 고유한 색상(Hue)과 채도(Saturation)는 유지한 채, 밝기(Lightness)만 10단계로 조절하여 생성됩니다. 이는 HSL 색상 모델을 기반으로 하며, 일관된 톤을 유지하는 색상표를 손쉽게 만들 수 있어 디자인 시스템 구축에 유용합니다.
CSS 이름색 입력란에 '≈' 표시는 무엇인가요?
CSS에는 `red`나 `royalblue`처럼 미리 이름이 정해진 색상들이 있습니다. 입력한 색상 코드가 이 이름과 정확히 일치하면 해당 이름이 표시됩니다. 만약 정확히 일치하지 않으면, 시각적으로 가장 비슷한 색상의 이름을 '≈' 기호와 함께 추천해주는 기능입니다. 색상의 대략적인 정체성을 파악하는 데 도움이 됩니다.