Color Chart
tailwindcss
package, not retyped by hand.
Press / to search · Tab moves between swatches · Enter copies · click any swatch to open its details · of 26 families match
Tailwind CSS Color Chart
26 color families, 11 shades each (50–950). Click any swatch to copy its hex code and open its details — RGB, HSL, utility classes, accessibility, and family export.
Shade
50
100
200
300
400
500
600
700
800
900
950
slate
gray
zinc
neutral
stone
mauve
olive
mist
taupe
red
orange
amber
yellow
lime
green
emerald
teal
cyan
sky
blue
indigo
violet
purple
fuchsia
pink
rose
Web Safe Color Chart
The classic 216 web-safe colors — every combination where each RGB channel is a multiple of 51 (00, 33, 66, 99, CC, FF), guaranteed to render identically on old 256-color displays.
Copies all 11 shades of the family in the chosen format, straight from the Tailwind palette.
Which shade should you use?
The 50–950 numbers are a lightness scale: 50 is the lightest tint, 950 is nearly black, and the hue stays the same across the row. These roles are conventions — the patterns Tailwind’s own documentation and most design systems built on it follow — not rules.
| Shade | Typical role |
|---|---|
| 50 | Page tints and subtle section backgrounds |
| 100 | Card backgrounds, hover states on white |
| 200 | Dividers and secondary borders |
| 300 | Input borders, disabled control fills |
| 400 | Placeholder text and secondary icons |
| 500 | The brand shade — buttons, links, accents |
| 600 | Button hover and active states, link text |
| 700 | Body text in the family’s hue on light backgrounds |
| 800 | Headings and emphasized text |
| 900 | Highest-contrast text, dark UI surfaces |
| 950 | Near-black backgrounds for dark mode |
One accessibility caveat worth knowing: the 400 and 500 shades of most families fail WCAG AA as text on white. Click any swatch above to see its white-text and black-text ratings instantly, or open it in the contrast checker for the full report.
Frequently asked questions
Yes — these are read directly from the Tailwind CSS package's own color definitions, not retyped by hand, so they match whatever version of the default palette is currently installed.
They are a lightness scale within one hue: 50 is the palest tint and 950 is nearly black. Lower numbers suit backgrounds, middle numbers suit brand elements like buttons, and higher numbers suit text — the table above breaks down the typical role of each step.
Combine a property prefix with the family and shade — bg-blue-500 for a background, text-blue-500 for text, border-blue-500 for a border, ring-blue-500 for a focus ring. Clicking any swatch in the chart opens a panel with these four classes ready to copy.
Not for technical necessity — virtually every display today supports millions of colors. They're mostly useful now as a deliberately constrained, retro-styled palette, or for historical/nostalgia design work.
Related tools
CSS Color Names
Browse and search all 148 standard CSS/HTML color names, grouped by family, with hex codes and links to full conversions.
Try it → ColorsHEX to RGB Converter
Convert any HEX color code to its RGB and HSL equivalents, live, with copy-to-clipboard values.
Try it → AccessibilityContrast Checker
Check the WCAG contrast ratio between any two colors, live, with AA/AAA pass-fail results.
Try it →Ready to find your perfect palette?
Start from any color and let real color theory do the rest — or warm up with today's puzzle.