Searchlight
Tools
BlogAbout
Free SEO Audit
Back to home
๐Ÿ“ˆSEO & Analytics
๐Ÿ—‚๏ธText & Data
๐Ÿ”Encoders & Decoders
โšกGenerators
๐Ÿ”„Converters
๐Ÿ–ผ๏ธImage Tools
๐Ÿ“„PDF Tools
๐Ÿ’ปCode Tools
๐Ÿ”Regex & Parsing
๐ŸงฎCalculators
๐Ÿ—บ๏ธDiagrams
๐ŸŒNetwork & Web
โœ๏ธText Utilities
๐ŸŽจColor Tools
Color PickerImage PaletteContrast CheckerColour Blindness Sim.Tailwind Colors
๐Ÿ”€Diff & Compare
148+ tools. OAuth is read-only.
Searchlight

148+ free SEO, developer, image, PDF, and productivity tools - no account needed.

Free ยท all tools included
Company
  • Blog
  • About
  • Free SEO Audit
Legal
  • Privacy Policy
  • Terms of Service
  • Cookie Policy

ยฉ 2026 Searchlight. All rights reserved.

Read-only OAuth ยท No data reselling ยท Completely free

Tailwind CSS Colors

Full Tailwind CSS v3 color palette - all 22 color families, 11 shades each. Click to copy.

slate
gray
zinc
neutral
stone
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose

About this tool

Browse and copy the complete Tailwind CSS colour palette - all 22 colour scales (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose) with all 11 shades (50โ€“950). Click any swatch to copy the class name, HEX, RGB, or CSS variable.

How to Use the Tailwind Color Reference

  1. 1Browse the colour grid organised by hue and shade.
  2. 2Click any swatch to copy the utility class name (e.g. bg-blue-500).
  3. 3Toggle to copy the HEX, RGB, or oklch value instead.
  4. 4Use the search to jump to a specific colour name.
  5. 5Compare shades side by side to choose the right contrast level.

Frequently Asked Questions

How do I use Tailwind CSS colours in my project?+
Use colour utility classes directly in your HTML: text-blue-500, bg-indigo-600, border-gray-200. Each colour has 11 shades from 50 (lightest) to 950 (darkest). The 500 shade is the base colour.
What is the difference between gray, slate, zinc, neutral, and stone?+
All are cool-to-warm grey scales with different undertones. Slate has blue undertones, zinc is neutral-cool, gray is slightly warm, neutral is balanced, stone has warm/brown undertones. Use the one that best matches your brand.
Can I customise Tailwind colours?+
Yes. Add custom colours to tailwind.config.js under theme.extend.colors. You can add entirely new colours or override existing ones. Use CSS variables for dynamic theming with dark mode support.
What is the Tailwind CSS oklch colour system in v4?+
Tailwind CSS v4 switches to OKLCH colour values for better perceptual uniformity and P3 colour gamut support. OKLCH ensures consistent contrast ratios across the palette and enables wider colour gamut on modern displays.
Looking for a deeper guide on this topic? Browse the Searchlight blog.
Visit the blog โ†’

Related tools

View all Color Tools โ†’
Color PickerVisual color picker with format outputImage PaletteExtract colour palette from any imageContrast CheckerWCAG AA/AAA contrast ratio checkerColour Blindness Sim.Simulate different types of colour blindness