Color Name to HEX Converter
Convert CSS color names to their HEX code equivalents. CSS supports over 140 named colors that can be used directly in stylesheets, and this converter helps you find the exact HEX code for any named color.
Common CSS Color Names
| Color Name | HEX Code | RGB |
|---|---|---|
| red | #FF0000 | rgb(255, 0, 0) |
| blue | #0000FF | rgb(0, 0, 255) |
| green | #008000 | rgb(0, 128, 0) |
| yellow | #FFFF00 | rgb(255, 255, 0) |
| purple | #800080 | rgb(128, 0, 128) |
| orange | #FFA500 | rgb(255, 165, 0) |
| pink | #FFC0CB | rgb(255, 192, 203) |
| cyan | #00FFFF | rgb(0, 255, 255) |
Gray Scale Colors
| Name | HEX | Value |
|---|---|---|
| white | #FFFFFF | Lightest |
| whitesmoke | #F5F5F5 | |
| gainsboro | #DCDCDC | |
| lightgray | #D3D3D3 | |
| silver | #C0C0C0 | |
| darkgray | #A9A9A9 | |
| gray | #808080 | Middle |
| dimgray | #696969 | |
| black | #000000 | Darkest |
Using Named Colors
``css
.element {
color: crimson;
/* Same as */
color: #DC143C;
}
`
Use this converter to find the precise HEX code for any of CSS's 140+ named colors.
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.