Colors in CSS

In CSS, there are many ways to define colors. We'll look at 4 popular ways to do so in this section.

Method 1: by name

There is a long list of colors that are known to all browsers by name, and these colors can be directly assigned as color values for properties like color (color of the text) or background-color. Of course there are the more "common" colors like red, orange, black, white or green, but there are also many variations and shades like coral, cornflowerblue, limegreen and whitesmoke. The full list of these colors can be found here, and there are nearly 150 of them.

Note that quotation marks must not be present around the color values when assigning them: color: red; is correct, but color: "red"; is invalid.

Method 2: by hexadecimal code

To understand this, we need to understand how colors are represented.

Representation of colors in browsers

A color on the screen is actually a combination of 3 main colors: red, green and blue. Combining different "strengths" or "intensities" of these colors leads to a different color that is rendered on screen. The lower the intensity, the darker the shade of the color and the less prominent it is.

The intensity is a decimal integer that ranges from 0 to 255 (and no higher or lower). This is then converted into hexadecimal (a number system with 16 digits: 0 to 9, then a-f for 10-15 respectively) which reduces it to two digits.

0 as a decimal integer is 00 in hexadecimal, and 255 as a decimal integer represented by ff. There are online conversion calculators to convert decimal to hexadecimal and vice-versa, like this one

The 3 intensities are then combined into one 6-digit hexadecimal value, which is used to represent the color. The red intensity comes first, followed by green, then lastly blue.

When assigning hexadecimal code colors as color values, a # symbol is prefixed before the 6-digit hex value. Note that again quotation marks need to be omitted.

Format of color: #rrggbb

Examples:

If you want pure red, then you max out the red value and minimize the green and blue. This means that the red value is 255 and the green and blue are both 0. Since 255 in decimal is ff in hex, the color code for pure red becomes #ff0000

The same can be done for pure blue and pure green.

In HTML, if all the values (red, green and blue) are maxed out, then you get the color white: #ffffff

On the other hand, removing all color leaves black: #000000

More generally, if the intensities of red, green and blue are equal to each other you end up with a shade of grey. The lower the intensities, the darker the shade.

Here are some more examples:

• Yellow is max red, max green, no blue: #ffff00

• Orange is max red, little less green, no blue: #ffa500

• Violet is medium red, no green and max blue: #7f00ff

Back to CSS

Coming back to CSS color values, you can assign the 6-digit hexadecimal value to a property the same way to assign a color by name. For example: color: #7f00ff; (violet, as above).

There are online HTML color pickers, and some IDEs (like Visual Studio Code) provide ways to visualise a color using its hex code while you write CSS, so there is no need to memorize color codes. Additionally, if there is a font color or some such color on a website that you like, you can use the Browser Inspector to select the element and read its styling rules to see what its color code is.

The end of the page will show another way to pick a color from a page using the Eyedropper.

Method 3: the rgb function

While hex codes provide a lot of flexibilty and control over the precise shade of color that you want to use, they are rather unintuitive. CSS provides the rgb function, which takes in 3 arguments and returns a color value. The arguments are integers from 0 to 255 and are the red, green and blue values (left to right). They are slightly easier to use than the direct hex codes, and are supported by all browsers.

To represent the color violet as above, I would write: color: rgb(127, 0, 255);

Again, there are color pickers online that can be used to find the RGB values for particular colors and color palettes.

Method 4: the rgba function

This performs like the rgb function but it takes an additional argument. This argument is a decimal number between 0 and 1 inclusive, and indicates the opacity of the color. 1 means the color is fully opaque and 0 means the color is fully transparent.

Usage: color: rgba(127, 0, 255, 0.6);

Full list of CSS color values

Here's a full list of color values accepted by CSS.

The Eyedropper

Firefox has a tool called the Eyedropper that, when active, can pick out the exact html color code of anything present on a webpage. To use this, open up the Browser Inspector and find the dropper icon at the top right corner of the html window (see below).

The Eyedropper is highlighted by a white circle in this picture

Alternatively, you can customize the Firefox toolbar to add the Dev Tools menu with the Eyedropper.

Now click on the icon and you'll have the Eyedropper active. It takes control of your cursor and shows you the exact hexadecimal color code of the pixel your cursor is on. If you click while it is active, it copies the color code to your clipboard and deactivates (returning your cursor to normal). To deactivate it without copying the color code, press the esc key.

Here's how it works (note that I have customized my toolbar to have the Eyedropper and Developer tools accessible from there without using the keyboard shortcut):

Later we'll see use the color picker to choose a suitable background color for our html document.

Next steps

Next, we'll see how measurements in CSS work and what valid measurement values can be assigned to elements.