색상과 CSS
반올림 차이까지 이해하며 HEX·RGB·HSL 변환하기
#D9FF68을 RGB와 HSL로 직접 계산하고, 정수 HSL을 거쳐 다시 변환하면 최종 HEX가 달라지는 이유를 확인합니다.
angelcrown · 수정일 · 한국어값을 바꿔 직접 확인하세요
아래 예제는 이 페이지 안에서 계산됩니다. 본문의 계산 과정과 비교해 보세요.
- RGB
- 217, 255, 104
- HSL (소수 4자리 표시)
- 75.0993°, 100%, 70.3922%
- 반올림한 HSL
- 75°, 100%, 70%
- 왕복 후 RGB 차이
- 0, 0, -2
값이 같은지는 미리보기 색이 아니라 HEX·RGB 숫자로 확인하세요. sRGB 표기 변환이며 대비율이나 모니터의 색 정확도를 측정하지 않습니다.
하나의 sRGB 색상을 나타내는 세 가지 방법
HEX는 빨강·초록·파랑을 각각 두 자리 16진수로 묶어 표시합니다. RGB는 같은 채널을 10진수로 표시합니다. HSL은 같은 sRGB 색상을 색상(Hue), 채도(Saturation), 명도(Lightness)로 표현합니다. 표기 변환은 디자인 토큰을 CSS로 옮기거나 색상을 기준으로 변형할 때 유용하지만, 모니터를 보정하거나 표현 가능한 색 영역을 넓혀 주지는 않습니다.
HaloBench 색상 변환기는 0부터 255까지의 정수 RGB 채널을 사용하고, #를 붙이거나 생략한 세 자리·여섯 자리 HEX를 받으며 HSL은 정수로 표시합니다. H, S, L을 각각 입력하는 숫자 필드도 있습니다. CSS 스타일시트 전체, 이름으로 된 색상, 알파 채널, 광색역 색상 표기를 해석하는 기능은 없습니다.
#D9FF68을 RGB로 풀어 보기
D9FF68을 D9, FF, 68로 나눕니다. 16진수 두 자리는 ‘첫째 자리 × 16 + 둘째 자리’입니다. D는 13, F는 15이므로 빨강 = 13 × 16 + 9 = 217, 초록 = 15 × 16 + 15 = 255, 파랑 = 6 × 16 + 8 = 104가 됩니다. 따라서 #D9FF68과 rgb(217, 255, 104)는 정확히 같은 세 채널 값을 나타냅니다.
세 자리 축약형은 각 자리를 반복하며, 뒤에 0을 붙이는 방식이 아닙니다. #0F8은 #00FF88로 확장되고 rgb(0, 255, 136)입니다. 여섯 자리 값을 줄이려면 모든 쌍에서 두 숫자가 같아야 합니다. #D9FF68의 D9와 68은 이 규칙을 충족하지 않으므로 축약할 수 없습니다.
| HEX 입력 | 확장한 HEX | RGB 채널 | HaloBench HSL 표시 |
|---|---|---|---|
| #D9FF68 | #D9FF68 | 217, 255, 104 | 75, 100%, 70% |
| #0F8 | #00FF88 | 0, 255, 136 | 152, 100%, 50% |
| #808080 | #808080 | 128, 128, 128 | 0, 0%, 50% |
| #000 | #000000 | 0, 0, 0 | 0, 0%, 0% |
| #FFF | #FFFFFF | 255, 255, 255 | 0, 0%, 100% |
같은 예시의 HSL 값 직접 계산하기
RGB의 각 채널을 255로 나누어 정규화합니다. #D9FF68에서 가장 큰 채널은 초록의 1이고, 가장 작은 채널은 파랑의 104/255입니다. 둘의 차이를 Δ = 151/255로 둡니다. 명도는 (최댓값 + 최솟값) / 2 = 359/510이며, 약 70.392157%입니다.
채도는 Δ / (1 − |2L − 1|)입니다. 여기서는 분모가 Δ와 같으므로 채도가 100%입니다. 초록이 가장 큰 채널이므로 색상은 60 × ((파랑 − 빨강) / Δ + 2), 약 75.099338도입니다. HaloBench는 이 세 성분을 반올림해 hsl(75, 100%, 70%)로 표시합니다. 정수 값은 편집하기 편하지만 원래 RGB 채널을 정확히 대체하는 값은 아닙니다.
#D9FF68
rgb(217, 255, 104)
H ≈ 75.099338°
S = 100%
L ≈ 70.392157%
HaloBench display: hsl(75, 100%, 70%)다시 변환하면 #D9FF66이 나올 수 있는 이유
HSL을 정수로만 남기면 정밀도가 줄어듭니다. hsl(75, 100%, 70%)를 HaloBench의 가장 가까운 정수 RGB 변환으로 되돌리면 rgb(217, 255, 102), 즉 #D9FF66이 됩니다. 파랑이 원래 104보다 2 작습니다. 예상 가능한 반올림 영향이며, HEX와 RGB가 서로 맞지 않는다는 뜻은 아닙니다.
기존 브랜드 색상을 정확히 유지해야 한다면 원래 HEX나 RGB를 기준 값으로 보관하세요. HSL은 편집 보조 수단으로 쓰고, 의도한 새 색상이 만들어지면 결과 HEX를 저장하세요. 변환기가 반올림해 표시한 성분을 바탕으로 다시 계산하므로 HSL 필드를 반복해서 편집하면 차이가 더 생길 수 있습니다.
| 작업 | 결과 | 원본과 정확히 같은가? |
|---|---|---|
| 원래 HEX → RGB | 217, 255, 104 | 같음 |
| RGB → 정수 HSL 표시 | 75, 100%, 70% | 정밀도가 줄어듦 |
| 표시된 HSL → 반올림한 RGB | 217, 255, 102 | 다름: 파랑 값이 2 차이 |
| 반올림한 RGB → HEX | #D9FF66 | 다름 |
프로젝트에 색상 적용하기
필드를 바꾸기 전에 정확한 기존 색상을 보존할 작업인지, 변형 색상을 만들 작업인지 결정하세요. 미리보기는 도움이 되지만 밝거나 보정되지 않은 디스플레이에서는 작은 채널 차이를 눈으로 구분하기 어려울 수 있습니다.
- 세 자리 또는 여섯 자리 HEX를 HaloBench 색상 변환기에 붙여 넣습니다. #는 생략해도 됩니다. 불완전하거나 잘못된 HEX를 넣으면 미리보기에는 마지막 유효한 색상이 남으므로, 입력 오류가 사라졌는지 확인하세요.
- R, G, B 필드에서 변환 결과를 확인합니다. #D9FF68이라면 각각 217, 255, 104가 나와야 합니다.
- 정확한 표기 변환이 목적이라면 ‘색상 값’에서 HEX나 RGB 줄을 복사해 CSS 또는 디자인 토큰에 사용합니다.
- 변형을 만드는 경우에는 H, S, L을 조절하고 새 미리보기를 비교합니다. 의도한 변화가 만들어지면 결과 HEX를 기록합니다.
- 글자, 테두리, 주변 배경을 포함한 실제 UI에서 색상을 살펴봅니다. 정보나 조작 요소에 쓰기 전에는 명암비를 별도로 확인하세요.
결과를 오해하기 쉬운 입력과 전제
CSS는 투명도를 표현하는 네 자리·여덟 자리 HEX도 지원하지만, 이 변환기는 세 자리 또는 여섯 자리만 받습니다. 따라서 #D9FF6880과 rgba(217, 255, 104, 0.5)는 지원 입력 범위 밖입니다. 불투명한 기본 색상을 변환하고, 알파를 명시적으로 지원하는 도구에서 투명도를 별도로 다루세요. 알파를 버리면 배경과 섞여 보이는 결과가 달라집니다.
RGB 입력은 반올림한 뒤 0–255 범위로 제한합니다. HSL의 채도와 명도는 0–100 범위로 제한하고, 색상은 360도 원을 순환합니다. 모든 RGB 채널이 같은 회색은 채도가 0이며 도구는 색상을 0으로 표시합니다. 그 색상 값 때문에 회색이 빨강이 되는 것은 아닙니다.
HSL 명도는 사람이 느끼는 밝기나 접근성 명암비 계산에 쓰는 상대 휘도와 다릅니다. 같은 L 값을 가진 두 색상도 가독성이 다를 수 있습니다. 이 변환기는 명암비 계산, 색각 차이 시뮬레이션, Display P3·CMYK·OKLCH 변환을 제공하지 않습니다.
실제 도구에서 사용하기
기술 참고 자료
잘못된 결과나 이해하기 어려운 설명이 있다면 입력 예제, 예상 결과, 브라우저 버전과 함께 알려주세요. 개인정보·비공개 파일·인증 정보는 보내지 마세요. 수정 제안 (문의 페이지는 영어)