현대적인 CSS Color 공간이란?
CSS Color 레벨 4에는 기존 sRGB를 뛰어넘는 몇 가지 새로운 색상 공간이 도입되었습니다. OKLCH 및 OKLab는 지각적으로 균일한 색상 조작을 제공합니다. 즉, 동일한 수치 변화가 동일한 인지된 색상 변화를 생성한다는 의미입니다. Display P3는 최신 디스플레이에서 더 넓은 색상 범위를 지원합니다. HWB(Hue, Whiteness, Blackness)는 HSL에 대한 직관적인 대안을 제공합니다. 이 도구는 즉시 사용 가능한 CSS 구문을 사용하여 단일 색상 입력을 이러한 모든 표현으로 변환합니다.
Color 우주 탐험가를 사용하는 방법
- 1색상 선택기 또는 텍스트 입력을 사용하여 HEX 색상을 입력하세요.
- 28가지 색상 공간으로 변환된 색상을 확인하세요.
- 3CSS 준비 값을 복사하려면 형식 옆에 있는 CSS 복사를 클릭하세요.
- 4현대 CSS에서 지각적으로 균일한 색상 팔레트를 얻으려면 OKLCH 값을 사용하세요.
Common Color 우주 탐험가 — OKLCH, OKLab, P3 등 use cases
Developer debugging
Use Color 우주 탐험가 — OKLCH, OKLab, P3 등 to quickly inspect generated output, API payloads, configuration values, or encoded data while building and debugging software.
Review before reuse
Validate or transform oklch, oklab, display-p3, color-space, wide-gamut, lch before adding the result to a project, document, form, message, or shared file.
Privacy-first browser processing
Run common oklch, oklab, display-p3, color-space, wide-gamut, lch tasks locally in the browser without sending sensitive development data to a backend service.
자주 묻는 질문
HSL에 비해 OKLCH의 장점은 무엇인가요?
OKLCH는(는) 지각적으로 균일합니다. 즉, 밝기, 채도 또는 색상의 동일한 변화가 시각적으로 동일한 변화를 생성한다는 의미입니다. HSL는 인지적으로 균일하지 않으므로 동일한 HSL 채도를 갖는 두 색상이 인지된 밝기에서 매우 다르게 나타날 수 있습니다.
브라우저가 실제로 Display P3 색상을 표시할 수 있나요?
예, 넓은 색역 디스플레이(대부분의 최신 Mac, iPhone 및 최신 모니터)의 최신 브라우저는 CSS color() 기능을 사용하여 Display P3 색상을 렌더링할 수 있습니다.
OKLab와 OKLCH는 무엇인가요?
OKLab는 L(밝기), a(녹색-빨간색 축), b(파란색-노란색 축) — 데카르트 모델을 사용합니다. OKLCH는 L(밝기), C(채도/채도), H(색조 각도) — 원통형 모델을 사용합니다. OKLCH는 색상을 선택하는 데 더 직관적입니다.