HEX RGB 색상 변환기

사용 방법

1. 3자리 또는 6자리 HEX 코드를 붙여넣거나, 색상 선택기 또는 RGB 채널을 입력합니다.
2. 즉시 바뀌는 HEX, RGB, HSL, OKLCH CSS 표기값을 확인합니다.
3. 스타일시트나 디자인 토큰에 필요한 형식 옆의 복사 버튼을 누릅니다.
4. 흰색과 검은색 배경에서의 대비율과 AA·AAA 결과를 확인합니다.

HEX와 RGB는 같은 불투명 sRGB 색을 다르게 적는 방법입니다

6자리 HEX 코드는 sRGB 채널 3개를 각각 16진수 두 자리로 적습니다. #3B82F6은 3B = 59, 82 = 130, F6 = 246이므로 rgb(59 130 246)과 같습니다. RGB 채널은 0부터 255까지 256개 정수 중 하나이므로, 불투명 24비트 RGB 색은 256³ = 16,777,216가지입니다. CSS의 3자리 축약형 #3BF는 #33BBFF로 늘어납니다.

W3C CSS Color Module Level 4는 sRGB의 16진수 표기와 rgb() 표기를 정의합니다. 이 도구는 불투명 #RGB·#RRGGBB만 받습니다. 투명 색은 배경을 알아야 대비율을 정확히 계산할 수 있기 때문입니다.

HSL과 OKLCH를 함께 보는 이유

HSL은 같은 sRGB 색을 색상(0~360도), 채도, 명도로 적으므로 빠르게 색을 조정할 때 편리합니다. 다만 HSL은 지각적으로 균일하지 않아 명도를 같은 폭으로 바꿔도 사람 눈에는 같은 정도로 밝아지거나 어두워지지 않을 수 있습니다.

OKLCH는 Oklab의 원통형 표기입니다. L은 지각 밝기, C는 채도, h는 색상 각도입니다. CSS Color 4는 oklch() 문법을 포함합니다. 이 도구는 선택한 sRGB 색에서 OKLCH를 계산하고 읽기 쉬운 CSS 값으로 반올림하며, sRGB 색역 밖의 색을 만들지는 않습니다.

WCAG 대비율 읽는 법

대비율은 sRGB를 선형 광량으로 바꾼 뒤 (밝은 색 + 0.05) / (어두운 색 + 0.05)로 계산합니다. 같은 색끼리는 1:1, 검정과 흰색은 21:1입니다.

WCAG 2.2에서 일반 텍스트의 AA 기준은 4.5:1, AAA 기준은 7:1입니다. 큰 텍스트는 AA 3:1, AAA 4.5:1입니다. 이 도구는 불투명 글자색과 단색 흰색·검은색 배경만 검사합니다. 이미지·그라데이션·투명도·글자 굵기·실제 글자 크기는 최종 화면에서 추가로 확인해야 합니다.

자주 묻는 질문