Tailwind Color Picker

Browse a curated v4 sRGB reference, find nearest OKLab matches and check WCAG text contrast.

tailwind-color-pickerLOCAL WORKSPACE

Enabling local controls…

Tailwind v4 workbench

Preview uses native CSS, not a Tailwind runtime. Every change updates the result locally. Text and settings stay in page memory.

Accent color (hex)

Filter palette by name

Limits: 16,000 UTF-8 bytes per text area, 1,000 classes, 24 layout items, 8 cards/shadow layers, 20 × 12 table cells. No input HTML, scripts, URLs or commands execute.

Converters use common documented rules. Arbitrary values and modifier characters are preserved, but unknown tokens are marked unsupported. Real cascade, custom themes and plugins require a Tailwind build.

References checked: 2026-10-21 · Theme · Responsive design · v4 upgrade guide · Colors

Preview & output

Result updated locally. Review before using in your project.

Sample text with the stronger contrast

Review notes

Classes are independent alternatives: choose the background, text or border utility you need.
White text: 5.17:1 · AA pass, large AA pass, AAA fail. Black text: 4.06:1 · AA fail, large AA pass, AAA fail.
288 default v4.3 color tokens, converted from official OKLCH to clipped sRGB previews. Nearest match uses Euclidean OKLab distance; display gamut and theme overrides can differ.

Mappings / reference (5)

Current settings: utility mappings and values
Nearest utility	sRGB hex	OKLab distance
`blue-600`	`#155dfc`	`0.03033`
`blue-700`	`#1447e6`	`0.06503`
`indigo-500`	`#615fff`	`0.06815`
`blue-500`	`#2b7fff`	`0.07429`
`indigo-600`	`#4f39f6`	`0.08271`

Classes

Preview: first 32,000 characters. Copy, download and expanded text retain all content. Select complete text if copying fails.

bg-blue-600
text-blue-600
border-blue-600

Expand complete selectable text

bg-blue-600
text-blue-600
border-blue-600

HTML

Preview: first 32,000 characters. Copy, download and expanded text retain all content. Select complete text if copying fails.

<div>Sample text with the stronger contrast</div>

Expand complete selectable text

<div>Sample text with the stronger contrast</div>

How to use this tool

Edit the labelled controls to update a native CSS preview and copy or download Tailwind v4 output. Examples and reset stay in page memory.

When not to use it

No Tailwind runtime or full compiler. Converters support a documented common subset and list unknown utilities. Class conflicts and dark colors are suggestions requiring review in your built project. Input 16,000 UTF-8 bytes, 1,000 classes; no scripts or input HTML execute.