Hexadecimal color notation is a compact way to tell CSS which red, green, and blue amounts make up a color. Think of it as a six-character paint recipe: two characters for red, two for green, and two for blue. A code starts with #, so its pattern is #rrggbb. section 17.11
Read a hex color from left to right:
- # marks the value as a hexadecimal color. section 17.11
- The first pair, rr, controls red; the second, gg, controls green; and the third, bb, controls blue. section 17.11
- Each pair can range from 00 to ff. More than one channel can contribute, so colors can be bright mixes as well as pure red, green, or blue. section 17.11
| Name | Red | Color |
| Red | #ff000 |
|
| Green | #00ff00 |
|
| Blue | #0000ff |
|
| Yellow | #ffff00 |
|
| Magenta | #ff00ff |
|
| Cyan | #00ffff |
|
| Black | #000000 |
|
| Gray | #808080 |
|
| White | #ffffff |
Use these familiar color recipes as landmarks: #ff0000 is red, #00ff00 is green, #0000ff is blue, and #ffffff is white. section 17.11
Color a heading purple
Put a hex triplet after the CSS color property: h1 { color: #800080; } Here, 80 supplies red, 00 supplies green, and 80 supplies blue, producing purple. The same color could be expressed with rgb(), but the hex form keeps the three channel values together in one short code. section 17.11 section 17.12
You do not need to guess a color from its code. A Color Chooser can display a selected color together with its RGB hex triplet, rgb() value, hsl() value, and keyword when one applies. Enter a hex triplet directly, or pick and adjust a color visually. section 17.14
Hex values also work as starting points for a color scheme. Enter one into a Color Scheme Calculator, choose complementary, analogous, triadic, split complementary, or monochrome, and inspect the resulting colors. For example, #77613c can anchor a warm brown monochrome palette. section 17.16 section 20.4
Try it: choose a favorite color in a Color Chooser, copy its hex triplet, and use it with color or background-color. Then feed that same value into a scheme calculator to find companion colors. section 17.14 section 17.29
