색상 코드 변환기

색상 코드 변환기 사용법

입력 칸에 색을 입력하거나 붙여 넣고, 또는 색상 선택기로 고르세요. 브라우저가 CSS 색으로 인식하는 것이면 무엇이든 됩니다. # 유무와 상관없는 HEX 코드(#2563eb, 2563eb, 줄임형 #f80, 투명도가 들어간 8자리), rgb()와 hsl() 값, tomato 같은 색 이름을 넣을 수 있습니다.
표에는 같은 색이 HEX, RGB, HSL, HSV/HSB, CMYK로 나옵니다. 필요한 형식 옆의 복사를 누르세요.
글자 대비 (WCAG)에는 이 색 위에 흰색 글자와 검은색 글자를 올린 상자가 나오고, 대비율과 만족하는 접근성 등급이 표시됩니다.
밝은 톤과 어두운 톤에는 가운데의 현재 색을 중심으로 밝은 색부터 어두운 색까지 견본 아홉 개가 나옵니다. 견본을 누르면 그 색이 현재 색이 됩니다.

HEX – 빨강, 초록, 파랑을 각각 16진수 두 자리(00~FF)로 적습니다. #ff8800에서 빨강은 FF = 255, 초록은 88 = 136, 파랑은 00 = 0입니다. 세 자리 코드는 각 자리를 두 번 쓴 것과 같아서 #f80도 같은 색입니다. 네 번째 쌍을 붙이면 불투명도를 뜻하며, #2563eb80은 약 50% 불투명합니다.
RGB – 같은 세 채널을 0~255의 10진수로 적습니다(예: rgb(255, 136, 0)). 화면은 빨강, 초록, 파랑 빛을 섞기 때문에 0, 0, 0은 검정, 255, 255, 255는 흰색입니다.
HSL – 색상(색상환에서 0~360°, 0은 빨강, 120은 초록, 240은 파랑), 채도, 명도입니다. 색상은 그대로 두고 명도만 바꾸면 더 밝거나 어두운 색을 얻을 수 있어 손으로 조절하기 쉽습니다. 명도 100%는 언제나 흰색입니다.
HSV / HSB – 색상, 채도, 명도(밝기)로, 대부분의 디자인 앱 색상 선택기가 쓰는 방식입니다. 채도와 명도가 모두 100%이면 순수한 색이 되고, HSL에서는 같은 색이 명도 50%에 있습니다.
CMYK – 인쇄용 시안, 마젠타, 노랑, 검정 잉크입니다. 여기 나오는 값은 단순한 수학적 변환이며, 실제 인쇄 결과는 종이, 잉크, 색 프로파일에 따라 달라지므로 정확한 값은 인쇄소에 문의하세요.

기본 파란색 #2563eb는 rgb(37, 99, 235), hsl(221, 83%, 53%), hsv(221, 84%, 92%), cmyk(84%, 58%, 0%, 8%)입니다. 이 색 위의 흰색 글자는 5.17:1(AA), 검은색 글자는 4.06:1(큰 글자만)입니다.
주황색 버튼: #ff8800 위의 흰색 글자는 2.39:1로 기준 미달이지만, 검은색 글자는 8.77:1(AAA)입니다. 밝은 주황이나 노랑 배경에 보통 어두운 글자를 쓰는 이유입니다.
회색 글자: #777777과 흰색의 대비는 4.48:1로, 일반 글자에 필요한 4.5:1에 조금 못 미칩니다. 한 단계 어두운 #767676은 4.54:1로 통과합니다.
한 가지 색으로 만드는 팔레트: #2563eb의 밝은 톤은 #d3e0fb부터 #5182ef까지, 어두운 톤은 #1e4fbc부터 #07142f까지입니다. 단계마다 흰색이나 검정을 20%씩 더 섞기 때문에 배경, 테두리, 마우스를 올렸을 때의 색을 일관되게 고를 수 있습니다.

웹 콘텐츠 접근성 지침(WCAG 2)은 대비를 두 색의 상대 휘도 비율로 정의하며, 1:1(같은 색)부터 21:1(흰 바탕의 검은 글자)까지입니다. 표시되는 등급은 다음과 같습니다.

AAA – 7:1 이상. 일반 글자의 강화 기준입니다.
AA – 4.5:1 이상. 일반 본문 글자의 최소 기준입니다.
AA (큰 글자만) – 3:1 이상 4.5:1 미만. 큰 글자, 즉 18포인트(24px) 이상이거나 굵은 14포인트(약 18.7px) 이상일 때만 허용됩니다.
기준 미달 – 3:1 미만입니다.

WCAG는 아이콘, 입력란 테두리 같은 중요한 그래픽 요소에도 3:1 이상을 요구합니다. 휘도 공식에서는 초록이 파랑보다 훨씬 크게 반영되기 때문에 순수한 노랑은 밝아 보이고 순수한 파랑은 어두워 보입니다. 대비는 투명도를 무시하고 불투명한 색으로 계산합니다.

HSL이나 HSV로 색을 고른 뒤 CSS나 디자인 파일에는 HEX나 RGB를 복사해 넣으세요. 모든 형식은 같은 sRGB 색을 나타냅니다.
기본, 마우스 올림, 비활성 등 모든 상태의 대비를 확인하고, 오류를 빨간색으로만 표시하는 것처럼 색에만 의미를 맡기지 마세요. 글자나 아이콘을 함께 쓰세요.
HSL 값은 정수로 반올림되므로 다시 변환하면 채널 값이 1 정도 달라질 수 있습니다. 정확히 같은 색이 필요하면 HEX를 복사하세요.
HEX의 각 자리는 16진수입니다. EB가 어떻게 235가 되는지는 진법 변환기에서 확인할 수 있습니다. 다크 모드도 함께 디자인한다면 화면 해상도 확인 페이지에서 지금 브라우저가 다크 모드를 선호하는지 볼 수 있습니다.

표기법만 다릅니다. HEX는 0~255의 세 값을 16진수로, RGB는 10진수로 적습니다.

화면은 빛을 내기 때문에 잉크로는 재현할 수 없는 선명한 색도 보여 줄 수 있습니다. 인쇄소는 자기 인쇄기와 종이에 맞는 프로파일로 변환하므로, 여기 나오는 CMYK 값은 출발점일 뿐입니다.

브라우저가 지원한다면 hwb()나 oklch() 같은 형식도 입력할 수 있습니다. 색은 표에 나오는 표준 sRGB 값으로 변환되며, 그 범위를 벗어나는 색은 가장 가까운 값으로 잘립니다.

대부분의 접근성 정책과 규정은 AA 등급을 기준으로 합니다. AAA는 더 엄격하지만 본문 글자에서는 달성할 수 있는 경우가 많고, 대비가 높을수록 햇빛 아래에서 화면을 보는 사람에게도 도움이 됩니다.