How To Use Color Values With CSS | DigitalOcean

Applying Colors With Hexadecimal

The hexadecimal, or hex, color value is the most common method of applying colors to elements on the web. In this section, you will use hex colors to redefine and adjust the visual style of the content.

It is important to have an understanding of what the hexadecimal system is and how it works. Hexadecimal is a base 16 valuation system that uses 0-9 as their numerical values and the letters a-f as values ranging from 10-15. The hex values are used to control each of the primary colors (red, green, and blue) in intensity from 0, represented as 00, up to 255, represented as ff. The hex value follows a # to indicate that the color type is a hex color code, then two digits for each color channel, starting with red, then green, then blue.

Hexadecimal color codes can be written in two ways. The first is the long form, which is more common and more detailed, containing six digits, two for each color channel. An example of this is yellow created with #ffff00. The second way of writing a hex color code is a short form, which can be written with only three digits that the browser will interpret as a doubling of each single value. In the short form, yellow can be created with #ff0. The short form hex color value allows for a quicker, but more limited palette if used exclusively.

To begin using hex color codes, open up styles.css in your text editor and go the article element selector. For the background-color property value, use #f0f0f0, which is a very light gray. Next, for the border properties color value, use the short form hex code of #ccc, which is a middle gray. Finally, for the main text color properties, use the dark gray short form hex code #444:

styles.css ... article { ... background-color: #f0f0f0; border: 0.25rem solid #ccc; color: #444; } ...

Note: When working with text content, it is important to maintain a good color contrast between a background-color and the text color value. This helps the readability of the text for a broad range of readers and website users. To learn more about the importance of accessible color contrast ratios, watch this Designing with Accessible Color Contrast on the Web video series. Also, this contrast calculator provided by WebAIM is a great tool to test if your colors provide enough contrast to make text readable for an inclusive audience.

Next, you will set the h1 color value to a dark red. Go to the h1 selector in your styles.css file and update the color property to have a value of #900, which turns on the red channel to about the midpoint and leaves the green and blue channels off:

styles.css ... h1 { ... color: #900; } ...

Carrying on with the red values, update the hr color properties to match the h1 element. Set the border property color to #bd0000, which requires the long form hex code, since the color is a value between #b00 and #a00. Then, set the background-color to a full red value with #f00. This is the hex value equivalent of the red keyword:

styles.css ... hr { ... border: .25rem solid #bd0000; background-color: #f00; } ...

Lastly, to carry on with the footer text being a lighter version of the main text, go to the footer property and change the color property to be a middle gray of #888:

styles.css ... footer { ... color: #888; } ...

Save your changes to styles.css and return to your browser to refresh index.html and review your changes. As is shown in the following image, the article container is now comprised of several gray colors with the heading and rule line variations of red:

In this section, you used several hexadecimal color code values to define colors throughout the styles.css styles document. In the next section, you will translate these hexadecimal values to a more legible numeric value with the rgb() color code.