Color Library
The HexTints color library is a set of 280+ reference pages, one per hex code, covering the complete Tailwind CSS default palette plus the CSS named colors and flat-UI staples that keep turning up in real projects. Each one answers the questions you would otherwise open three tools to answer — what this color is called, what it looks like lighter and darker, and whether text will be readable on it.
What each color page contains
Every page is built from the same template, so you always know where to look:
- Tints and shades — nine steps in each direction, from 10% to 90%, with copyable hex codes. The same math as the scale generator, precomputed.
- Color values — RGB, HSL, and HSV, plus the nearest CSS named color (and whether the hex is that named color exactly).
- WCAG contrast — the measured ratio against white and against black, with AA and AAA verdicts for normal and large text, so you can tell at a glance which text color the swatch takes.
- Related colors — neighbours in the same hue family, and for Tailwind colors the full 50–950 ramp of that family.
How the sections are organised
The grid below starts with popular colors — hand-picked hexes sorted by hue, with grays last. Below that, Tailwind CSS colors lays out all 22 families as rows of 11 steps each, from 50 through 950, in Tailwind's own order; if you know the utility class you want, find its family row and read across. Last come the Tailwind v1 classics, colors dropped from the modern palette that still appear in older codebases. Any square links to that color's full page.
Popular colors
Tailwind CSS colors
The complete Tailwind CSS default palette — 22 families, 11 steps from 50 to 950. Every square links to a full page with tints, shades, values, and contrast data for that exact hex.
Tailwind v1 classics
Colors from older Tailwind versions that still show up in real projects and searches.
Don't see your color here? The generator works with any hex code, and the hex to RGB converter handles quick format conversions.