CSS lets you style your web pages in many different ways, controlling the layout of elements, changing their order, and even animating them. But some of the most fundamental visual tweaks at your fingertips relate to color. Here are the most important things you need to know about this surprisingly in-depth topic.

1The Core Color Properties

Let’s start somewhere simple:color. Probably the most fundamental color-related property, this is one of theeasiest tweaks you can make to your web design. The color property sets the foreground color, which is used to draw text and other relevant decorations, like the underlining of links.

The default color is CanvasText, a system-defined color that your browser should read and use. This is typically black, to contrast with the default Canvas color of white, but note that dark mode will usually reverse these values.

A paragraph of placeholder text with several sample links, two of which are colored blue, with the remaining one colored purple.

Alongside color, there are very similar properties that affect things beyond simple text. Thebackground-colorproperty fills an element with its given color before painting text and other decorations on top. Theborder-colorproperty controls the color of any border drawn around an element.

Finally,accent-coloris a more modern property that sets the color of parts of certain input controls. For example, it can control the color of the box that a checkmark (input type=“checkbox”) sits on. The default value of this property may derive from an OS-level preference, like your theme color.

The macOS Appearance settings with a section titled Theme that includes a color setting, currently Orange.

2Named Colors

With the most relevant properties out of the way, it’s time to look at their possible values, which all represent color in one way or another. The simplest, which was based on the Windows VGA 16-color palette, uses names like “red,” “black,” and “aqua”.

You should be aware of small inconsistencies in naming. For example, while “red” and “blue” both represent the full extent of their corresponding color component, with a complete absence of the remaining components, “green” is a little different, representing only about “half-green.” The “full” green you might be looking for is called “lime,” and it’s a lot brighter than you probably expect.

16 named CSS colors, including black, silver, red, olive, and teal.

Modern CSS now supports a much greaterrange of named colors, with over 150 catered for. These include the original 16, plus colors like “orange,” “cornflowerblue,” and “rebeccapurple.”

rebeccapurple has a poignant history, acting as a memorial to the daughter of the renowned web designer, Eric A. Meyer.

Examples of CSS named colors: gray, darkgray, and lightgray. Notably, darkgray is lighter than gray—but darker than lightgray.

Naturally, with such a large set, some of the names get a little obscure and can be difficult to remember. They can even be downright confusing. For example, three of the available colors are gray, darkgray, and lightgray. But, while lightgray is indeed the lightest of the three, darkgray and gray are the opposite of what you might expect, with the former actually lighter than the latter.

Even if you look up color names before using them, it’s easy to forget what they mean at a later date. Some IDEs may help by showing inline color previews in your CSS files, but in general, it’s best to use named colors for testing and simple prototyping. For production designs, there are better options.

Red, green, and yellow colors defined in CSS using hexadecimal notation.

3Hexadecimal Color Values

Under the hood, all the color values discussed so far have equivalents in the sRGB color space that you can represent using hexadecimal numbers. These identify colors in 24-bit RGB, so each component (red, green, blue) has an 8-bit value which can represent 0-255. For example, “yellow” is equivalent to #ffff00, which is a value of 255 for red and green, with a 0 value for blue.

There are several different ways you’re able to write hexadecimal values. The first is a shortcut that takes advantage of repeated hexadecimal numbers. If the three pairs are all repeated values, you can shorten the overall value to 3 numbers. For example, #ff66aa can be shortened to #f6a.

An element with a background color set to the CSS symbolic color value, highlight. Half of it is highlighted, along with other text, to show that the highlight colors match and that, when they overlap, macOS introduces a darker color.

Another alternative involves supplying a fourth component that represents alpha transparency. This value also runs from 0 to 255, so #ff000080 is red at exactly 50% opacity.

Finally, you’re able to combine the shorthand and alpha syntaxes for a fourth variation. So #fffe is a near-completely transparent white.

Three elements with their border-color set to currentcolor so that it matches each one’s color: red, green, and blue, respectively.

The A-F letters used to represent colors in hexadecimal are case-insensitive. This means you can use #bbb or #BBB as equivalents; the choice is entirely your personal preference.

4The rgb() Notation

The previous section covered hexadecimal representations of the color channels from 0 to 255. If you prefer to work in decimal rather than hexadecimal, there’s a notation that looks a bit like a function that will do the trick:

This value is equivalent to #f00. It’s a little longer, but you may find it easier to read. You can also use comma separators between each number for legibility:

Five images of an octopus hatchling getting progressively more greyscale.

And, as with hexadecimal notation, you’re able to supply a fourth component, the alpha transparency:

Note that this time round, transparency goes from 0 to 1, so that 0.5 represents 50% transparency (80 in hex). You can also use a percentage for each of the first three components:

A large image of a parrot with three copies underneath, each with a different CSS filter function applied: brightness, sepia, and invert.

5hsl() and hwb()

So far, the color values we’ve covered have all used the RGB color model, either in hexadecimal or decimal notation. However, there are other color models available, like HSL and HWB.

The HSL model stands for Hue, Saturation, and Lightness. In this model, hue is a bit like a base color (red, orange, etc.) while saturation approximates that color’s intensity, and lightness describes how bright or dark that color appears. You can use hsl much like rgb:

Three types of CSS color gradient: linear, radial, and conical.

The difference here is in the units. Hue is measured in degrees, while saturation and lightness are percentages. You’ll probably only use this notation (and the next) if you’re a professional designer, used to working with different notations. The RGB notation is a bit more intuitive than HSL, for most of us.

Meanwhile, HWB—Hue, Whiteness, and Blackness—is a very similar concept; it represents the base hue alongside the amount of white and black in the final color. Generally speaking, as the white and black values increase, the color becomes more gray and muted. Again, you’ll only really benefit from using this notation in CSS if you’re already using it: in a separate graphics program or via a design team, for example.

Unlike the rgb and hsl notations, hwb does not support the legacy syntax that uses comma separators.

6System Colors and Other Types of Symbolic Color

So far, we’ve seen color values that are fixed: they identify a specific point of color to replicate. But there are times when you may want to refer to a variable color that has meaning beyond its specific value on the spectrum. These symbolic colors may change over time or in different environments, so you use them for their meaning rather than their particular color.

As an example, take the color that your computer uses as a background to highlight selected text. In CSS, you can refer to this color simply as “highlight,” so you can use it in your own styles like this:

This is useful if you want to mimic the appearance of selected text for other types of content, or to demonstrate what selected text might look like. Using the system color ensures the reader gets a consistent experience, aiding usability and reducing confusion.

Interestingly, macOS caters to text selection on top of this background color and subtly adjusts the color to ensure it still provides contrast:

You shouldn’t rely on this behavior, though, so beware that using system colors might be confusing in some contexts.

Another example of a symbolic color is currentcolor. This value refers to the value of an element’s color property, so you may use it to match other properties, like border-color:

7The filter Property and Filter Functions

CSS functions are getting more and more powerful, with many that support color manipulation of one type or another. Using filter functions, you’re able to apply sophisticated algorithms to the colors in an image:

The above CSS converts the image halfway to grayscale. you’re able to understand the effect of the percentage by looking at some examples:

Other filter functions are available, and you can radically alter the colors in an image with them:

8Other CSS Functions

CSS functions can be very powerful, and their scope increases as the language develops. Effects that used to only be possible with images can now be produced directly in the browser, and easily changed, even dynamically. One whole class of interesting functions lets you use color gradients, which slowly merge from one color into another.

The gradient functions differ in their shape: linear, radial, or conical.

Another interesting function is light-dark(). This takes two color parameters and uses the first if the current color scheme is light, the second if it’s dark. Here’s how you use it:

With this CSS, the resulting page will use an appropriate color scheme to match light or dark mode, whichever is in use:

Note that the CSS here just defines the body color, so link color is unaffected; the browser sets blue/purple colors for links by default. Remember to override colors in these situations if you want them to differ in light/dark modes.