색상 코드 변환기 사용 방법
- 색상 선택을 눌러 원하는 색을 고르거나, 색상 코드 입력 칸에 HEX·RGB·HSL 값을 붙여 넣습니다.
- HEX, RGB, HSL, HSV, CMYK 값이 표에 나타나며 복사 버튼으로 바로 복사할 수 있습니다.
- 명도 대비에서 흰 글씨와 검은 글씨 중 어느 쪽이 더 잘 읽히는지 확인합니다.
- 아래 팔레트에서 같은 계열의 밝은 색·어두운 색을 눌러 바로 선택할 수 있습니다.
HEX를 RGB로 변환하는 방법
HEX 코드 #RRGGBB는 빨강·초록·파랑 값을 각각 16진수 두 자리(00~FF, 10진수 0~255)로 적은 것입니다. 두 자리씩 끊어 10진수로 바꾸면 RGB가 됩니다.
#FF8800 → FF=255, 88=136, 00=0 → rgb(255, 136, 0)
반대로 RGB를 HEX로 바꿀 때는 각 값을 16진수 두 자리로 바꿔 이어 붙입니다. 37 → 25, 99 → 63, 235 → EB이므로 rgb(37, 99, 235)는 #2563EB입니다. 3자리 HEX(#F80)는 각 자리를 두 번 쓴 #FF8800과 같습니다. 16진수 계산이 궁금하면 진법 변환기를 이용하세요.
HSL, HSV, CMYK는 무엇이 다른가요?
| 형식 | 구성 | 주로 쓰는 곳 |
|---|---|---|
| RGB / HEX | 빛의 3원색 세기(0~255) | 웹, 화면 디자인 |
| HSL | 색상(0~360°)·채도·밝기 | CSS에서 밝기만 조절할 때 |
| HSV(HSB) | 색상·채도·명도 | 포토샵 등 그래픽 프로그램의 색상 선택기 |
| CMYK | 잉크 4색 비율 | 인쇄물 |
CMYK 값은 RGB에서 수식으로 계산한 근사값입니다. 실제 인쇄 색은 용지와 프린터 색 프로파일에 따라 달라지므로 중요한 인쇄물은 인쇄소의 색 기준을 확인하세요.
명도 대비 4.5:1 기준과 글자색 고르기
웹 접근성 지침(WCAG 2.1)은 일반 글자와 배경의 명도 대비를 4.5:1 이상(AA), 큰 글자(약 24px 이상 또는 굵은 18.66px 이상)는 3:1 이상으로 권장합니다. 7:1 이상이면 더 엄격한 AAA 기준을 충족합니다.
명도 대비는 두 색의 상대 휘도 L로 (밝은 L + 0.05) ÷ (어두운 L + 0.05)를 계산합니다. 흰색과 검정의 대비가 최대값인 21:1입니다. 버튼이나 배너 색을 정할 때 위 결과에서 AA 표시가 붙은 글자색을 고르면 대부분의 사람이 읽기 편합니다.
CSS에서 색상 코드 쓰는 법
변환한 값은 CSS에 그대로 붙여 넣을 수 있습니다. 세 형식 모두 같은 색입니다.
color: #2563EB;color: rgb(37, 99, 235);color: hsl(221.2, 83.2%, 53.3%);
반투명 색이 필요하면 rgb(37 99 235 / 50%)처럼 슬래시 뒤에 투명도를 적거나, HEX 뒤에 두 자리를 더해 #2563EB80처럼 씁니다(80은 약 50% 불투명도).