Colors: Primary, Background, and "Web-Safe"

Aside from fonts and text sizes, one of the first things you'll want to change on your pages are element colors. There's a few finer points to coloring up your pages, which I'll get into later in the article.

A word on contrast

It's important that you pay attention to contrast when you're doing any color work. Contrast refers to the way some colors sit on others. A deep blue on jet black is low-contrast and practically unreadable. Snow white on black, on the other hand, contrasts very well.

Contrast isn't just important aesthetically, it's also an accessibility concern. People with bad eyesight, colorblindness, and people with bad monitors all want to read your site—and if you're picking low-contrast colors, they'll probably give up and leave.

Some people will tell you high contrast color schemes are harsh and ugly. Thing is, aesthetics < readability. Every time. Color schemes are largely a matter of taste, but contrast is objective, and readability is paramount. Be kind to your visitors, and keep the contrast up.

The color property

To color the text of an element, use the color property.

body { color: #FFD700; }

(Links need to be colored separately, if you're wondering. Color the <a> tag instead.)

And to color up the background of the element, use the background-color property.

body { background-color: #FFD700; }

Declaring background-color on an inline element will color only the space behind the text (making it look like someone took a highlighter to your text), while declaring it on a block-level element will color the background of the entire block. If you use it on the body, like above, the entire background of the page will turn that color.

Specifying colors

Color names

The easiest way to add a color to your page is by specifying its name. HTML4 defined sixteen usable color names, while X11 (and the later CSS specifications) defines another 140 or so.

p { color: teal; }

While names are acceptable and will work, you probably won't be able to make these colors work with one another in any appealing way. Not to mention, using unsupported color names will potentially give you a color you didn't even intend. You'll have more control specifying colors using really any other method.

Hexadecimal triplets

The traditional way to specify colors is through hexadecimal triplets. These are sets of six letters and numbers that can give you any color you fancy.

p { color: #008A85; }

Hex triplets are easy to copy out of an image editor, but aren't the most user-friendly when trying to determine which color you're looking at. Support for transparency using hexadecimal notation is still very new, so I wouldn't recommend using it for now. Still, it's compact and common.

RGB values

You can specify direct RGB (red-green-blue) values of any element, if you know the RGB value of the color you want.

p { color: rgb(0, 138, 133); }

RGB values are useful because, when using RGBA (red-green-blue-alpha), you can specify the translucency of the color directly on the stylesheet (and this is commonly supported). RGB values are also easier to manipulate as JavaScript strings.

HSL values

The newest way to specify colors is using HSL (hue-saturation-lightness) values. This is probably the most intuitive way to select a color, and being able to vary the saturation and lightness values directly on your stylesheet makes it a cinch to pick one color and quickly build a palette out of it.

p { color: hsl(209, 100%, 35%); }

The myth of the "web-safe" color

Much like "web-safe" fonts, there's long been talk of "web-safe" colors. Old monitors had a very low color depth (meaning they couldn't display too many different ones), and the ones they did display often differed from other monitors. An informal set of 216 "web-safe" colors were put together that guaranteed the colors you chose would look the same for all your visitors.

In practice, web-safe colors weren't that rock-solid. 8-bit monitors mostly displayed them fine, but 16-bit monitors (capable of displaying significantly more colors) were more than likely to dither web-safe colors unrecognizably. The actual "web-safe" color palette consists of about 22 colors, and mostly shades of green.

Nowadays, the idea of a web-safe color palette is effectively moot; the cheapest monitors you'll find nowadays display in at least 24-bit color, meaning they can display any color you fancy. You don't have to worry a bit about whether or not your goldenrod will look like goldenrod for your visitors.

Putting together good palettes with Paletton

To make it easy to put together attractive color palettes, I've linked one of my favorite tools, Paletton. It's an excellent and intuitive tool for putting together complementary palettes, triads, or tetrads with a lot of control and precision. There's also some preview and colorblind-simulation tools at hand, in case you'd like to try out your palette or check for contrast.