Tailwind Color Converter
Match colors to Tailwind CSS's predefined color palette.
Color Formats Supported
- HEX: 6-digit hexadecimal codes (#FF5733)
- RGB: Red, Green, Blue values (255, 87, 51)
- HSL: Hue, Saturation, Lightness (11°, 100%, 60%)
- CMYK: Cyan, Magenta, Yellow, Key for print
Using Colors Effectively
1. Accessibility: Ensure sufficient contrast for text readability 2. Consistency: Use a defined palette throughout your project 3. Hierarchy: Use color to guide attention and establish importance 4. Brand: Maintain consistent colors across all materials
Color Theory Basics
- Primary colors: Red, blue, yellow (can't be mixed from other colors)
- Secondary colors: Orange, green, purple (mixed from primaries)
- Warm vs Cool: Warm colors (red, orange) feel energetic; cool colors (blue, green) feel calm
Arbitrary Values and When to Stop Using Them
Tailwind's palette covers 22 hues at 11 steps each — 242 colours. Any colour outside it needs an arbitrary value:
``html
`That works, and used more than a handful of times it means you are fighting the framework.
The better move is to extend the theme so your brand colour is a first-class token:
`css
@theme {
--color-brand-500: #ff6347;
--color-brand-600: #e5533d;
}
`
Then bg-brand-500 works everywhere, autocompletes, and changes in one place. Arbitrary
values are an escape hatch for genuinely one-off cases, not a colour system.
A Full Ramp From This Colour
Design systems settle on a 50–900 scale because it covers backgrounds, borders, text and
states without anyone reaching outside the palette. Mixing toward white and black rather
than adjusting HSL lightness keeps more of the hue's character:
| Step | Colour | Contrast on white | Safe for |
|---|---|---|---|
| 50 | #F5F9FF | 1.06:1 | backgrounds and fills |
| 100 | #EBF3FE | 1.12:1 | backgrounds and fills |
| 200 | #CEE0FD | 1.34:1 | backgrounds and fills |
| 300 | #B1CDFB | 1.62:1 | backgrounds and fills |
| 400 | #76A8F9 | 2.40:1 | backgrounds and fills |
| 500 | #3B82F6 | 3.68:1 | large text, borders |
| 600 | #326FD1 | 4.85:1 | body text on white |
| 700 | #295BAC | 6.59:1 | body text on white |
| 800 | #204887 | 8.98:1 | body text on white |
| 900 | #183462 | 12.31:1 | body text on white |
The contrast column is the one that decides usage. Steps below 3:1 cannot carry text at
any size and belong in fills and dividers; steps at 4.5:1 and above are safe for body copy.Adjusting It
Base colour in HSL is hsl(217, 91%, 60%). Two useful moves:
`css
/* +10% lightness, same hue */
--lighter: #6da2f8;
/* −10% lightness */
--darker: #0b64f4;
`
Raising lightness also drops perceived saturation, so a lightened colour reads greyer than
its numbers suggest. Adding 5–10% saturation alongside every 20% of lightness keeps the ramp
looking like one hue rather than a fade to grey.
The 148 CSS Colour Keywords
CSS defines a fixed list — 148 names covering 147 distinct colours, since gray and
grey (and aqua/cyan, magenta/fuchsia) are aliases.
| Name | HEX | Note |
|---|---|---|
red | #FF0000 | Full intensity |
green | #008000 | Half intensity — lime is #00FF00 |
blue | #0000FF | Full intensity |
purple | #800080 | Half intensity |
gray / grey | #808080 | Both spellings valid |
aqua / cyan | #00FFFF | Identical |
rebeccapurple | #663399 | Added in 2014 in memory of Rebecca Meyer |
The green trap catches people repeatedly: the keyword is the dark VGA green, and the
bright one everybody pictures is lime.Why Not to Use Them in Production
Named colours are excellent for prototyping and debugging — border: 1px solid red while
you find a layout problem — and poor as a design system.
You get 148 and no more. Any brand colour needs a hex value anyway.They carry no semantics.tomatotells a reader nothing about what it is for;
--color-danger does.
There are no ramps.darkblueis not a computed shade ofblue— it is an
unrelated fixed value, so the two do not form a scale.Define tokens instead:
`css
:root {
--color-danger: #dc2626;
--color-danger-bg: #fef2f2;
}
``
One place to change, a name that survives a rebrand, and a ramp you control.