Tailwind Color Palette Converter
Reference common Tailwind-style palette stops and convert them into HEX and RGB values for CSS and design docs.
Color Reference
Blue 50
#EFF6FF
rgb(239, 246, 255)
Tinted surfaces and subtle active states.
Blue 600
#2563EB
rgb(37, 99, 235)
Primary buttons and links.
Slate 900
#0F172A
rgb(15, 23, 42)
Strong text and dark surfaces.
Emerald 600
#059669
rgb(5, 150, 105)
Positive actions and success status.
Amber 600
#D97706
rgb(217, 119, 6)
Warnings and attention states.
Rose 600
#E11D48
rgb(225, 29, 72)
Errors and destructive highlights.
How to document palette stops
When handing off Tailwind-style palettes, include the class-like stop name, HEX value, RGB value, and intended role. That prevents a color scale from becoming an unstructured grab bag.
FAQ
How should I use this Tailwind palette reference? v
Use it as a starting point, then test the exact foreground, background, and UI state colors in the context where they will appear.
Are the HEX values ready to copy? v
Yes. The listed values are formatted for CSS, design files, and token documentation.
Should I still check contrast? v
Yes. Any color used for text, icons, controls, or status messages should be checked against its actual background.
Related Color Tools
Open the next tool for this color task.
Color Palette Tools - Generators & Guides
tool-hubPalette generators, extractors, and practical color combination guides.
CSS Color Tools - Gradients, Mixers & OKLCH
tool-hubTools for CSS gradients, color mixing, named colors, and modern color formats.
Hex to RGB Converter - Free Online Tool
converterTurn HEX colors into RGB values for CSS and design tools.
Color Palette Generator - Create Harmonic Palettes
generatorGenerate matching color palettes from one base color.