HEX 3자리 단축형도 지원하나요?

예. `#f60` 은 `#ff6600` 으로 자동 확장. CSS 4 의 8자리 hex(#rrggbbaa, alpha 포함)도 인식.

HSL 의 H 가 360 이상이면?

H 는 모듈러 360 — 380 = 20, -10 = 350. CSS 도 그대로 받아들이지만 도구는 0-359 로 정규화해 표시.

2023년 CSS Color 4 에 정식 추가된 색 공간. 사람 눈의 명도 인식과 일치하도록 설계 — 같은 L 값이면 정말 같은 밝기로 보입니다. 디자인 시스템에서 점점 표준이 되는 중.

예시

#5b21b6

HEX:  #5b21b6
RGB:  rgb(91, 33, 182)
HSL:  hsl(266, 70%, 42%)
OKLCH: oklch(0.45 0.20 290)

HEX·RGB·HSL 어떤 형식으로 넣어도 자동 인식. 컬러 피커·스포이드(EyeDropper API)·추천 팔레트도 지원.

사용법 / 자주 묻는 질문

Q.HEX 3자리 단축형도 지원하나요?: A.예. `#f60` 은 `#ff6600` 으로 자동 확장. CSS 4 의 8자리 hex(#rrggbbaa, alpha 포함)도 인식.
Q.HSL 의 H 가 360 이상이면?: A.H 는 모듈러 360 — 380 = 20, -10 = 350. CSS 도 그대로 받아들이지만 도구는 0-359 로 정규화해 표시.
Q.OKLCH 가 뭐죠?: A.2023년 CSS Color 4 에 정식 추가된 색 공간. 사람 눈의 명도 인식과 일치하도록 설계 — 같은 L 값이면 정말 같은 밝기로 보입니다. 디자인 시스템에서 점점 표준이 되는 중.

재미있는 사실

sRGB 는 1996년 HP 와 Microsoft 가 CRT 모니터를 표준화하려고 만든 IEC 61966-2-1 표준입니다. 거의 모든 web 이미지·HTML 컬러의 기본 color space — Display-P3 같은 wide-gamut 가 등장한 지금도 fallback 으로 살아 있어요.
Wikipedia — sRGB
Display-P3 는 영화관용 DCI-P3 색공간에 sRGB 감마를 합친 Apple 의 디스플레이 표준입니다. iPhone 7(2016) 부터 채택돼 사진·이모지가 더 선명해 보이는 이유 — sRGB 대비 ~25% 더 넓은 gamut, 특히 빨강·녹색이 진합니다.
WebKit — Display P3
감마 2.2 가 색공간마다 등장하는 이유는 사람 눈입니다 — 어두운 영역에 민감하고 밝은 영역에 둔감해, 비선형 transfer function(밝기^2.2) 이 같은 8-bit 정수에 perceptually 균일한 분포를 만들어 줍니다. linear RGB(감마 1.0) 로 저장하면 어두운 영역이 banding 으로 망가져요.
Wikipedia — Gamma correction