Named Colour HEX Codes
61 converters, all running in your browser.
papayawhip,
lightgoldenrodyellow and four different greys spelled two ways each.Several of the names are actively misleading. gray is darker than darkgray.
lightgreen is lighter than green but so is lime, which is what most people mean by
green. And aqua and cyan are the same colour, as are fuchsia and magenta —
both pairs exist because two ancestor systems used different names.
Each page here gives the exact value in every format, the WCAG contrast ratio against white and black, a shade ramp, and the harmonies built from it.
All 61 converters
- Red HEX Code
- Blue HEX Code
- Green HEX Code
- White HEX Code
- Black HEX Code
- Yellow HEX Code
- Purple HEX Code
- Orange HEX Code
- Pink HEX Code
- Gray HEX Code
- Brown HEX Code
- Teal HEX Code
- Navy Blue HEX Code
- Maroon HEX Code
- Gold HEX Code
- Silver HEX Code
- Cyan HEX Code
- Magenta HEX Code
- Coral HEX Code
- Turquoise HEX Code
- Indigo HEX Code
- Violet HEX Code
- Lime HEX Code
- Aqua HEX Code
- Olive HEX Code
- Salmon HEX Code
- Beige HEX Code
- Ivory HEX Code
- Lavender HEX Code
- Mint Green HEX Code
- Peach HEX Code
- Crimson Hex Code
- Khaki Hex Code
- Plum Hex Code
- Orchid Hex Code
- Tan Hex Code
- Chocolate Hex Code
- Tomato Hex Code
- Sienna Hex Code
- Slate Gray Hex Code
- Steel Blue Hex Code
- Sky Blue Hex Code
- Royal Blue Hex Code
- Midnight Blue Hex Code
- Forest Green Hex Code
- Sea Green Hex Code
- Emerald Hex Code
- Amber Hex Code
- Goldenrod Hex Code
- Firebrick Hex Code
- Burgundy Hex Code
- Charcoal Hex Code
- Ruby Hex Code
- Sapphire Hex Code
- Rose Hex Code
- Mauve Hex Code
- Taupe Hex Code
- Cream Hex Code
- Mustard Hex Code
- Rust Hex Code
- Periwinkle Hex Code
Choosing Between Similar Names
The named colours cluster tightly in places, and picking between neighbours is easier with the numbers in front of you than by name alone.
The greys are the clearest example. CSS has gray (#808080), darkgray (#A9A9A9),
dimgray (#696969), lightgray (#D3D3D3), silver (#C0C0C0) and gainsboro
(#DCDCDC) — and darkgray is lighter than gray, which catches people every time. The
name came from a different source than the value, and neither was ever reconciled.
Both spellings work: grey and gray are aliases throughout, as are the four
*grey/\*gray compounds.
Named Colours Are a Starting Point
They are convenient for prototyping and rarely right for a finished product. A brand palette
needs values chosen for contrast against your specific backgrounds, for legibility at your
specific type sizes, and for how they behave in dark mode — none of which the CSS list was
designed around.
The useful workflow is to pick a named colour close to what you want, read its HSL, and adjust
lightness and saturation from there. That is what these pages are for: each gives the value in
every format, the contrast ratios, and a ramp built from it.
Contrast Is Not Optional
WCAG requires 4.5:1 against the background for body text and 3:1 for large text. Most of the
lighter named colours — skyblue, khaki, periwinkle, lightgreen` — fail
comfortably against white at body size. They are background colours, and using them for text
excludes readers who could otherwise use your site.