Lesson 70 +5 XP

HTML Color Reference

Colors can be written four ways in HTML and CSS: names, RGB, HEX, and HSL. Here is everything you need.

The four ways to write a color

/* 1. Color name */
color: tomato;

/* 2. RGB (red, green, blue, 0-255) */
color: rgb(255, 99, 71);

/* 3. HEX (#rrggbb) */
color: #ff6347;

/* 4. HSL (hue, saturation, lightness) */
color: hsl(9, 100%, 64%);

Add a for transparency: rgba(255, 99, 71, 0.5), #ff634780, hsla(9, 100%, 64%, 0.5).

The 16 basic color names

Name	HEX	Name	HEX
black	`#000000`	white	`#ffffff`
red	`#ff0000`	yellow	`#ffff00`
blue	`#0000ff`	lime	`#00ff00`
green	`#008000`	orange	`#ffa500`
purple	`#800080`	pink	`#ffc0cb`
gray	`#808080`	silver	`#c0c0c0`
maroon	`#800000`	olive	`#808000`
navy	`#000080`	teal	`#008080`

All 148 named colors

Here is every named color recognized by modern browsers, grouped by color family. A few come in two spellings (like gray/grey and aqua/cyan): they are the exact same color!

Reds and pinks

Color	HEX	Color	HEX
`indianred`	`#cd5c5c`	`lightcoral`	`#f08080`
`salmon`	`#fa8072`	`darksalmon`	`#e9967a`
`lightsalmon`	`#ffa07a`	`crimson`	`#dc143c`
`firebrick`	`#b22222`	`darkred`	`#8b0000`
`red`	`#ff0000`	`pink`	`#ffc0cb`
`lightpink`	`#ffb6c1`	`hotpink`	`#ff69b4`
`deeppink`	`#ff1493`	`palevioletred`	`#db7093`
`mediumvioletred`	`#c71585`	`rosybrown`	`#bc8f8f`
`brown`	`#a52a2a`	`maroon`	`#800000`

Oranges and browns

Color	HEX	Color	HEX
`orangered`	`#ff4500`	`darkorange`	`#ff8c00`
`coral`	`#ff7f50`	`tomato`	`#ff6347`
`orange`	`#ffa500`	`gold`	`#ffd700`
`goldenrod`	`#daa520`	`darkgoldenrod`	`#b8860b`
`chocolate`	`#d2691e`	`saddlebrown`	`#8b4513`
`sienna`	`#a0522d`	`peru`	`#cd853f`
`sandybrown`	`#f4a460`	`burlywood`	`#deb887`
`tan`	`#d2b48c`	`beige`	`#f5f5dc`

Yellows

Color	HEX	Color	HEX
`yellow`	`#ffff00`	`yellowgreen`	`#9acd32`
`greenyellow`	`#adff2f`	`khaki`	`#f0e68c`
`darkkhaki`	`#bdb76b`	`palegoldenrod`	`#eee8aa`
`cornsilk`	`#fff8dc`	`lemonchiffon`	`#fffacd`
`lightgoldenrodyellow`	`#fafad2`	`papayawhip`	`#ffefd5`
`moccasin`	`#ffe4b5`	`peachpuff`	`#ffdab9`
`bisque`	`#ffe4c4`	`navajowhite`	`#ffdead`
`wheat`	`#f5deb3`	`lightyellow`	`#ffffe0`
`ivory`	`#fffff0`	`antiquewhite`	`#faebd7`

Greens

Color	HEX	Color	HEX
`green`	`#008000`	`lime`	`#00ff00`
`limegreen`	`#32cd32`	`chartreuse`	`#7fff00`
`lawngreen`	`#7cfc00`	`palegreen`	`#98fb98`
`lightgreen`	`#90ee90`	`springgreen`	`#00ff7f`
`mediumspringgreen`	`#00fa9a`	`mediumseagreen`	`#3cb371`
`seagreen`	`#2e8b57`	`forestgreen`	`#228b22`
`darkgreen`	`#006400`	`olivedrab`	`#6b8e23`
`darkolivegreen`	`#556b2f`	`olive`	`#808000`
`darkseagreen`	`#8fbc8f`	`mediumaquamarine`	`#66cdaa`
`aquamarine`	`#7fffd4`	`honeydew`	`#f0fff0`
`mintcream`	`#f5fffa`

Cyans and teals

Color	HEX	Color	HEX
`aqua`	`#00ffff`	`cyan`	`#00ffff`
`darkcyan`	`#008b8b`	`lightcyan`	`#e0ffff`
`paleturquoise`	`#afeeee`	`turquoise`	`#40e0d0`
`mediumturquoise`	`#48d1cc`	`darkturquoise`	`#00ced1`
`lightseagreen`	`#20b2aa`	`cadetblue`	`#5f9ea0`
`teal`	`#008080`

Blues

Color	HEX	Color	HEX
`aliceblue`	`#f0f8ff`	`azure`	`#f0ffff`
`skyblue`	`#87ceeb`	`lightskyblue`	`#87cefa`
`deepskyblue`	`#00bfff`	`dodgerblue`	`#1e90ff`
`cornflowerblue`	`#6495ed`	`royalblue`	`#4169e1`
`mediumblue`	`#0000cd`	`darkblue`	`#00008b`
`midnightblue`	`#191970`	`steelblue`	`#4682b4`
`lightsteelblue`	`#b0c4de`	`powderblue`	`#b0e0e6`
`lightblue`	`#add8e6`	`blue`	`#0000ff`
`navy`	`#000080`

Purples and violets

Color	HEX	Color	HEX
`blueviolet`	`#8a2be2`	`darkviolet`	`#9400d3`
`darkorchid`	`#9932cc`	`mediumorchid`	`#ba55d3`
`orchid`	`#da70d6`	`violet`	`#ee82ee`
`fuchsia`	`#ff00ff`	`magenta`	`#ff00ff`
`mediumpurple`	`#9370db`	`slateblue`	`#6a5acd`
`darkslateblue`	`#483d8b`	`mediumslateblue`	`#7b68ee`
`indigo`	`#4b0082`	`rebeccapurple`	`#663399`
`darkmagenta`	`#8b008b`	`plum`	`#dda0dd`
`thistle`	`#d8bfd8`	`lavender`	`#e6e6fa`
`lavenderblush`	`#fff0f5`	`purple`	`#800080`

Whites and creams

Color	HEX	Color	HEX
`white`	`#ffffff`	`snow`	`#fffafa`
`ghostwhite`	`#f8f8ff`	`whitesmoke`	`#f5f5f5`
`seashell`	`#fff5ee`	`floralwhite`	`#fffaf0`
`oldlace`	`#fdf5e6`	`linen`	`#faf0e6`
`mistyrose`	`#ffe4e1`	`blanchedalmond`	`#ffebcd`

Grays and blacks

Color	HEX	Color	HEX
`black`	`#000000`	`gray`	`#808080`
`grey`	`#808080`	`gainsboro`	`#dcdcdc`
`lightgray`	`#d3d3d3`	`lightgrey`	`#d3d3d3`
`darkgray`	`#a9a9a9`	`darkgrey`	`#a9a9a9`
`dimgray`	`#696969`	`dimgrey`	`#696969`
`slategray`	`#708090`	`slategrey`	`#708090`
`lightslategray`	`#778899`	`lightslategrey`	`#778899`
`darkslategray`	`#2f4f4f`	`darkslategrey`	`#2f4f4f`
`silver`	`#c0c0c0`

How RGB works

Every color is a mix of red, green, and blue light. Each from 0 to 255:

rgb(255, 0, 0) = pure red
rgb(0, 255, 0) = pure green
rgb(0, 0, 255) = pure blue
rgb(0, 0, 0) = black (no light)
rgb(255, 255, 255) = white (all light)
rgb(128, 128, 128) = gray (all equal)

How HEX works

A # followed by 6 characters: 2 for red, 2 for green, 2 for blue.

ff = the max (255), 00 = zero
#ff0000 = red (same as rgb(255,0,0))
#00ff00 = green, #0000ff = blue
#ffffff = white, #000000 = black
Shortcut: #f00 = #ff0000 (repeat each digit)

How HSL works

HSL = Hue, Saturation, Lightness.

hue: the base color on a wheel, 0-360 degrees (0 = red, 120 = green, 240 = blue).
saturation: how colorful, 0-100% (0% = gray).
lightness: how light or dark, 0-100% (0% = black, 100% = white).

color: hsl(0, 100%, 50%);   /* pure red */
color: hsl(120, 50%, 50%);  /* medium green */
color: hsl(240, 100%, 50%); /* pure blue */

Use a color picker!

You don't need to memorize codes. Use a color picker tool (most code editors have one built in), or pick from your browser's dev tools. That's what real developers do!

TL;DR

4 ways: names, rgb(), #hex, hsl().
140 named colors; the 16 basic ones are the classics.
Add a for transparency.
Use a color picker, not your memory!

HTML Color Reference