Utilities

Tailwind colour picker

Browse the full Tailwind palette. Click any colour to copy HEX, RGB, or the class name.

Choose format, then click any colour to copy.

slate

gray

zinc

neutral

stone

red

orange

amber

yellow

lime

green

emerald

teal

cyan

sky

blue

indigo

violet

purple

fuchsia

pink

rose

Advertisement

100% private. All processing happens locally in your browser — no files or data are ever sent to a server.

How to use Tailwind colour picker

  1. 01 Enter or select your colour using the controls above
  2. 02 Results update in real time — no button press needed
  3. 03 Use the Copy button to copy values to your clipboard

Frequently asked questions

Common questions about Tailwind colour picker.

Is Tailwind colour picker free to use?
Yes, Tailwind colour picker is completely free. No account, subscription, or payment is ever required — just open the page and start using it.
Does Tailwind colour picker upload my data to a server?
No. Tailwind colour picker runs entirely in your web browser using client-side JavaScript. Your files, text, and data never leave your device, making it 100% private.
Can I use Tailwind colour picker on my phone or tablet?
Yes. Tailwind colour picker is fully responsive and works on all modern smartphones, tablets, and desktop browsers without installing any app.
Does Tailwind colour picker work without an internet connection?
Yes. Once the page has loaded, Tailwind colour picker works fully offline — all colour processing is done locally in your browser.

Advertisement

More Utilities tools

About Tailwind colour picker

Tailwind CSS ships with a carefully designed colour palette spanning 22 families and 11 shades each — from 50 (lightest) to 950 (darkest). Finding the right shade for a design often means jumping between docs and code. The Tailwind Colour Picker displays the entire default palette in one view: red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose, slate, gray, zinc, neutral, and stone. Click any swatch to copy its HEX value, RGB value, or Tailwind class name (e.g. bg-sky-500).

Advertisement