Tailwind CSS 색상: v4 OKLCH 팔레트, 커스텀 색상과 단계

Tailwind 색상 팔레트의 구조

Tailwind v4.3의 기본 팔레트에는 이름이 붙은 스케일이 26개 있습니다. 유채색이 17개로 red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose입니다. 무채색 계열은 9개로, v3부터 있던 slate, gray, zinc, neutral, stone과 v4에서 추가된 mauve, olive, mist, taupe입니다. 여기에 black과 white가 더해집니다.

모든 스케일은 같은 11단계를 가집니다. 50, 100, 200부터 900까지, 그리고 950입니다. 50은 거의 흰색이고 950은 거의 검정입니다. 클래스는 유틸리티, 색상, 단계를 이어 붙인 형태입니다. bg-blue-500, text-rose-700, border-zinc-200처럼 씁니다.

단계 번호는 스케일 안에서의 위치일 뿐 명도 값이 아닙니다. 500 단계의 OKLCH 명도는 gray의 55.1%부터 yellow의 79.5%까지 차이가 납니다. 그래서 yellow-500과 blue-500은 텍스트 색으로 쓸 때 전혀 다르게 동작합니다.

Tailwind blue: 모든 단계의 OKLCH, HEX, 대비

Tailwind v4가 정의한 blue 스케일 전체입니다. HEX 열은 명도와 색조를 유지한 채 크로마를 낮춰 찾은 가장 가까운 sRGB 색입니다. 대비는 그 HEX 값으로 측정한 WCAG 2 대비율입니다.

본문 텍스트 기준 4.5:1을 흰색 위에서 처음 통과하는 단계는 blue-600입니다. blue-500은 검정 위에서는 5.58:1로 통과하지만 흰색 위에서는 3.76:1로 실패합니다. 양쪽 모두에서 4.5:1을 넘는 blue 단계는 없으므로 라이트 테마와 다크 테마에는 서로 다른 단계가 필요합니다.

흰색 배경에서 WCAG AA를 통과하는 Tailwind 단계

통과하는 가장 밝은 단계는 색조에 따라 다릅니다. orange, amber, yellow, lime과 green, teal, cyan, sky 계열은 500에서도 아직 밝아서 본문 텍스트에는 700이 필요합니다. red, blue, violet, purple, fuchsia, pink, rose는 600에서, indigo는 이미 500에서 통과합니다. 예외는 yellow입니다. yellow-600조차 2.93:1로 큰 텍스트 기준(3:1)도 넘지 못합니다.

단계 번호보다 명도가 결과를 더 잘 예측합니다. 286색 전체에서 OKLCH 명도가 58% 미만인 단계는 모두 흰색 위에서 4.5:1을 통과하고, 59.2%를 넘는 단계는 모두 실패합니다. 클래스 값의 L만 보면 테스트하기 전에 답을 알 수 있습니다.

무채색 계열은 olive를 제외하고 모두 500에서 통과합니다. olive-500은 명도 58%에 노란 기가 도는 색조라서 4.25:1에 그칩니다. 따라서 gray-500 텍스트와 olive-500 텍스트는 서로 바꿔 쓸 수 없습니다.

Tailwind v3와 v4 색상 비교

v3에서는 tailwind.config.js의 theme.extend.colors에 HEX 값으로 색을 정의했습니다. v4는 설정을 CSS로 옮겼습니다. 색상은 @theme 안의 테마 변수로 OKLCH 값을 쓰고 CSS 변수로 노출되므로, 일반 CSS나 인라인 스타일에서도 var(--color-blue-500)을 쓸 수 있습니다.

팔레트는 새로 그린 것이 아니라 다시 조정한 것입니다. OKLCH로 변환해 보면 v3 blue-500(#3b82f6)은 v4 blue-500과 명도와 색조가 정확히 같습니다. 크로마만 0.188에서 0.214로 올라갔습니다. blue 스케일의 나머지도 같은 패턴이며, blue-400만 0.7포인트 더 어두워졌습니다. 대비는 거의 그대로인데 색은 더 선명해 보입니다.

늘어난 크로마는 sRGB 바깥까지 닿습니다. v4의 286색 중 94색이 sRGB 밖, Display P3 안에 있으며 모두 유채색입니다. orange는 11단계 중 9단계가, blue는 200부터 500까지 4단계가 밖에 있습니다. P3 화면에서는 원래 색이 그대로 보이고, sRGB 화면에서는 브라우저가 가까운 색으로 표시합니다. v4는 Safari 16.4, Chrome 111, Firefox 128 이상을 대상으로 하며, 이 브라우저들은 모두 oklch()를 지원합니다.

@theme {
    --color-blue-500: oklch(62.3% 0.214 259.815);
}

.card {
    border-color: var(--color-blue-500);
}

Tailwind v4에서 커스텀 색상을 추가하는 방법

@theme 안에 --color- 네임스페이스로 변수를 선언하세요. --color- 뒤의 부분이 클래스 이름이 됩니다. --color-brand를 선언하면 bg-brand, text-brand, border-brand, ring-brand를 비롯한 모든 색상 유틸리티와 CSS의 var(--color-brand)를 쓸 수 있습니다. HEX, rgb(), hsl(), oklch() 모두 사용할 수 있습니다.

기본 팔레트를 확장하지 않고 교체하려면 먼저 --color-*: initial로 네임스페이스를 초기화한 뒤 원하는 색만 정의하세요. 유틸리티는 실제로 사용한 클래스만 생성되므로 대부분의 프로젝트는 기본값을 그대로 둡니다.

@import 'tailwindcss';

@theme {
    --color-brand: #e4572e;
    --color-ink: oklch(21% 0.02 260);
}

강조 색이 하나뿐이라면 --color-brand 하나로 충분합니다. 호버 상태, 옅은 배경, 다크 모드가 필요해지는 순간 번호가 붙은 단계로 전체 스케일을 정의하세요.

50~950 커스텀 스케일 전체를 만드는 방법

아래 스케일은 #e4572e에서 생성했습니다. 이 색의 명도 63.7%가 500 단계와 일치하므로 브랜드 색은 정확히 500에 놓입니다. 나머지 단계는 Tailwind의 명도 곡선을 따르고, 색조는 그대로 유지하며, 크로마는 500과 600에서 가장 높고 양 끝으로 갈수록 줄어듭니다. 모든 단계가 sRGB 안에 들어가므로 HEX 값도 정확합니다.

Tailwind 자체의 따뜻한 색조와 마찬가지로, 이 스케일도 흰색 위 본문 텍스트에는 600이 필요합니다. brand-500은 3.68:1로, 큰 텍스트와 아이콘에만 충분합니다.

@theme {
    --color-brand-50: oklch(97% 0.01103 36.478);
    --color-brand-100: oklch(93.477% 0.02574 36.478);
    --color-brand-200: oklch(88.485% 0.04964 36.478);
    --color-brand-300: oklch(81.145% 0.08641 36.478);
    --color-brand-400: oklch(71.064% 0.14524 36.478);
    --color-brand-500: oklch(63.723% 0.18385 36.478);
    --color-brand-600: oklch(56.583% 0.19167 36.478);
    --color-brand-700: oklch(49.952% 0.16921 36.478);
    --color-brand-800: oklch(43.729% 0.14814 36.478);
    --color-brand-900: oklch(38.935% 0.11766 36.478);
    --color-brand-950: oklch(27% 0.07538 36.478);
}

붙여 넣을 때는 정밀도를 그대로 유지하세요. 명도를 0.1% 단위로, 크로마를 소수점 셋째 자리로 반올림하면 brand-600이 sRGB 밖으로 살짝 벗어납니다. 문제가 되지는 않지만 HEX 값과 정확히 일치하지 않게 됩니다.

bg-blue-500/50 같은 불투명도 수식어의 동작 원리

색상 뒤에 슬래시를 붙이면 알파 값이 정해집니다. bg-blue-500/50은 불투명도 50%의 blue-500입니다. v3는 이를 rgb(59 130 246 / 0.5)로 컴파일했기 때문에 Tailwind가 채널로 나눌 수 있는 색에서만 동작했습니다. CSS 변수로 정의한 커스텀 색상에는 rgb(var(--brand) / <alpha-value>)라는 특별한 형식이 필요했습니다.

v4는 수식어를 Oklab 기준의 color-mix()로 컴파일해 색을 transparent와 섞습니다. 그래서 테마 변수, bg-[#e4572e]/50 같은 임의 값, 직접 만든 CSS 변수까지 어떤 색에서든 동작합니다.

불투명도는 대비를 바꿉니다. 흰색 위에서 blue-500/50은 #95bfff로, blue-500/10은 #eaf2ff로 표시됩니다. blue-600 텍스트는 5.25:1로 읽히지만 text-blue-600/60은 2.62:1로 떨어져 큰 텍스트 기준도 통과하지 못합니다.

• blue-500#2b7fff
• 흰색 위 blue-500/50#95bfff
• 흰색 위 blue-500/20#d5e5ff
• 흰색 위 blue-500/10#eaf2ff

.bg-blue-500\/50 {
    background-color: color-mix(in oklab, var(--color-blue-500) 50%, transparent);
}

HEX 코드에 가장 가까운 Tailwind 클래스 찾기

HEX 값을 286개 단계 전체와 Oklab 지각 거리(ΔEOK)로 비교하세요. 약 0.02 미만이면 나란히 놓아도 차이가 잘 보이지 않으므로 Tailwind 클래스로 대신해도 됩니다. 약 0.04를 넘으면 커스텀 색상을 추가하는 편이 낫습니다.

표는 실제 매칭 결과입니다. 예전 v3 HEX 값은 같은 v4 클래스로 돌아가지만, #ff5733 같은 흔한 브랜드 주황은 orange-600과 red-400 사이에 걸칩니다. PickShade의 Tailwind 페이지는 어떤 색이든 이렇게 찾아서 가장 가까운 클래스 세 개를 보여 줍니다.

자주 묻는 질문