Tailwind 색상 팔레트

v4입니다 — 값은 v4 자신의 기본 테마에서 가져왔습니다. v3.4 기본값은 같지 않았고 242개 중 187개가 다르며, 눈에 보이는 차이도 있습니다(green-400은 #4ade80에서 #05df72로). v4는 oklch로 선언하므로 여기 HEX는 sRGB 변환값이고, 광색역 화면이 아니라면 브라우저가 칠하는 색과 같습니다. 직접 테마에서 색을 덮어썼다면 프로젝트 팔레트는 둘 다와 다릅니다.

Tailwind는 slate·gray·zinc·neutral·stone 5가지 중성 색상 — 약간 다른 underton: slate는 차가운 청색 기울임·gray는 중성·zinc는 더 차갑고 강철 같음·neutral은 순수 중성·stone은 따뜻한 토프. 액센트와 가장 잘 어울리는 것 선택.

Tailwind가 v3.3에서 기존 50~900 사다리에 더 어두운 950 단계 추가. 색상의 희미한 힌트가 있는 거의 검정 — 깊은 다크 모드 배경·매우 미묘한 테두리에 유용.

실무에서 흔히 쓰는 규칙은 두 단계가 대략 500쯤 벌어져야 안전하게 읽힌다는 것이다. 100 배경에 700 글자, 또는 800 위에 50 같은 식이다. 인접한 단계는 본문 글자에 필요한 대비를 결코 만들지 못한다. 다만 이건 출발점이지 보장은 아니다. 같은 숫자 차이라도 색상이 다르면 대비가 달라지므로, 산술을 믿지 말고 실제 조합을 확인하라.

이미 잘 도는 팔레트 옆에 브랜드 색 하나가 필요하면 확장하고, 브랜드에 자체 스케일이 있다면 교체하라. 두 체계를 섞으면 비슷한 듯 미묘하게 다른 이웃 단계들이 생긴다. 어느 쪽이든 색 하나가 아니라 전 범위를 만들어라. 브랜드 hex 하나만 있으면 나머지 인터페이스가 의존하는 밝은 배경 쪽과 어두운 글자 쪽 끝이 없는 셈이다.