HEX와 RGB는 같은 sRGB 채널 값을 다르게 적습니다
RGB는 빨강, 초록, 파랑 채널을 각각 0부터 255 사이의 십진수로 표시합니다. HEX는 같은 세 채널을 00부터 ff까지의 16진수 두 자리씩 이어 적습니다. 예를 들어 rgb(255, 0, 128)은 #ff0080입니다.
W3C의 CSS Color Module Level 4는 sRGB를 red·green·blue 세 값으로 표현하며 #RRGGBB와 rgb()가 같은 sRGB 색상을 나타낼 수 있다고 정의합니다.
변환 방법
RGB → HEX: 각 0~255 값을 두 자리 16진수로 변환
#2f6f4e에서 2f는 47, 6f는 111, 4e는 78입니다. 3자리 HEX인 #3a7을 입력하면 각 문자를 두 번 반복한 #33aa77로 확장해 계산합니다.
HSL은 색상·채도·밝기로 읽습니다
H는 0~360도의 색상 각도, S는 채도, L은 밝기입니다. HSL은 사람이 색의 성격을 조정하기 편한 표현이지만 화면에 표시될 때는 sRGB 색상으로 해석됩니다. 이 계산기는 불투명 색상만 다루며 alpha 투명도는 포함하지 않습니다.
표시 장치의 색 영역, 컬러 프로파일과 브라우저 렌더링에 따라 같은 숫자도 실제로 보이는 색이 다를 수 있습니다. 디자인 시스템에서는 값과 함께 사용 목적과 대비 기준을 기록하는 편이 좋습니다.
주의할 점
- HEX는 #RGB 또는 #RRGGBB 형식만 지원합니다.
- RGB 입력값은 각 채널 0~255 사이의 정수여야 합니다.
- 광색역 Display-P3, Lab, OKLCH 색상을 sRGB로 단순 변환하는 도구는 아닙니다.
- 색상 미리보기만으로 텍스트 대비와 접근성을 판단하지 마세요.
#3A7을 바꿨을 때 나와야 하는 값
HEX 칸에 #3A7을 입력하면 #33AA77로 확장합니다. 축약형의 세 글자는 각각 빨강·초록·파랑 채널의 두 자리를 대표합니다.
| 채널 | HEX | RGB 십진수 |
|---|---|---|
| 빨강 R | 33 | 3 × 16 + 3 = 51 |
| 초록 G | AA | 10 × 16 + 10 = 170 |
| 파랑 B | 77 | 7 × 16 + 7 = 119 |
결과는 rgb(51, 170, 119)입니다. 대문자 A와 소문자 a는 같은 16진수 값이므로 코드의 대소문자만 바꿔도 색은 같습니다. 반면 #3A7을 #030A07처럼 앞에 0을 붙여 해석하면 완전히 다른 값이 됩니다.
RGB 채널이 모두 같으면 무채색입니다. rgb(128, 128, 128)은 #808080이고 HSL의 채도는 0%입니다. 이때 색상 각도 H는 색을 구별하는 의미가 없으며, 표시되는 0도를 빨간색이라는 뜻으로 읽지 않습니다. HSL의 밝기 50%도 글자 대비가 충분하다는 판정은 아닙니다. 이 도구는 표기 변환용이며 대비 검사나 인쇄 CMYK 변환은 지원하지 않습니다.
예시 보강 · 직접 구성한 계산 조건