browserutils

Tailwind Color Picker

Browse and pick Tailwind CSS colors

Tailwind Color Picker is a free online tool from BrowserUtils that browse and pick tailwind css colors. It runs entirely in your browser — your data never leaves your device. No account required.

50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950
50
100
200
300
400
500
600
700
800
900
950

How to use Tailwind Color Picker

  1. 1 Paste or type your input into the editor above.
  2. 2 The tool processes your data instantly — right in your browser, with nothing sent to a server.
  3. 3 Copy the result with one click or continue editing your input.

About Tailwind Color Picker

Free online Tailwind CSS color picker. Browse the full Tailwind v3 color palette, copy HEX values and class names instantly. This tool runs entirely in your browser — your data is never sent to a server. Just paste your input, get instant results, and copy with one click. No sign-up or installation required.

Tailwind Color Picker specs

Runtime
100% client-side (browser)
Built on
CSS Color Module Level 4 conversions (sRGB, OKLCH, OKLAB) and native CSSOM parsing
Cost
Free — no account, no rate limits, no usage caps
Browser support
Chrome 90+, Firefox 88+, Safari 14+, Edge 90+
Part of
299 developer tools on BrowserUtils (100% client-side)

Questions

What colors are included?
This tool includes the complete Tailwind CSS v3 color palette with all shades from 50 to 950 for every color family.
Can I copy the Tailwind class name?
Yes, clicking any color swatch copies both the HEX value and the corresponding Tailwind class name like bg-blue-500.
How do I find the closest Tailwind color to a specific HEX value?
Browse the color families and shades to find the nearest match visually. Each swatch shows its HEX value so you can compare it to your target color.
Does the Tailwind color picker include Tailwind v4 colors?
The picker currently includes the Tailwind v3 palette. Tailwind v4 uses the same default color families, so the values remain applicable across versions.
Embed this tool

Copy this code to embed the tool on your website. Adjust the height to fit your layout.

<iframe src="https://www.browserutils.dev/embed/tailwind-color-picker" width="100%" height="500" frameborder="0" title="Tailwind Color Picker"></iframe>

Related tools

Color Converter
Convert between HEX, RGB, and HSL color formats
Color Palette Generator
Generate harmonious color palettes from any base color
Color Contrast Checker
Check WCAG contrast ratios between two colors

More CSS & Design

Color ConverterCSS Gradient GeneratorBox Shadow GeneratorPX to REM ConverterColor Palette GeneratorColor Contrast CheckerCSS Animation GeneratorCSS Flexbox Generator
View all CSS & Design tools