Browse and copy Tailwind CSS color classes with visual swatches and HEX/RGB value references.
Tailwind CSS does not use arbitrary color names: every color is a numbered scale, with each family running from 50 (lightest) to 950 (darkest), and utilities such as bg-emerald-400 name one step on that scale. This tool renders the entire default palette as clickable swatches and, for each class, shows the matching HEX and RGB values. The thing people most often misread: the values are references for matching or reuse in CSS, not ingredients of the class itself - bg-emerald-400 works because the project ships the default palette, not because the number in the class carries the color.
A concrete input and expected output from the current implementation.
Input
bg-emerald-400
Expected output
Class: bg-emerald-400 (the same color is available as text-emerald-400, border-emerald-400, ring-emerald-400, and other prefixes) - HEX: #34D399 - RGB: rgb(52, 211, 153)
In Tailwind's default palette the 400 step of emerald is #34D399, so the searched class resolves to that swatch. Splitting the hex into bytes gives 52 red (0x34), 211 green (0xD3), and 153 blue (0x99), the RGB triple shown beside it.
The catalog covers Tailwind's default palette: 22 families (slate, gray, zinc, neutral, stone, red, orange, amber, yellow, lime, green, emerald, teal, cyan, sky, blue, indigo, violet, purple, fuchsia, pink, rose), each with the eleven shades 50, 100, 200, 300, 400, 500, 600, 700, 800, 900, and 950, plus unsuffixed white, black, and transparent, each swatch pairing the utility class with its HEX and RGB values.
A color utility always joins a property prefix to a family and a shade: bg- sets the background, text- the text color, and border-, ring-, divide-, and outline- reuse the same steps for their own properties. Clicking a swatch copies its class. The HEX and RGB shown alongside are for reuse in inline styles or CSS variables, where a class cannot express the exact value.
No, not strictly. Tailwind v3 and v4 ship the full default palette, so the class works out of the box, but a project can override or replace colors in its theme configuration, which removes the default families entirely. If your project defines a custom palette, verify the family and shade exist before relying on the class.
No. Utility classes are named, not valued: bg-emerald-400 is the class; #34D399 is what it resolves to. For colors outside the default palette, Tailwind v3 and v4 accept arbitrary values such as bg-[#34D399], or you can define a custom theme color and use its generated class. The tool's HEX and RGB figures exist for matching, inline styles, and design handoff.
The example and behavioral notes were checked against the browser implementation. Standards and primary references below define the relevant format, formula, or platform behavior.
Format, validate, and beautify JSON with syntax highlighting and error detection.
Encode text or files to Base64 and decode Base64 strings back to their original form.
Format and indent SQL queries for better readability across all major dialects.
Convert HTML markup into clean Markdown syntax with support for tables and lists.
Write Markdown and see the rendered HTML output in real time with live preview.
Visualize unified diffs and patch files with color-coded additions and deletions.