Tailwind CSS v4의 기본 색상 시스템인 OKLCH의 원리, 장점, 색상 팔레트 설계 방법, 그리고 투명도 수정자와 색상 조합 패턴을 실전 중심으로 다룹니다.
3장에서 레이어 시스템과 임포트 구조를 배웠습니다. 이 장에서는 Tailwind CSS v4가 기본 색상 시스템으로 채택한 OKLCH를 심층 분석합니다. OKLCH가 기존 RGB/HSL보다 우월한 이유, 색상 팔레트를 체계적으로 설계하는 방법, 그리고 Tailwind의 색상 유틸리티와의 결합 패턴을 다룹니다.
웹에서 가장 오래 사용된 색상 공간인 RGB는 기계 친화적이지만 인간의 색 인지와 거리가 멉니다. HSL은 이를 개선하려 했지만, 근본적인 문제가 남아 있습니다.
/* 같은 saturation(100%)과 lightness(50%)인데 체감 밝기가 다름 */
.yellow { color: hsl(60, 100%, 50%); } /* 매우 밝게 느껴짐 */
.blue { color: hsl(240, 100%, 50%); } /* 매우 어둡게 느껴짐 */HSL에서 같은 L 값이라도 색상(Hue)에 따라 인지되는 밝기가 크게 달라집니다. 이를 밝기 불균일성(Lightness Non-uniformity) 이라 하며, 일관된 색상 팔레트를 만들기 어렵게 만드는 주요 원인입니다.
OKLCH는 Oklab 색 공간의 원통 좌표계(Cylindrical) 표현입니다. Bjorn Ottosson이 2020년에 발표한 이 색 공간은 지각적 균일성(Perceptual Uniformity) 을 핵심 목표로 설계되었습니다.
OKLCH(L, C, H)
L: Lightness (밝기) — 0 (검정) ~ 1 (흰색)
C: Chroma (채도) — 0 (무채색) ~ 0.37+ (최대 채도)
H: Hue (색상) — 0 ~ 360 (각도)
/* HSL: 같은 S, L이지만 체감 밝기가 다름 */
.hsl-yellow { background: hsl(60, 100%, 50%); }
.hsl-blue { background: hsl(240, 100%, 50%); }
/* OKLCH: 같은 L이면 정말로 같은 밝기로 인지됨 */
.oklch-yellow { background: oklch(0.8 0.2 90); }
.oklch-blue { background: oklch(0.8 0.2 260); }
/* 두 색상이 같은 밝기로 느껴짐 */Tailwind v4는 모든 기본 색상을 OKLCH로 재정의했습니다. 기존의 hex 값 기반 팔레트가 OKLCH 기반으로 교체되었습니다.
@theme {
--color-blue-50: oklch(0.97 0.014 254.6);
--color-blue-100: oklch(0.932 0.032 255.585);
--color-blue-200: oklch(0.882 0.059 254.128);
--color-blue-300: oklch(0.809 0.105 251.813);
--color-blue-400: oklch(0.707 0.165 254.624);
--color-blue-500: oklch(0.623 0.214 259.815);
--color-blue-600: oklch(0.546 0.245 262.881);
--color-blue-700: oklch(0.488 0.243 264.376);
--color-blue-800: oklch(0.424 0.199 265.638);
--color-blue-900: oklch(0.379 0.146 265.522);
--color-blue-950: oklch(0.282 0.091 267.935);
}OKLCH 기반 팔레트는 다음 원칙을 따릅니다.
하나의 기본 색상에서 전체 팔레트를 생성하는 접근법입니다.
@theme {
/* 기본 색상: brand blue */
--color-brand-50: oklch(0.97 0.01 250);
--color-brand-100: oklch(0.93 0.03 250);
--color-brand-200: oklch(0.88 0.06 250);
--color-brand-300: oklch(0.80 0.11 250);
--color-brand-400: oklch(0.70 0.17 250);
--color-brand-500: oklch(0.60 0.22 250); /* 기준점 */
--color-brand-600: oklch(0.53 0.24 252);
--color-brand-700: oklch(0.46 0.22 254);
--color-brand-800: oklch(0.39 0.18 256);
--color-brand-900: oklch(0.33 0.13 258);
--color-brand-950: oklch(0.25 0.08 260);
}OKLCH 팔레트 설계 시 유용한 규칙:
oklch.com 같은 도구를 활용하면 색상을 시각적으로 확인하며 조정할 수 있습니다.
원시 팔레트 위에 의미론적 계층을 구축합니다.
@theme {
/* 원시 팔레트 */
--color-blue-500: oklch(0.62 0.21 260);
--color-blue-600: oklch(0.55 0.23 262);
--color-green-500: oklch(0.72 0.19 150);
--color-amber-500: oklch(0.77 0.17 75);
--color-red-500: oklch(0.64 0.24 25);
--color-red-600: oklch(0.57 0.25 25);
/* 의미론적 매핑 */
--color-primary: var(--color-blue-500);
--color-primary-hover: var(--color-blue-600);
--color-success: var(--color-green-500);
--color-warning: var(--color-amber-500);
--color-danger: var(--color-red-500);
--color-danger-hover: var(--color-red-600);
}Tailwind v4에서 색상에 투명도를 적용하는 방법은 / 수정자입니다.
<!-- 배경에 50% 투명도 -->
<div class="bg-primary/50"></div>
<!-- 텍스트에 70% 투명도 -->
<p class="text-foreground/70"></p>
<!-- 테두리에 20% 투명도 -->
<div class="border border-primary/20"></div>
<!-- 그라데이션에서 투명도 -->
<div class="bg-gradient-to-r from-primary/80 to-primary/20"></div>OKLCH에서 투명도는 네 번째 값으로 표현됩니다.
/* bg-primary/50이 생성하는 CSS */
background-color: oklch(0.62 0.21 260 / 0.5);투명도를 활용하면 적은 수의 기본 색상으로 풍부한 색상 변형을 만들 수 있습니다.
<!-- 하나의 색상으로 다양한 표현 -->
<div class="bg-primary text-white">강한 강조</div>
<div class="bg-primary/10 text-primary">약한 강조 배경</div>
<div class="border border-primary/30">테두리만</div>
<div class="text-primary/60">보조 텍스트</div>OKLCH의 또 다른 장점은 광색역(Wide Gamut) 지원입니다. sRGB 범위를 넘어서는 P3 색 공간의 색상을 표현할 수 있습니다.
@theme {
/* sRGB 범위 내 */
--color-blue-vivid: oklch(0.55 0.22 260);
/* P3 범위 (더 높은 채도) */
--color-blue-ultra: oklch(0.55 0.30 260);
}P3 광색역을 지원하는 디스플레이(최신 MacBook, iPhone, iPad 등)에서는 sRGB보다 더 선명한 색상이 표시됩니다. 지원하지 않는 디스플레이에서는 가장 가까운 sRGB 색상으로 자동 폴백됩니다. OKLCH를 사용하면 이 과정이 브라우저에 의해 자동으로 처리됩니다.
OKLCH의 체계적인 구조는 다크 모드 색상 설계를 크게 단순화합니다.
@theme {
/* 라이트 모드 기본값 */
--color-surface: oklch(0.99 0 0);
--color-surface-alt: oklch(0.96 0 0);
--color-foreground: oklch(0.15 0 0);
--color-foreground-muted: oklch(0.40 0 0);
--color-border: oklch(0.90 0 0);
}
/* 다크 모드 오버라이드 */
@media (prefers-color-scheme: dark) {
@theme {
--color-surface: oklch(0.15 0 0);
--color-surface-alt: oklch(0.20 0 0);
--color-foreground: oklch(0.93 0 0);
--color-foreground-muted: oklch(0.65 0 0);
--color-border: oklch(0.30 0 0);
}
}OKLCH에서는 밝기(L) 값을 반전시키는 것만으로 다크 모드 색상을 체계적으로 생성할 수 있습니다. 라이트 모드에서 L: 0.97이었다면 다크 모드에서는 L: 0.15로, L: 0.15는 L: 0.93으로 대응시킵니다.
OKLCH에서의 그라데이션은 HSL보다 더 자연스럽습니다. HSL에서 보라색과 녹색 사이 그라데이션은 회색 지대를 지나가지만, OKLCH에서는 지각적으로 균일한 경로를 따릅니다.
<!-- 자연스러운 색상 전환 -->
<div class="bg-gradient-to-r from-blue-500 to-green-500"></div>
<!-- 투명도 그라데이션 -->
<div class="bg-gradient-to-b from-primary to-primary/0"></div>
<!-- 다중 색상 그라데이션 -->
<div class="bg-gradient-to-r from-red-500 via-purple-500 to-blue-500"></div>@import "tailwindcss";
@theme {
/* === 기본 팔레트 초기화 === */
--color-*: initial;
/* === 중성 색상 === */
--color-neutral-50: oklch(0.985 0.002 250);
--color-neutral-100: oklch(0.97 0.004 250);
--color-neutral-200: oklch(0.92 0.006 250);
--color-neutral-300: oklch(0.87 0.008 250);
--color-neutral-400: oklch(0.71 0.010 250);
--color-neutral-500: oklch(0.55 0.012 250);
--color-neutral-600: oklch(0.45 0.012 250);
--color-neutral-700: oklch(0.37 0.010 250);
--color-neutral-800: oklch(0.27 0.008 250);
--color-neutral-900: oklch(0.21 0.006 250);
--color-neutral-950: oklch(0.13 0.004 250);
/* === 브랜드 색상 === */
--color-primary: oklch(0.60 0.22 250);
--color-primary-hover: oklch(0.53 0.24 252);
--color-primary-foreground: white;
/* === 기능 색상 === */
--color-success: oklch(0.65 0.19 150);
--color-warning: oklch(0.80 0.15 80);
--color-error: oklch(0.58 0.24 25);
--color-info: oklch(0.65 0.18 230);
/* === 표면 색상 === */
--color-background: var(--color-neutral-50);
--color-surface: white;
--color-foreground: var(--color-neutral-900);
--color-muted: var(--color-neutral-500);
--color-border: var(--color-neutral-200);
}OKLCH는 단순한 색상 표기법의 변경이 아닌, 색상 설계 방법론의 진화입니다. 지각적 균일성, 광색역 지원, 체계적인 팔레트 생성 — 이 모든 장점이 Tailwind v4의 색상 시스템을 더욱 강력하고 일관되게 만듭니다. 투명도 수정자와 결합하면 적은 수의 기본 색상으로도 풍부한 UI 표현이 가능합니다.
다음 장에서는 Tailwind v4의 컨테이너 쿼리 지원과 반응형 디자인의 진화를 다룹니다. 기존 미디어 쿼리 기반 반응형에서 컨테이너 기반 반응형으로의 패러다임 전환을 살펴봅니다.
이 글이 도움이 되셨나요?
관련 주제 더 보기
Tailwind CSS v4의 네이티브 컨테이너 쿼리 지원, @container 변형, 기존 미디어 쿼리와의 비교, 그리고 컴포넌트 기반 반응형 디자인 패턴을 다룹니다.
Tailwind CSS v4의 임포트 방식, CSS 레이어 시스템, @utility로 커스텀 유틸리티 정의하기, 그리고 스타일 우선순위 관리 전략을 다룹니다.
Tailwind CSS v4에서 추가, 변경, 제거된 유틸리티 클래스와 변형(Variants)을 종합 정리하고, 실전 활용 패턴을 다룹니다.