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
- 01 Enter or select your colour using the controls above
- 02 Results update in real time — no button press needed
- 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?
Does Tailwind colour picker upload my data to a server?
Can I use Tailwind colour picker on my phone or tablet?
Does Tailwind colour picker work without an internet connection?
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