·1분 읽기
OKLCH·P3 색 공간 — 2026년 웹 디자인 최신 컬러 표준 정리
HEX·RGB 시대는 저물고 OKLCH·P3가 주류로 올라왔어요. 최신 iPhone·Mac 스크린에서 제대로 보이는 색 고르는 법, Tailwind 4 OKLCH 전환까지 정리했어요.
🎨
색상 변환기 바로 사용하기
HEX, RGB, HSL 색상 코드를 실시간 변환
→
왜 HEX·RGB가 구식이 됐을까요
HEX·sRGB는 1996년 기준 표준이에요. 2026년 iPhone·Mac·삼성 Galaxy 화면은 **Display P3** 색 공간을 지원해요. sRGB 색은 P3 화면에서 덜 생생하게 보여요.
또 HEX는 **인지적 균일성**이 없어요. `#ff0000` → `#ff8800` 변화가 수학적으론 같은 거리지만 사람 눈엔 다르게 보여요. 테마 색 자동 생성·팔레트 설계에 치명적이에요.
OKLCH가 뭐가 다른가요
OKLCH는 **L(명도)·C(채도)·H(색상)** 3개 축으로 색을 표현해요. `oklch(70% 0.2 150)` 같은 식이에요.
장점 3가지
- **인지적 균일**: L값 +10%가 눈에도 균일하게 밝아 보여요
- **P3 색역 지원**: sRGB 초과 채도 표현 가능
- **테마 생성 자동화**: H값만 바꾸면 일관된 톤 팔레트 완성
이 장점들 때문에 **Tailwind 4는 전 색 시스템을 OKLCH로 재설계**했어요.
Tailwind 4로 OKLCH 전환 3단계
```css
/* Tailwind 4 기본 */
@theme {
--color-brand-500: oklch(70% 0.2 240);
--color-brand-700: oklch(50% 0.2 240);
}
```
같은 색상(H)을 유지하면서 명도(L)만 조정하면 자동으로 조화로운 팔레트가 만들어져요. 수동으로 HEX 10개 뽑던 과거에 비해 10배 빨라요.
Toolkio Color Converter로 P3 색 고르기
Toolkio Color Converter에 HEX 입력하면 **OKLCH·P3·RGB** 동시 변환돼요. P3 색역을 초과하는 색도 경고 표시해요.
디자이너가 Figma에서 P3 색을 선택했을 때, 개발자는 이 도구로 CSS 코드 바로 추출 가능해요. 협업 시간 30% 단축돼요.