HSL 색상 픽커

슬라이더로 다루는 HSL 피커입니다. 대부분의 CSS 디자이너가 생각하는 색 모델이 HSL입니다. 각 레일이 그 슬라이더가 무엇을 따라 변하는지 시각화하므로, 지금 색상에서 채도 0이 어떻게 보이는지, 명도가 검정과 내 색과 흰색 사이에서 어떻게 넘어가는지 쉽게 확인할 수 있습니다. 출력은 HEX(선택적 8자리 알파 포함), rgb() / rgba(), hsl() / hsla(), 그리고 테일윈드 임의 값 형태로 제공합니다.

HSL이 편한 이유는 축이 디자이너가 이미 쓰는 낱말과 맞아떨어지기 때문이지만, 여기서의 명도는 지각적 밝기가 아닙니다. 숫자가 같은데도 명도 50%의 노랑은 밝은 색으로, 명도 50%의 파랑은 어두운 색으로 읽힙니다. 그래서 여러 색상에 걸쳐 L을 고정해 만든 팔레트는 눈에 띄게 들쭉날쭉해집니다. 새로운 CSS 색 공간들이 겨냥한 문제가 바로 이것이고, OKLCH는 명도를 고정하면 고정된 것처럼 보이게 합니다. 색 하나를 고르는 것이 아니라 단계를 만들고 있다면 둘 중 무엇이 필요한지 알아 둘 만합니다.

HSL의 채도는 슬라이더가 비슷해 보여도 HSV의 채도와 같은 양이 아닙니다. HSL은 다른 두 값과 무관하게 L이 100이면 순백, 0이면 순흑에 도달하므로 명도 레일의 양 끝이 무너집니다. 그 지점에서는 모든 색상이 똑같아 보이고, 설정한 색상과 채도는 저장되어 있지만 더 이상 보이지 않습니다.

16진수와의 변환은 한쪽 방향으로 손실이 있습니다. 정수로 지정하는 H 0–359, S 0–100, L 0–100의 조합은 360 × 101 × 101 ≈ 367만 개로, 약 1670만 개인 sRGB 색보다 훨씬 적습니다. 그래서 색을 HSL로 반올림하면 여러 16진수 값이 하나의 삼중항으로 합쳐지고, 다시 변환해도 늘 원래 값으로 돌아오지는 않습니다. 16진수를 입력하고 HSL을 읽어 다시 입력하면 출발점에서 한 걸음 어긋난 곳에 도착할 수 있습니다. 기준이 되는 값은 16진수 출력입니다. 8자리 형식에서는 알파 바이트가 마지막에 오는데, 이것이 CSS 순서이며 일부 디자인 도구의 관례와는 반대입니다.