palette 색상 변환기 star

작동 원리

이 세 가지 표기법은 모두 근본적으로 동일한 색상을 나타냅니다 — 화면이 그 색을 만들어내기 위해 섞는 빨강, 초록, 파랑 빛의 세기를 서로 다른 방식으로 인코딩할 뿐입니다. RGB는 각 채널을 0에서 255 사이의 10진수로 저장합니다. HEX는 그 RGB 값을 16진법으로 표기한 것에 불과합니다: 각 채널이 두 자리 16진수 쌍이 되어, rgb(255, 128, 0)은 #ff8000이 됩니다(ff = 255, 80 = 128, 00 = 0). 이 변환 과정에서 색상 정보는 조금도 늘거나 줄지 않습니다 — 순전히 표기 방식의 차이일 뿐입니다.

HSL은 다릅니다: RGB 채널로부터 수학적으로 계산된 색조(hue), 채도(saturation), 명도(lightness)라는 세 가지 지각적 축을 따라 색을 다시 표현합니다. 색조(0~360°)는 색상환 위의 각도로, 어떤 채널이 가장 크고 채널 간 값의 차이가 얼마나 되는지를 바탕으로 계산됩니다: #ff8000의 경우 빨강이 최댓값(255)이고 파랑이 최솟값(0)이며, 60 × ((초록 − 파랑) / (최댓값 − 최솟값)) 공식은 60 × (128/255) ≈ 30°를 산출하여 주황색 대역에 위치시킵니다. 명도는 가장 큰 채널값과 가장 작은 채널값의 평균입니다 — 여기서는 (255 + 0) / 2 ≈ 50%입니다. 채도는 그 명도에서 색이 회색으로부터 얼마나 멀리 떨어져 있는지를 측정합니다 — 한 채널이 최대 강도이고 다른 채널이 0이므로 여기서는 100%입니다. 이를 종합하면 hsl(30, 100%, 50%)로 표기되며, 이는 #ff8000과 동일한 주황색을 다른 방식으로 설명한 것입니다.

디자이너가 RGB 대신 HSL을 선호하는 이유가 바로 여기에 있습니다: 색조를 유지하면서 색을 20% 더 어둡게 만들려면 HSL에서는 명도 값만 낮추면 되지만, RGB에서는 세 채널을 모두 비례적으로 다시 계산해야 합니다. 색상 선택기로 색을 고르거나 임의의 HEX 코드를 입력하면 이 도구가 즉시 두 표기법으로 변환합니다.

알아두어야 할 사항

3자리 축약 HEX(#f80)와 알파 채널이 포함된 4/8자리 형식(#ff8000cc, rgba(255,128,0,0.8))도 흔히 쓰이는 변형입니다. 이 도구는 표준 6자리 불투명 HEX와 이에 대응하는 RGB/HSL 값을 다룹니다. orange와 같은 색상 이름은 CSS 명세에 정의된 고정 HEX 값에 대응하지만, 모든 색상 이름이 기억하기 쉬운 HEX 값을 갖는 것은 아니며, 이것이 개발자들이 계속해서 표기법을 오가며 변환하는 또 다른 이유입니다. 한 모니터에서 동일하게 보이는 두 색상이 다른 모니터에서는 미묘하게 다르게 표시될 수 있는데, 이는 일반 소비자용 디스플레이마다 색 영역과 색 보정 수준이 다르기 때문입니다 — HEX/RGB/HSL 값은 정확한 숫자이지만, 그 값이 실제로 만들어내는 빛이 모든 화면에서 동일하다고 보장되지는 않습니다. 텍스트와 배경 색상을 고를 때는 HSL의 명도(L) 값이 지각적 대비와 같은 것이 아니라는 점을 기억해야 합니다 — 채도가 높은 노랑과 채도가 높은 파랑은 같은 L 값을 가지면서도 흰색 배경 위에서는 전혀 다르게 보일 수 있으므로, 접근성 점검은 L 값만이 아니라 제대로 된 명암비 계산을 사용해야 합니다.

CSS는 rgb(100%, 50%, 0%)처럼 백분율 기반 RGB 표기도 rgb(255, 128, 0)과 완전히 동일한 값으로 받아들입니다 — 색상을 0~255 정수 대신 백분율로 표현하는 디자인 도구와 작업할 때 유용합니다. oklch()나 lab() 같은 최신 CSS 색상 함수는 HSL보다 한 걸음 더 나아가, 지각적으로 균일하도록 설계되어 있습니다. 즉 명도의 동일한 수치 변화가 모든 색조에서 사람 눈에 동일한 정도의 차이로 느껴지는데, 일반 HSL은 이를 완전히 보장하지는 못합니다. 하지만 일상적인 웹 및 UI 작업에서는 HEX, RGB, HSL이 여전히 거의 모든 코드베이스, 스타일 가이드, 디자인 도구에서 마주치게 될 세 가지 기본 형식으로 남아 있습니다.