Tutorial
How To Use Color Values with CSS
The author selected the Diversity in Tech Fund to receive a donation as part of the Write for DOnations program.
Introduction
Color is a useful part of design and development when creating websites. It helps set a mood and communicate an aesthetic. Color also helps readers scan and identify content quickly.
With CSS, there are four ways to generate colors, and each has its own unique strength. This tutorial will show you how to use color keywords, hexadecimal color values, the rgb() color format, and lastly the hsl() color format. You will use all four approaches with the same set of HTML to experience how each color format works with the same content. Throughout the tutorial, you will use the color, border, and background-color properties to apply these color formats to the HTML.
Prerequisites
- An understanding of CSS’s cascade and specificity features, which you can get by reading How To Apply CSS Styles to HTML with Cascade and Specificity.
- Knowledge of type selectors, combinator selectors, and selector groups, which you can find in How To Select HTML Elements to Style with CSS.
- An empty HTML file saved on your local machine as
index.htmlthat you can access from your text editor and web browser of choice. To get started, check out our How To Set Up Your HTML Project tutorial, and follow How To Use and Understand HTML Elements for instructions on how to view your HTML in your browser. If you’re new to HTML, try out the whole How To Build a Website in HTML series.
Setting Up the Example HTML and CSS
In this section, you will set up the HTML base for all the visual styles you will write throughout the tutorial. You will also create your styles.css file and add styles that set the layout of the content.
Start by opening index.html in your text editor. Then, add the following HTML to the file:
<!doctype html>
<html>
<head>
</head>
<body>
</body>
</html>
Next, go to the <head> tag and add a <meta> tag to define the character set for the HTML file, then the title of the page, the <meta> tag defining how mobile devices should render the page, and finally the <link> element that loads the CSS file you will make later.
These additions are highlighted in the following code block:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Colors With CSS</title>
<meta name="viewport" content="width=device-width" />
<link href="styles.css" rel="stylesheet" />
</head>
<body>
</body>
</html>
After adding the <head> content, next move to the <body> element, where content will be added from the Wikipedia article on color. Add the highlighted section from this code block to your index.html file in your text editor:
<!doctype html>
<html>
<head>
<meta charset="UTF-8" />
<title>Colors With CSS</title>
<meta name="viewport" content="width=device-width" />
<link href="styles.css" rel="stylesheet" />
</head>
<body>
<article>
<header>
<h1>About Color</h1>
</header>
<p>Color is the characteristic of visual perception described through color categories, with names such as red, orange, yellow, green, blue, or purple. This perception of color derives from the stimulation of photoreceptor cells by electromagnetic radiation. Color categories and physical specifications of color are associated with objects through the wavelengths of the light that is reflected from them and their intensities. This reflection is governed by the object's physical properties such as light absorption, emission spectra, etc.</p>
<hr />
<p>By defining a color space, colors can be identified numerically by coordinates, which in 1931 were also named in global agreement with internationally agreed color names like mentioned above (red, orange, etc.) by the International Commission on Illumination. The RGB color space for instance is a color space corresponding to human trichromacy and to the three cone cell types that respond to three bands of light: long wavelengths, peaking near 564–580 nm (red); medium-wavelength, peaking near 534–545 nm (green); and short-wavelength light, near 420–440 nm (blue). There may also be more than three color dimensions in other color spaces, such as in the CMYK color model, wherein one of the dimensions relates to a color's colorfulness.</p>
<footer>
Adapted from Wikipedia’s article on <a href="https://en.wikipedia.org/wiki/Color">Color</a>
</footer>
</article>
</body>
</html>
The contents are in an <article> tag to define a designated area known as a landmark, which is a part of your design that you are drawing attention to. This element can have its own <header> and <footer> tags. The <header> contains an <h1> tag with the content title, and the <footer> element contains content for citing the source. Between the two <p> tags of the primary content is an <hr /> tag, which is a self-closing tag that creates a horizontal rule line. As a piece of content, the horizontal rule can be used to break up content or to indicate a shift in the content.
That completes the work needed for index.html. Save your changes to the file, then open index.html in your web browser. The webpage will appear like the following image:
Now you will begin working on the base styles needed for this tutorial. Create a file called styles.css and open it in your text editor.
To begin, create a body type selector and add font-famiy: sans-serif to use the browser’s default sans serif font. Then add a line-height: 1.5 to give a default line spacing between text of one and half the font-size:
body {
font-family: sans-serif;
line-height: 1.5;
}
Next, add styles for the <article> element by creating a type selector for it with a margin, padding, width, and max-width, along with a box-sizing: border-box to redefine the Box Model for the <article>. This will make sure the padding value is not added to the full width of the container.
Add the highlighted sections of the following code block for the values for each of the properties:
...
article {
margin: 2rem auto;
padding: 2rem;
width: 90%;
max-width: 40rem;
box-sizing: border-box;
}
First, the margin with a value of 2rem auto will center the article container on the page. The padding of 2rem will give ample space around the container as you add color properties later in the tutorial. The width allows the container to be fluid in width as screen size changes, until it reaches the max-width value of 40rem (which is equivalent to 640px).
Next, write an h1 type selector and give the element a font-size of 2rem. Then, add a margin of 0 0 1rem to remove the default margin-top and provide a new value for the margin-bottom. Lastly, center the text by adding a text-align: center; to the selector block:
...
h1 {
font-size: 2rem;
margin: 0 0 1rem;
text-align: center;
}
Next, you will apply some base styles to the <hr> element. The browser defaults for the <hr> element create a box with no height, full width, and a border. Although this container is self-closing and does not contain content, it can accept a lot of styles.
Start by giving it a height value of 0.25rem. Then, add a margin property of 2rem auto to create space above and below the <hr> and to center the element. Add a width: 90%; with a max-width: 18rem; so the <hr> element is always smaller than the article container and never larger than 18rem. Finally, use the border-radius property to round the ends of the <hr> element with a value of 0.5rem:
...
hr {
height: 0.25rem;
margin: 2rem auto;
width: 90%;
max-width: 18rem;
border-radius: 0.5rem;
}
Finally, create a footer selector block and add a margin-top property with a value of 2rem, followed by a font-size of 0.875rem:
...
footer {
margin-top: 2rem;
font-size: 0.875rem;
}
Save your changes to styles.css. Then, return to index.html in your web browser and reload the page. The content is now ready to have colors applied to the base styles. The following image shows how it will render in your browser.
In this section, you set up your HTML in the index.html file and created the base styles in the styles.css file. The next section will introduce you to color keywords, which you will use to apply colors to the content.
Applying Colors With Keyword Values
Starting off with colors on the web, it is helpful to work with the predefined color keywords. In this section, you will use some of the color keywords to apply color to the content of your HTML.
There are well over one hundred color keyword values that have been added to the list over time. The World Wide Web Consortium has an exhaustive list of color keyword values on their Wiki. Color keyword values are useful for throwing together a quick design or identifying and debugging CSS problems, such as by setting the color property to magenta so the element stands out against a muted color palette. The keywords cover all hues with variations of shades and tints of each, including grays.
Begin by going to the article type selector and adding background-color, border, and color properties. For the background-color, use the faint light brown seashell keyword. Give the border a thickness of 0.25rem, a solid style, and for the color use the sandybrown keyword. Lastly, for the color property use the maroon keyword:
...
article {
margin: 2rem auto;
padding: 2rem;
width: 90%;
max-width: 40rem;
box-sizing: border-box;
background-color: seashell;
border: 0.25rem solid sandybrown;
color: maroon;
}
...
Save your changes to styles.css and return to you browser to refresh the index.html page. The page will now have a visually defined article area with a light brown background color and a slightly darker brown thick border. The text content will be a dark red, and may appear more as a dark brown in the context of the other brown colors. The following image shows how the page will appear in your browser:
Next, return to styles.css in your text editor. Go to the h1 selector and add a color property. Using a complementary color of brown hues, add the teal keyword for the color property value:
...
h1 {
font-size: 2rem;
margin: 0 0 1rem;
text-align: center;
color: teal;
}
...
Now, carrying on with the concept of complementary colors, go to the hr element and add a border property of 0.25rem solid teal. After that, add a background-color property with the keyword darkturquoise as the value:
...
hr {
height: 0.25rem;
margin: 2rem auto;
width: 90%;
max-width: 18rem;
border-radius: 0.5rem;
border: 0.25rem solid teal;
background-color: darkturquoise;
}
...
Save these changes to your styles.css file and refresh index.html in your browser. The <hr> element between the two paragraphs will have a thick teal border with a lighter teal color inside, as shown in the following image:
Next, return to your text editor and go to the footer selector in your styles.css file. Here, add a color property and use chocolate as the value:
...
footer {
margin-top: 2rem;
font-size: 0.875rem;
color: chocolate;
}
Save your changes to styles.css in your text editor, then return to your browser and refresh index.html. Your browser will render chocolate as a lighter brown hue than maroon, but not as light at the saddlebrown border:
Before returning to your code editor, take note of the color of the link in the <footer> element. It is using the default browser color for a link, which is blue, unless you have visited the link, in which case the color is purple. There is a special value for color you will now use called inherit, which instead of defining a specific color uses the color of its parent container, in this case the <footer>.
To use the inherit value on a color property, return to styles.css in your text editor, and after the closing tag for your footer selector, add a new combinator of footer a to scope the styles to <a> elements inside of <footer> elements. Then, add a color property with a value of inherit, so the <a> will inherit the color value set on the footer, as shown in the highlighted section of the following code block:
...
footer a {
color: inherit;
}
Save your changes to the styles.css file and refresh index.html in your web browser. The <a> is now the same color as the other footer text and retains the underline, which distinguishes the text as a link. The following image shows how this will appear in your browser:
Note: The inherit value only works on colors that can accept the foreground color value, such as border-color and color. Other properties, such as background-color or box-shadow, can access the defined color value with a special value called currentColor. It works the same way as inherit, but for instances where inherit is not a valid value.
You used color keywords in this section to set several colors of varying contrasts to the content. You also used the inherit value to reuse a color value without explicitly defining a value. In the next section, you will use the hexadecimal color code system to adjust the colors of the content.
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:
...
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:
...
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:
...
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:
...
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.
Applying Colors With rgb()
Where the hexadecimal color values are defined with a limited number of alphanumeric values, rgb() uses numeric only values ranging from 0 to 255 for each primary color channel. Using only numerical values for these allows for a much quicker comprehension of the colors created by the rgb() format than by the hexadecimal.
Like the hexadecimal format and the structure of the rgb() format indicate, the colors are represented within the parenthesis as the red channel value, green channel value, and then blue channel value. A black color formatted in rgb() is rgb(0, 0, 0), while a white is formatted as rgb(255, 255, 255). This also means a full red color is rgb(255, 0, 0), while a full green is rgb(0, 255, 0), and so on.
To begin refactoring your code to use rgb() values instead of hexadecimal values, it can be helpful to use a HEX to RGB converter, such as this HEX to RGB converter embedded in the Duck Duck Go search engine. Using a mathematical approach, the numerical value can be decoded using the hexadecimal value for each channel. In the case of a hex code for the red channel being fe, this means that the f indicates 15 iterations of 16 counts from 0-15, making the f equal to 16×15, or 240. The e of the hexadecimal fe is equal to 14 in the base-16 sequence. Add these two values together and the red channel for the rgb() value is 254.
This chart will help you identify the values of each hexadecimal value to convert them to their numerical value needed for rgb(). The first row is the value for the first character in the hexadecimal sequence, which is the hex value multiplied by 16. The second row is the value for the second character in a hexadecimal sequence, which is the hex value multiplied by 1:
| Calculation | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | a | b | c | d | e | f ------|------|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|-----|----- First Hex Digit| x*16 | 0 | 16 | 32 | 48 | 64 | 80 | 96 | 112 | 128 | 144 | 160 | 176 | 192 | 208 | 224 | 240 Second Hex Digit| x*1 | 0 | 1 | 2 | 3 | 4 | 5 | 6 | 7 | 8 | 9 | 10 | 11 | 12 | 13 | 14 | 15
Open your styles.css file and go to the article selector block in your text editor. Identify the background-color property with the value of #f0f0f0. Using either a conversion tool or the mathematical formula with the chart previous, this will come to be rgb(240, 240, 240), since the f in the sequence is in the second position and is equal to 240. Adding these two values together is 240:
...
article {
...
background-color: rgb(240,240,240);
border: 0.25rem solid #ccc;
color: #444;
}
...
Next, for both the border and color values since these are written as the short form, it’s helpful to expand these out to the long form when converting to rgb(). The #ccc short form becomes #cccccc in the long form. That creates a formula of (12 * 16) + 12, which results in 204. Applying that value to each channel, #ccc becomes rgb(204, 204, 204). After applying this new value, as shown in the following highlighted section, the same approach can be applied to the color value of #444, which becomes rgb(68, 68, 68):
...
article {
...
background-color: rgb(240,240,240);
border: 0.25rem solid rgb(204, 204, 204);
color: rgb(68, 68, 68);
}
Next, move on to the h1 and hr color properties. For all three of these properties, the colors only use the red channel, meaning the rgb() will be 0 for the green and blue channels:
...
h1 {
...
color: rgb(153, 0, 0);
}
hr {
...
border: 2px solid rgb(189, 0, 0);
background-color: rgb(255, 0, 0);
}
...
For the h1 color property, the #900 short form is expanded to #990000, and using the chart the 99 sequence can be calculated as (16 * 9) + 9, which equals 153 for a result of rgb(153, 0, 0). Following the same formula for the hr properties, the bd in the border hex value becomes 189. The f in the short form background-color property value is expanded to ff with a result of 255, which is the highest value of a color in both rgb() and hexadecimal color formats.
Continuing to work in your text editor in the styles.css file, identify the footer selector and update the gray used on the color property. Since the value is the short form #888, it can be expanded to #888888, and using the chart and formula, the final value becomes rgb(136, 136, 136):
...
footer {
...
color: rgb(136, 136, 136);
}
...
Save your changes to the styles.css file then reload the index.html file in your web browser. There will be no difference from the previous step with the hexadecimal values as these rgb() values are equivalent.
The hexadecimal and the rgb() formats equate to the same numerical value, but the rgb() format is more human readable, giving it an advantage over the former format. This allows developers to make informed changes faster and to adjust the intensity of a channel to produce a color, such as adding more red to make a color feel warmer.
To demonstrate this, add 5 to the value of the red channel for each of the gray colors in the article and footer selectors. For the article properties, change the background-color red channel to 245, the border red channel to 209, and the color property red channel to 73. Then, change the footer selector’s color property red channel to 141. These changes are shown in the following code block:
...
article {
...
background-color: rgb(245,240,240);
border: 0.25rem solid rgb(209, 204, 204);
color: rgb(73, 68, 68);
}
...
footer {
...
color: rgb(141, 136, 136);
}
...
Save your changes to styles.css, return to your browser, and refresh index.html. The gray colors will become a warmer tint as they have more red than green or blue. The following image shows a comparison between the cooler and warmer gray:
In this section, you learned about the rgb() color format and how to convert hexadecimal color values into numerical values, which can be easier to work with. You also added a bit more to the red channel of a rgb() color format to create a warmer variety of gray colors. In the next section, you will use the hsl() color format, which stands for hue, saturation, and lightness.
Applying Colors With hsl()
Where the hexadecimal and rgb() color formats have a closer connection to the combined values of the primary colors, hsl() uses a color from the color wheel with saturation and lightness levels and to generate a final color.
Like the rgb() format, the hsl() format consists of three values in a comma-separated sequence. The first value is the hue, which is a degree marker on the color wheel. The second value is saturation, which is a percentage value where 100% means full color and 0% means no color, which results in white, black, or gray depending on the value of the final number in the sequence. Lightness is a percentage value that ranges from white at 100% to black at 0%.
The color circle starts at 0 degrees, which is red, and goes around the rainbow to orange, yellow, green, blue, purple, and back to red as the circle completes at 360 degrees. This degree value is the first value of the sequence and can be represented by a number alone or using any of the angle units. The saturation and lightness are both percentage values and require the percent sign to be present, even if the value is 0.
The biggest advantage to using the hsl() format is that colors can be more cohesive and complementary when there are similar values. For example, a monochromatic color scheme can be quickly put together by deciding a hue value and a saturation percentage, then setting all the other colors as variations of lightness. Likewise, colors with a similar saturation level will appear better matched despite the difference in hue or lightness levels.
Converting from hexadecimal or rgb() to an hsl() formatted color is not as straightforward. A color conversion tool can help change values from hexadecimal to hsl().
To begin working with the hsl() color format, open styles.css in your text editor and go to the article and footer selectors. Returning to the gray values from earlier in this tutorial, you can set the hue and lightness values to be 0 and 0%, respectively. Since these are grayscale, only lightness values need to be adjusted:
...
article {
...
background-color: hsl(0, 0%, 94%);
border: 0.25rem solid hsl(0, 0%, 80%);
color: hsl(0, 0%, 27%);
}
...
footer {
...
color: hsl(0, 0%, 45%);
}
...
The background-color is a very light gray, and so it is closer to 100% at 94%. The border value of the article is a bit darker, but still a light gray with a lightness value at 80%. Next, the color value of the article comes in at a much darker 27%. Lastly, the color for the footer text uses a lightness value of 45%, giving a lighter but still readable gray for the citation reference text. Using only the lightness value, a monochromatic gray palette comes together quickly.
Next, move down to the h1 and hr selector blocks. A similar setup will occur as with the article color properties: the hue and saturation values will remain unchanged for the next three properties. The hue value is set to 0 and the saturation is set to 100%, giving a full saturation red. Lightness will once again differentiate these red values:
...
h1 {
...
color: hsl(0, 100%, 25%);
}
hr {
...
border: 2px solid hsl(0, 100%, 35%);
background-color: hsl(0, 100%, 50%);
}
...
The h1 color gets a dark red by having a lightness value of 25%. While the hr will have a darker red border with a 35% lightness value, the background-color gets a pure red by having a lightness value of 50%. As the value goes up from 50%, a red becomes pink until it is white, and lower than 50% a red becomes more maroon until it is black.
Save your changes to styles.css, return to your browser, and refresh index.html to find how your styles appear when written in the hsl() color format. The following image shows how this will appear:
Now, return to your text editor and go to the article and footer selectors in your styles.css file. You will now adjust only the hue and saturation values, but leave the lightness value as is. Set the hue value to 200 on all four color properties across the two selectors. Then, for the color properties on the article selector, set the saturation value to 50%. Finally, set the saturation level for the footer color property to 100%. Reference the highlighted portions of the following code block for how these color values will appear:
...
article {
...
background-color: hsl(200, 50%, 94%);
border: 0.25rem solid hsl(200, 50%, 80%);
color: hsl(200, 50%, 27%);
}
...
footer {
...
color: hsl(200, 100%, 45%);
}
...
Save your changes to the styles.css file and reload index.html in your web browser. As in the following image, the gray color is now a cyan color of varying lightness and saturation. The article colors are more muted due to the 50% saturation, while the footer color is much more vibrant with the 100% saturation.
One of the greatest advantages of working with the hsl() color format is creating complementary color palettes. A complementary color is always on the opposite side of the color circle. Red’s complementary color is green. With red at the 0 degree mark in the hue value, its complement is at the 180 degree mark. In the case of the article and footer colors having a hue value of 200, subtracting 180 will give a complementary hue value of 20, an orange color.
Go to the h1 and hr selectors in the styles.css file in your text editor. For the hue values on each of the color properties, change the hue from 0 to 20 to set the colors from red to the complementary color of orange:
...
h1 {
...
color: hsl(20, 100%, 25%);
}
hr {
...
border: 2px solid hsl(20, 100%, 35%);
background-color: hsl(20, 100%, 50%);
}
...
Save your changes to styles.css and return to your web browser to refresh index.html. With a few modifications to the hue values, a pleasant color palette has come together. The following image shows how this will appear in your browser:
In this section, you used the hsl() color format to create colors using the color theory aspects of hue, saturation, and lightness. You also were able to create a complementary color palette using a formula to get the opposite color on the color circle.
Conclusion
In this tutorial, you used the four methods of defining color on websites with CSS. The keyword color values allow for quick access to predefined colors as outlined by the CSS specifications. Hexadecimal colors are the most common and widely used format that hold a lot of information in a small number of characters. The rgb() color formation converts the values of the hexadecimal value to a more comprehensive format using numeric values in a comma-separated list. Lastly, the hsl() color format allows for the concepts of color theory to be applied to web site development by using the hues of the color circle, saturation, and lightness to create distinctive and complementary color palettes. All four of these formats can be used together on a single website, each playing to their own strength.
If you would like to read more CSS tutorials, try out the other tutorials in the How To Style HTML with CSS series.
Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.
Tutorial Series: How To Style HTML with CSS
Cascading Style Sheets (CSS) is the styling language of the web, and is used to design and control the visual representation of Hypertext Markup Language (HTML) on a web page. With CSS, you can manage everything from font to layout to animations on your web page. This series will lead the reader through CSS exercises that demonstrate the building blocks of the language and the fundamental design principles needed to make a user-friendly web site.
author
Developer
I code, design, write, and teach and I’m an IAAP Certified Web Accessibility Specialist.
This textbox defaults to using Markdown to format your answer.
You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!
Become a contributor for community
Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.
DigitalOcean Documentation
Full documentation for every DigitalOcean product.
Resources for startups and SMBs
The Wave has everything you need to know about building a business, from raising funding to marketing your product.
The developer cloud
Scale up as you grow — whether you're running one virtual machine or ten thousand.
Get started for free
Sign up and get $200 in credit for your first 60 days with DigitalOcean.*
*This promotional offer applies to new accounts only.