색상 변환기 (HEX · RGB · HSL)
HEX·RGB·HSL·HWB·OKLCH·LAB·LCH·XYZ·LUV·CMYK 13가지 형식을 한 번에. 배색·틴트/셰이드·명도 대비·색각 이상 미리보기까지. 무료, 브라우저 처리.
CSS 색 이름도 입력할 수 있어요 (예: rebeccapurple).
모든 형식
#5b8cffrgb(91, 140, 255)0.3569, 0.549, 1rgb(35.7%, 54.9%, 100%)hsl(222.1, 100%, 67.8%)hsv(222.1, 64.3%, 100%)hwb(222.1 35.7% 0%)oklch(66.23% 0.17859 264.64)lab(59.15% 10.96 -63.39)lch(59.15% 64.33 279.8)color(xyz-d65 0.3174 0.282 0.9838)luv(60.07, -22.27, -101.42)cmyk(64%, 45%, 0%, 0%)lab()·lch()는 CSS Color 4 정의대로 D50 백색점 기준이고, XYZ·LUV는 sRGB의 D65 기준입니다.
명도 대비
비슷한 색
색각 이상
배색
색상 칸을 클릭하면 해당 hex가 복사됩니다.
변형
🔒 브라우저에서 모두 변환되며 업로드되지 않습니다.
색상 형식 변환
색을 고르거나 HEX·rgb()·hsl()·hsv()/hsb()·oklch()·cmyk()
값 또는 CSS 색 이름을 붙여넣으면 13가지 형식이 한 번에 나옵니다 — HEX, RGB, RGB 0-1, RGB %, HSL,
HSV/HSB, HWB, OKLCH, LAB, LCH, XYZ, LUV, CMYK. 행마다 복사 버튼이 있고, R/G/B·H/S/L 슬라이더로 미세 조정할 수
있으며, 미리보기는 체커보드 위에 올려 알파가 보이게 했습니다. OKLCH(CSS Color 4)는 Tailwind v4·shadcn
같은 최신 디자인 시스템이 쓰는 지각 기반 형식입니다. 알파 값을 더하면 rgba()·hsla()·oklch(… / a)·8자리
HEX가 나오고, RGB 0-1·RGB %·HWB·LAB·LCH·XYZ 행에도 알파가 반영됩니다.
행마다 어떤 백색점을 쓰는지
lab()·lch()는 CSS Color 4 정의대로 D50 백색점 기준입니다(선형 sRGB →
XYZ D65 → Bradford 색순응 → XYZ D50 → Lab). color(xyz-d65 …)와 LUV는 sRGB의 백색점인 D65
기준이고, 어느 쪽인지 페이지에 적어 둡니다 — 이 둘을 말없이 섞는 것이 변환기마다 같은 색의 값이 어긋나는 대표적인
이유입니다. CMYK는 ICC 프로파일 없는 표준 공식이라 인쇄 교정용이 아니라 화면 근사값으로 보세요.
한 색에서 함께 나오는 것들
형식 아래로 이어집니다. 흰 배경·검은 배경 명도 대비와 일반 글자·큰 글자 기준 WCAG AA·AAA 판정 —
반투명 색은 배경 위에 합성한 뒤 재기 때문에 실제로 보이는 값입니다. 이어서 가장 가까운 CSS 색 이름 8개를
클릭 가능한 색상 칸으로(aqua·cyan처럼 hex가 같은 이름은 하나로 묶습니다), 색각 이상 미리보기를 정상
시야와 나란히(적색맹·녹색맹·청색맹·전색맹 — 이미지 색각 시뮬레이터와 같은 근사 변환 행렬을 쓰며 의학적으로 정확한
모델은 아닙니다), 배색 6종(보색·유사색·분할 보색·삼각 배색·60°/180°/240° 직사각형인 사각 배색·90°/180°/270°
균등 분할인 정사각 배색), 변형 램프 5종 × 9칸(틴트·셰이드·톤·색상 회전·색온도)을 보여줍니다. 틴트·셰이드·톤은
원래 색에서 출발해 완전한 흰색·검정·회색 직전에서 멈추고, 색상 회전은 원래 색상값 기준 좌우 60°를 훑습니다. 색상 칸을
클릭하면 그 hex가 복사됩니다. 버튼 하나로 CSS 색 이름 148개 표(미리보기·이름·hex·R, G, B)를 펼칠 수
있고, 도구 안에서 스페이스바를 누르거나 "무작위 색" 버튼을 누르면 새 색이 나옵니다. "링크 복사"는 현재 색을
?c=로 담은 주소를 복사합니다. 모든 처리는 브라우저에서 이뤄집니다.
자주 묻는 질문
어떤 형식을 지원하나요?
입력은 HEX(3·4·6·8자리)·rgb()/rgba()(0-255 또는 퍼센트)·hsl()/hsla()·hsv()/hsb()·oklch()·cmyk()·CSS 색 이름을 받고, 출력은 13개 행이 한 번에 갱신됩니다 — HEX, RGB, RGB 0-1, RGB %, HSL, HSV/HSB, HWB, OKLCH, LAB, LCH, XYZ, LUV, CMYK. HWB·LAB·LCH·XYZ·LUV와 RGB 0-1 행은 출력 전용이고, RGB % 행은 그대로 붙여넣으면 다시 읽힙니다.
CMYK를 HEX로 변환할 수 있나요?
네 — cmyk() 값(예: cmyk(0%,100%,100%,0%))을 붙여넣으면 HEX·RGB·HSL로 변환됩니다. ICC 프로파일 없는 표준 공식을 쓰므로 인쇄 교정용이 아니라 화면 근사값으로 보세요.
OKLCH도 지원하나요?
네. oklch() 행에 현재 색을 CSS Color 4 OKLCH로 보여주며, oklch() 값을 붙여넣어 HEX/RGB로 되돌릴 수도 있습니다. 이 도구는 sRGB에서 동작하므로 넓은 색영역(wide-gamut) OKLCH 값은 가장 가까운 sRGB 색으로 조정됩니다.
투명도(알파)도 되나요?
네. 알파 슬라이더를 조절하면 rgba()·hsla()·oklch(… / a)·8자리 HEX가 나오고, RGB 0-1·RGB %·HWB·LAB·LCH·XYZ 행에도 알파가 함께 붙습니다. HSV·LUV·CMYK는 여기서 알파 표기가 없어 불투명 값 그대로입니다. 미리보기는 체커보드 위에 투명도를 보여주고, 명도 대비는 원본 값이 아니라 배경 위에 합성한 색으로 계산합니다.
CSS용으로 복사할 수 있나요?
네. 각 값에 복사 버튼이 있어 스타일시트에 바로 붙여넣을 수 있습니다.
LAB·LCH·XYZ·LUV·HWB도 보여주나요?
네, 다섯 개 행이 더 있습니다. lab()·lch()는 CSS Color 4가 정의한 D50 백색점 기준이며 D65에서 Bradford 색순응을 거쳐 계산합니다. color(xyz-d65 …)와 luv()는 sRGB의 백색점인 D65 기준이고, 어느 쪽인지 각 행에 적혀 있습니다. LUV는 CSS 문법이 없어 luv(L, u, v) 형태의 단순 삼중값으로 표기합니다.
여기서 명도 대비도 확인할 수 있나요?
네. 명도 대비 항목에서 흰 배경과 검은 배경에 대한 대비율과 함께 WCAG AA(4.5:1)·AAA(7:1)·큰 글자 기준(3:1, 4.5:1) 통과 여부를 보여줍니다. 색이 반투명하면 배경 위에 합성한 뒤 재므로 실제로 보이는 값과 일치합니다.
배색이나 틴트·셰이드도 나오나요?
네. 보색·유사색·분할 보색·삼각 배색·사각 배색·정사각 배색 6종이 한 화면에 나오고, 각 배색의 첫 칸은 손대지 않은 원래 색이며 색상(Hue)만 회전합니다. 그 아래에는 9칸짜리 램프 5종 — 틴트(흰색 방향)·셰이드(검정 방향)·톤(회색 방향)·색상 회전(좌우 60°)·색온도(차가운 쪽에서 따뜻한 쪽으로, 원래 색이 가운데) — 이 이어집니다. 색상 칸을 클릭하면 hex가 복사됩니다.
색각 이상인 사람에게 어떻게 보이는지 볼 수 있나요?
네. 정상 시야와 나란히 적색맹·녹색맹·청색맹·전색맹을 미리 보여줍니다. 이미지 색각 시뮬레이터와 동일한 픽셀 단위 변환(널리 쓰이는 근사 행렬, 전색맹은 Rec. 601 휘도)을 한 색에 적용한 것이라 디자인 점검용 근사치이며 의학적으로 정확한 시뮬레이션은 아닙니다.
CSS 색 이름 목록도 있나요?
네. 버튼을 누르면 CSS 이름 색 148개를 미리보기·이름·hex·R, G, B와 함께 표로 펼칩니다. 펼칠 때만 만들어지므로 평소 슬라이더 조작이 느려지지 않습니다.
색을 링크로 공유할 수 있나요?
네. 현재 색이 주소에 ?c= 로 들어가고 "링크 복사" 버튼이 그 주소를 복사합니다. 다만 알파 슬라이더 값은 주소에 담기지 않아 공유된 링크는 불투명한 색으로 열립니다.
무작위 색은 어떻게 뽑나요?
도구 안을 클릭한 뒤 스페이스바를 누르거나 "무작위 색" 버튼을 누르면 됩니다. 단축키가 문서 전체가 아니라 도구 안으로 한정돼 있어서, 다른 곳에서 스페이스바를 누르면 평소대로 페이지가 스크롤됩니다.