All 148 CSS Color Names With Hex and RGB Values

CSS has 148 colour keywords with names ranging from the sensible (red) to the baffling (papayawhip, blanchedalmond, mistyrose). This page lists every one with its exact hex and RGB value and a visible swatch. It also explains where the list came from, which entries are duplicates, and when a keyword is genuinely the right choice.

The count, precisely

148 keywords, 139 distinct colours. The gap is nine synonym pairs: aqua/cyan, fuchsia/magenta, and seven gray/grey spelling variants. Every value below was resolved by a real CSS colour parser rather than copied, so the hex codes are exact.

Where these names came from

The list is not a designed palette. It is an accident of history that CSS inherited and can never remove.

Almost every name traces back to X11, the windowing system built at MIT in the 1980s. X11 shipped with a file called rgb.txt mapping names to RGB triples, and it grew organically as developers added colours they happened to need. The often-repeated account is that a good portion of the additions came from someone at Digital Equipment Corporation matching values against a box of paint chips and naming them accordingly — which explains why the palette contains five subtly different off-whites with names like seashell, linen, oldlace, ivory and floralwhite, but no systematic coverage of anything.

When HTML and then CSS needed colour keywords, they adopted the X11 list rather than inventing one. The consequences are permanent and occasionally absurd:

⚠️ darkgray is lighter than gray

gray is #808080. darkgray is #A9A9A9 — noticeably lighter. This happened because X11 and the original HTML specification disagreed about grey values, and when the two lists were merged, CSS kept X11's darkgray alongside HTML's gray. The contradiction has been in every browser for thirty years and will never be corrected, because fixing it would silently change the appearance of countless existing pages.

Similar oddities: lightgoldenrodyellow exists but goldenrodyellow does not. There is a darkgreen that is darker than green, but lightgreen and green are not related in the way you would expect. And purple (#800080) is dramatically darker than most people picture when they hear the word.

The one name with a story

rebeccapurple is the only keyword added since the X11 era and the only one named after a person. In 2014, Rebecca Meyer — daughter of Eric Meyer, one of the people most responsible for CSS being usable at all — died of brain cancer on her sixth birthday. She had asked to be called Becca rather than Rebecca once she turned six. The CSS Working Group added rebeccapurple to the specification shortly afterwards. Purple was her favourite colour, and #663399 was already a well-known shorthand for it in the web community. It is, as far as memorials go, an unusually durable one: it now ships in every browser on earth.

The complete list

All 148 keywords, alphabetically, with exact values. Synonyms are included at their own alphabetical position rather than merged, so you can find whichever spelling you were searching for.

Keyword	Hex	RGB
`aliceblue`	`#F0F8FF`	240, 248, 255
`antiquewhite`	`#FAEBD7`	250, 235, 215
`aqua`	`#00FFFF`	0, 255, 255
`aquamarine`	`#7FFFD4`	127, 255, 212
`azure`	`#F0FFFF`	240, 255, 255
`beige`	`#F5F5DC`	245, 245, 220
`bisque`	`#FFE4C4`	255, 228, 196
`black`	`#000000`	0, 0, 0
`blanchedalmond`	`#FFEBCD`	255, 235, 205
`blue`	`#0000FF`	0, 0, 255
`blueviolet`	`#8A2BE2`	138, 43, 226
`brown`	`#A52A2A`	165, 42, 42
`burlywood`	`#DEB887`	222, 184, 135
`cadetblue`	`#5F9EA0`	95, 158, 160
`chartreuse`	`#7FFF00`	127, 255, 0
`chocolate`	`#D2691E`	210, 105, 30
`coral`	`#FF7F50`	255, 127, 80
`cornflowerblue`	`#6495ED`	100, 149, 237
`cornsilk`	`#FFF8DC`	255, 248, 220
`crimson`	`#DC143C`	220, 20, 60
`cyan`	`#00FFFF`	0, 255, 255
`darkblue`	`#00008B`	0, 0, 139
`darkcyan`	`#008B8B`	0, 139, 139
`darkgoldenrod`	`#B8860B`	184, 134, 11
`darkgray`	`#A9A9A9`	169, 169, 169
`darkgreen`	`#006400`	0, 100, 0
`darkgrey`	`#A9A9A9`	169, 169, 169
`darkkhaki`	`#BDB76B`	189, 183, 107
`darkmagenta`	`#8B008B`	139, 0, 139
`darkolivegreen`	`#556B2F`	85, 107, 47
`darkorange`	`#FF8C00`	255, 140, 0
`darkorchid`	`#9932CC`	153, 50, 204
`darkred`	`#8B0000`	139, 0, 0
`darksalmon`	`#E9967A`	233, 150, 122
`darkseagreen`	`#8FBC8F`	143, 188, 143
`darkslateblue`	`#483D8B`	72, 61, 139
`darkslategray`	`#2F4F4F`	47, 79, 79
`darkslategrey`	`#2F4F4F`	47, 79, 79
`darkturquoise`	`#00CED1`	0, 206, 209
`darkviolet`	`#9400D3`	148, 0, 211
`deeppink`	`#FF1493`	255, 20, 147
`deepskyblue`	`#00BFFF`	0, 191, 255
`dimgray`	`#696969`	105, 105, 105
`dimgrey`	`#696969`	105, 105, 105
`dodgerblue`	`#1E90FF`	30, 144, 255
`firebrick`	`#B22222`	178, 34, 34
`floralwhite`	`#FFFAF0`	255, 250, 240
`forestgreen`	`#228B22`	34, 139, 34
`fuchsia`	`#FF00FF`	255, 0, 255
`gainsboro`	`#DCDCDC`	220, 220, 220
`ghostwhite`	`#F8F8FF`	248, 248, 255
`gold`	`#FFD700`	255, 215, 0
`goldenrod`	`#DAA520`	218, 165, 32
`gray`	`#808080`	128, 128, 128
`green`	`#008000`	0, 128, 0
`greenyellow`	`#ADFF2F`	173, 255, 47
`grey`	`#808080`	128, 128, 128
`honeydew`	`#F0FFF0`	240, 255, 240
`hotpink`	`#FF69B4`	255, 105, 180
`indianred`	`#CD5C5C`	205, 92, 92
`indigo`	`#4B0082`	75, 0, 130
`ivory`	`#FFFFF0`	255, 255, 240
`khaki`	`#F0E68C`	240, 230, 140
`lavender`	`#E6E6FA`	230, 230, 250
`lavenderblush`	`#FFF0F5`	255, 240, 245
`lawngreen`	`#7CFC00`	124, 252, 0
`lemonchiffon`	`#FFFACD`	255, 250, 205
`lightblue`	`#ADD8E6`	173, 216, 230
`lightcoral`	`#F08080`	240, 128, 128
`lightcyan`	`#E0FFFF`	224, 255, 255
`lightgoldenrodyellow`	`#FAFAD2`	250, 250, 210
`lightgray`	`#D3D3D3`	211, 211, 211
`lightgreen`	`#90EE90`	144, 238, 144
`lightgrey`	`#D3D3D3`	211, 211, 211
`lightpink`	`#FFB6C1`	255, 182, 193
`lightsalmon`	`#FFA07A`	255, 160, 122
`lightseagreen`	`#20B2AA`	32, 178, 170
`lightskyblue`	`#87CEFA`	135, 206, 250
`lightslategray`	`#778899`	119, 136, 153
`lightslategrey`	`#778899`	119, 136, 153
`lightsteelblue`	`#B0C4DE`	176, 196, 222
`lightyellow`	`#FFFFE0`	255, 255, 224
`lime`	`#00FF00`	0, 255, 0
`limegreen`	`#32CD32`	50, 205, 50
`linen`	`#FAF0E6`	250, 240, 230
`magenta`	`#FF00FF`	255, 0, 255
`maroon`	`#800000`	128, 0, 0
`mediumaquamarine`	`#66CDAA`	102, 205, 170
`mediumblue`	`#0000CD`	0, 0, 205
`mediumorchid`	`#BA55D3`	186, 85, 211
`mediumpurple`	`#9370DB`	147, 112, 219
`mediumseagreen`	`#3CB371`	60, 179, 113
`mediumslateblue`	`#7B68EE`	123, 104, 238
`mediumspringgreen`	`#00FA9A`	0, 250, 154
`mediumturquoise`	`#48D1CC`	72, 209, 204
`mediumvioletred`	`#C71585`	199, 21, 133
`midnightblue`	`#191970`	25, 25, 112
`mintcream`	`#F5FFFA`	245, 255, 250
`mistyrose`	`#FFE4E1`	255, 228, 225
`moccasin`	`#FFE4B5`	255, 228, 181
`navajowhite`	`#FFDEAD`	255, 222, 173
`navy`	`#000080`	0, 0, 128
`oldlace`	`#FDF5E6`	253, 245, 230
`olive`	`#808000`	128, 128, 0
`olivedrab`	`#6B8E23`	107, 142, 35
`orange`	`#FFA500`	255, 165, 0
`orangered`	`#FF4500`	255, 69, 0
`orchid`	`#DA70D6`	218, 112, 214
`palegoldenrod`	`#EEE8AA`	238, 232, 170
`palegreen`	`#98FB98`	152, 251, 152
`paleturquoise`	`#AFEEEE`	175, 238, 238
`palevioletred`	`#DB7093`	219, 112, 147
`papayawhip`	`#FFEFD5`	255, 239, 213
`peachpuff`	`#FFDAB9`	255, 218, 185
`peru`	`#CD853F`	205, 133, 63
`pink`	`#FFC0CB`	255, 192, 203
`plum`	`#DDA0DD`	221, 160, 221
`powderblue`	`#B0E0E6`	176, 224, 230
`purple`	`#800080`	128, 0, 128
`rebeccapurple`	`#663399`	102, 51, 153
`red`	`#FF0000`	255, 0, 0
`rosybrown`	`#BC8F8F`	188, 143, 143
`royalblue`	`#4169E1`	65, 105, 225
`saddlebrown`	`#8B4513`	139, 69, 19
`salmon`	`#FA8072`	250, 128, 114
`sandybrown`	`#F4A460`	244, 164, 96
`seagreen`	`#2E8B57`	46, 139, 87
`seashell`	`#FFF5EE`	255, 245, 238
`sienna`	`#A0522D`	160, 82, 45
`silver`	`#C0C0C0`	192, 192, 192
`skyblue`	`#87CEEB`	135, 206, 235
`slateblue`	`#6A5ACD`	106, 90, 205
`slategray`	`#708090`	112, 128, 144
`slategrey`	`#708090`	112, 128, 144
`snow`	`#FFFAFA`	255, 250, 250
`springgreen`	`#00FF7F`	0, 255, 127
`steelblue`	`#4682B4`	70, 130, 180
`tan`	`#D2B48C`	210, 180, 140
`teal`	`#008080`	0, 128, 128
`thistle`	`#D8BFD8`	216, 191, 216
`tomato`	`#FF6347`	255, 99, 71
`turquoise`	`#40E0D0`	64, 224, 208
`violet`	`#EE82EE`	238, 130, 238
`wheat`	`#F5DEB3`	245, 222, 179
`white`	`#FFFFFF`	255, 255, 255
`whitesmoke`	`#F5F5F5`	245, 245, 245
`yellow`	`#FFFF00`	255, 255, 0
`yellowgreen`	`#9ACD32`	154, 205, 50

The nine duplicate pairs

These render identically. There is no difference in behaviour, support, or performance — only spelling.

Value	Names	Origin of the duplication
`#00FFFF`	`aqua` = `cyan`	`aqua` came from HTML, `cyan` from X11
`#FF00FF`	`fuchsia` = `magenta`	`fuchsia` from HTML, `magenta` from X11
`#808080`	`gray` = `grey`	American and British spellings both accepted
`#A9A9A9`	`darkgray` = `darkgrey`	Same
`#D3D3D3`	`lightgray` = `lightgrey`	Same
`#696969`	`dimgray` = `dimgrey`	Same
`#708090`	`slategray` = `slategrey`	Same
`#778899`	`lightslategray` = `lightslategrey`	Same
`#2F4F4F`	`darkslategray` = `darkslategrey`	Same

The keywords that are not colours

Three CSS colour values are not in the list above because they are not fixed colours at all. They are the most useful entries in the whole system.

Keyword	What it does
`transparent`	Equivalent to `rgb(0 0 0 / 0)`. Fully transparent black. Essential for animating to and from invisibility without a colour shift.
`currentColor`	Resolves to the element's computed `color` value. Set a border or SVG fill to `currentColor` and it follows the text colour automatically — including through theme switches and `:hover`.
`Canvas`, `CanvasText`, `LinkText`, `ButtonFace`…	System colours that resolve to the operating system's own theme values. The correct way to respect forced-colours and high-contrast modes.

✅ currentColor is the most underused value in CSS

An icon defined with fill: currentColor inherits the surrounding text colour with no extra rules. It turns light in dark mode, dims when disabled, and highlights on hover — all without a single additional selector. If you are writing parallel colour rules for text and its adjacent icon, you can usually delete half of them.

Where colour notation is going

Keywords and hex are the oldest notations; CSS now has considerably better options, and they matter for reasons beyond convenience.

/* The historic notations */
color: rebeccapurple;
color: #663399;
color: rgb(102, 51, 153);

/* Modern space-separated syntax with optional alpha */
color: rgb(102 51 153 / 80%);

/* HSL — far easier to adjust by hand */
color: hsl(270 50% 40%);

/* Perceptually uniform: equal numeric steps look equal to the eye */
color: oklch(0.44 0.15 303);

/* Colours outside sRGB, for wide-gamut displays */
color: color(display-p3 0.4 0.2 0.6);
                

The important one is OKLCH. In HSL, lightness is a naive average that does not match human perception: hsl(60 100% 50%) (yellow) looks far brighter than hsl(240 100% 50%) (blue) despite both claiming 50% lightness. OKLCH is built on a perceptual colour model, so two colours with the same L value genuinely look equally bright. That makes it possible to generate an accessible palette by holding lightness constant and varying hue — something that simply does not work in HSL.

When a keyword is actually the right choice

Named colours have a bad reputation among designers, which is fair — the palette was never designed. But there are cases where they are the best option:

Debugging. outline: 2px solid red is faster to type than any hex and instantly obvious. Nobody ships it, and that is the point.
Documentation and examples. background: lightblue communicates intent in a code sample better than #ADD8E6.
Genuinely arbitrary colours. Chart series in a throwaway prototype, or placeholder states where the exact value is irrelevant.
The three non-colour keywords. transparent and currentColor are not stylistic choices; they are functionality with no hex equivalent.

For anything a user will see and a designer has considered, define your palette explicitly as custom properties. Then the values live in one place, respond to theme switching, and are not constrained to a list assembled from paint chips forty years ago.

:root {
    --brand: oklch(0.55 0.18 265);
    --brand-text: oklch(0.98 0.01 265);
}

[data-theme="dark"] {
    --brand: oklch(0.72 0.15 265);
    --brand-text: oklch(0.18 0.02 265);
}
                

Convert between HEX, RGB and HSL

Paste any colour in any notation and get all the others instantly — no upload, no sign-up, runs entirely in your browser.

Open the Color Converter →

One accessibility warning about this palette

Several of these keywords are traps for text colour. yellow on white has a contrast ratio of about 1.07:1 — effectively invisible. lightgray text on white is around 1.6:1. WCAG requires 4.5:1 for normal body text and 3:1 for large text, so a large part of the named palette fails outright as a foreground colour.

The pale colours in this list are backgrounds, not text. If you are choosing a foreground colour from these swatches by eye, check the ratio before shipping it — the difference between "looks a bit light on my monitor" and "unreadable for a significant number of people" is not something you can judge visually.

Check any colour pair against WCAG

Enter a foreground and background colour and see the exact contrast ratio with AA and AAA pass or fail for both normal and large text.

Open the Contrast Checker →

Summary

148 keywords, 139 unique colours — nine pairs are exact synonyms.
The list is inherited from X11 and was never designed as a palette. darkgray being lighter than gray is the clearest evidence.
Both gray and grey spellings work everywhere, for every grey keyword.
rebeccapurple is the only addition since X11, and the only memorial in a web standard.
transparent and currentColor are the most useful entries and are not fixed colours at all.
For designed interfaces use custom properties with OKLCH or hex; keep keywords for debugging and documentation.

Frequently Asked Questions

How many CSS color names are there?

There are 148 recognised colour keywords in CSS, but only 139 distinct colours. Nine pairs are exact synonyms: aqua and cyan, fuchsia and magenta, and seven gray/grey spelling pairs. Some counts say 140 or 147 depending on whether transparent and the 2014 addition rebeccapurple are included.

Where did CSS color names like papayawhip come from?

Almost all of them come from the X11 window system's rgb.txt file, compiled in the 1980s largely by eye by developers at MIT and Digital Equipment Corporation. They were never designed as a coherent palette, which is why the naming is so inconsistent — darkgray is lighter than gray, and there are five distinct off-whites with poetic names.

What is rebeccapurple and why is it in CSS?

Rebeccapurple (#663399) is the only CSS colour named after a person. It was added in 2014 in memory of Rebecca Meyer, the six-year-old daughter of CSS pioneer Eric Meyer, who died of cancer. She had asked to be called Becca. The colour is #663399 because purple was her favourite and 663399 is a memorable shorthand for it.

Should I use color names or hex codes in CSS?

Use hex or modern colour functions for anything designed. Keywords are useful for quick debugging — a red border to find an element — and for a handful of genuinely useful values like transparent and currentColor. The named palette is not designed for harmony, so building an interface from it produces awkward results.

Is gray or grey correct in CSS?

Both work identically and always have. CSS accepts both spellings for all seven grey-family keywords, and they resolve to exactly the same value. Pick one and use it consistently in your codebase — mixing them makes search-and-replace unreliable.

Written by Paras

We build free, browser-based file tools and write the reference material we wish existed when we were looking things up. Spotted an error? Tell us and we will fix it.