Tailwind Colour Reference
Interactive lookup of all Tailwind CSS colour names and hex values
Embed Tailwind Colour Reference ▾
Add this tool to your website or blog for free. Includes a small "Powered by ToolWard" bar. Pro users can remove branding.
<iframe src="https://toolward.com/tool/tailwind-colour-reference?embed=1" width="100%" height="500" frameborder="0" style="border:1px solid #e2e8f0;border-radius:12px"></iframe>
Community Tips 0 ▾
No tips yet. Be the first to share!
Compare with similar tools ▾
| Tool Name | Rating | Reviews | AI | Category |
|---|---|---|---|---|
| Tailwind Colour Reference Current | 4.7 | 2452 | - | Design & Creative |
| Reverse Black And White Colors | 3.8 | 1893 | - | Design & Creative |
| Design Brief Generator | 4.6 | 2152 | ✓ | Design & Creative |
| Logo Colour Extractor | 4.8 | 3576 | - | Design & Creative |
| Print Size Calculator | 4.4 | 1982 | - | Design & Creative |
| Colour Palette Generator | 4.8 | 1971 | - | Design & Creative |
About Tailwind Colour Reference
Your Complete Guide to Tailwind CSS Colours
Tailwind CSS comes with an extensive colour palette, but finding the exact shade you need across 22 colour families and 11 shade levels can be tedious. The Tailwind Colour Reference on ToolWard displays the full Tailwind CSS colour palette in a visual, searchable, and copyable format. Click any swatch to copy its hex value, class name, or RGB equivalent.
What the Tailwind Colour Reference Shows
Every colour from the default Tailwind palette is displayed as a swatch with its class name, hex value, and shade number. Colours are organised by family: slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, and rose. Each family shows shades from 50 (lightest) through 950 (darkest). You can search by name, hex, or approximate colour.
Why a Tailwind Colour Reference?
The official Tailwind documentation shows colours, but navigating it while coding means switching context. Having a dedicated Tailwind colour reference open in a tab lets you find and copy colour values without leaving your workflow. It is faster than searching through documentation and more reliable than memorising hex values. When you need to match a design comp to the nearest Tailwind shade, this visual grid makes the comparison instant.
Who Uses This Tool?
Tailwind CSS developers building utility-first interfaces. Designers working with developers who use Tailwind and need to specify exact shade names. Full-stack developers quickly referencing colours while writing templates. Students learning Tailwind and wanting a visual overview of what is available. Anyone who works with Tailwind regularly will find this reference faster than the docs.
Tips for Using Tailwind Colours
For text on white backgrounds, shades 600 to 900 provide good contrast. For backgrounds, 50 to 200 create subtle tints. For primary action buttons, 500 to 700 are commonly used. Pair colours from the same shade level across different families for a harmonious palette. The Tailwind Colour Reference makes these comparisons visual and immediate.
Browser-Based and Always Up to Date
The tool runs locally in your browser. No external calls, no tracking. Click to copy any value instantly. Bookmark this page and keep it open alongside your editor for instant Tailwind colour lookups.