CSS Colors: What You Need to Know About HTML, Hex, RGB & HSL Color Values

Color is an essential part of website design. It can influence what visitors click on, how they read text, and how they feel navigating around your site.

While using color effectively requires practice and knowledge of color theory, adding it to your website is easy thanks to the CSS color and background-color properties.

There are several ways to define these properties. You can use HTML color names, hex color codes, RGB color codes, or HSL color values to change the text color or background color of a web page. Let’s take a closer look at these different methods below.

HTML Colors in CSS

Using HTML colors is one of the easiest methods for adding color in CSS. That’s because HTML colors are represented as color names, rather than a series of numbers.

There are currently 140 color names supported by modern browsers. Orange, gold, cyan, maroon, and skyblue are just a few examples. You can find the full list here.

Let’s look at an example. Say you want to change a paragraph of text to red. You’d use a CSS selector to target the paragraph and define the color property with the HTML color name “red.”

Here’s the CSS:

 
p {

color: red;

}

Here’s the HTML:

 
<h2>Using HTML Color Names in CSS</h2>

<p>To change the color of this paragraph to red, define the CSS color property with the HTML color name "red."</p>

Here’s the result:

This seems easy enough, right?

However, using HTML color names is not recommended. For one, they’re difficult to remember beyond the standard rainbow. Yes, red, yellow, and navy are easy to memorize, but what about OldLace? Mocassin? The 100+ others?

Secondly, while 140 color names is a lot to memorize, it’s a small number when you consider how many colors, shades, and hues exist in the world. Using HTML color names will therefore limit your color combinations and ability to create a website color scheme.

Finally, and most importantly, HTML color names introduce imprecision. Your ivory may be another person’s white, which may be another’s seashell — and so on.

To avoid this imprecision online, you can use color codes, rather than names. Let’s take a look at the most popular formats below.

Hex Color Codes in CSS

Hex color codes are composed of a hashtag and three pairs of characters that represent the intensity of the three primary colors (red, green, and blue). Possible values range from 00 (the lowest intensity of a primary color) to FF (the highest intensity of a primary color).

Every hex code consists of six characters in total. These six characters can be any combination of ten numerals (0-9) and six letters (a-f). That means there are 16,777,216 possible combinations in total. Let’s walk through a few combinations below.

To create white, you have to mix each of the three primary colors at their full intensity. That means the Hex color code of white is #FFFFFF. Since black is a lack of primary color, its hex color code is #000000. To create blue, you want the highest intensity of blue and the lowest intensity of the other two primary colors. The hex code of red would therefore be #FF0000.

The diagram below shows a few other hex color codes.

Obviously, memorizing 16,000 hex color codes is out of the question. That’s where online tools like HTML Color Codes’ Color Picker come in. With this tool, you can click and drag your cursor inside the “picker area” on the right. Its Hex (as well as its RGB and HSL values) will appear at the top. Take a look at the demo below.

Image Source

Let’s look at an example. Say you want to change the background of a web page to the shade of blue above. You’d use a CSS selector to target the body and define the background-color property with the hex color code #69EAFF.

Here’s the CSS:

 
body {

background-color: #69EAFF;

}

Here’s the HTML:

 
<h2>Using Hex Color Codes in CSS</h2>

<p>To change the background color of this page to a shade of blue, define the CSS color property with the hex color code #69EAFF.</p>

Here’s the result:

RGB Color Codes in CSS

RGB is another color model based on the combination of the primary colors — hence, the shorthand for Red, Green, Blue. RBG color codes are composed of three numbers separated by commas. Each number represents the intensity of the respective primary color as an integer between 0 and 255. These numbers are then wrapped in parentheses and preceded by a lowercase “rgb.”

So rgb (0, 0, 0) is black, rgb (255, 0, 0) is red, and rgb (0, 0, 255) is blue.

The major benefit of using RGB color codes is that you can not only control the color of an element — you can also control the opacity of that color. To do so, you simply add an “a” to the rgb() prefix and a fourth value inside the parentheses. Ranging from 0 to 1, this value sets the transparency of the color. 0 is completely transparent and 1 is completely opaque. So the value 0.5 would render the color at 50% opacity.

Let’s look at an example. Say you want to change the background color of a heading and paragraph on your page. You want both elements to have the same background color. To ensure the heading is more eye grabbing, however, you’ll set the background color of the paragraph to be 30% opaque.

Here’s the CSS:

 
h2 {

background-color: rgb(150,100,255);

}

p {

background-color: rgba(150,100,255,.3);

}

Here’s the HTML:

 
<h2>Using RGB Color Codes in CSS</h2>

<p>To change the background color of this page to a shade of blue, define the CSS color property with the hex color code #69EAFF.</p>

Here’s the result:

HSL Color Values in CSS

If you’d like to control hue, saturation, and lightness as well as the transparency of color, then you can use the color system HSL.

HSL is formatted similarly to RGB color codes. It is composed of three numbers separated by commas. These numbers are then wrapped in parentheses and preceded by a lowercase “hsl.” You can also add an “a” to “hsl” and a fourth value between 0 and 1 in parentheses to set the transparency of the color.

However, unlike RGB color codes, the first three numbers of an HSL color value do not represent the intensity of the respective primary color. Instead, these three numbers represent Hue, Saturation, and Lightness. Hue is measured in degrees on a scale of 0 – 360. Setting hue to 0 or 360 is red, 120 is green, 240 is blue. Saturation and Lightness are measured in percentages on a scale of 0 – 100. Saturation set to 0% is a shade of gray and 100% is the full color. Lightness set to 0% is black and 100% is white.

Let’s look at an example. Say you want to change the headings on the page to different shades of red. Then you could use the same hue value, 0, and simply change the saturation and lightness values. For the last heading, we can also add a fourth value to make it trsnaprent.

Here’s the CSS:

 
h2 {

color:hsl(0,100%,50%);

}

h3 {

color:hsl(0,100%,75%);

}

h4 {

color:hsl(0,100%,25%);

}

h5 {

color:hsla(0,60%,70%, .5);

}

Here’s the HTML:

 
<h1>Using HSL Color Values in CSS</h1>

<p>To change the hue, saturation, or lightness of an element, define the CSS color property with an HSL value.</p>

<h2>Red</h2>

<h3>Light red</h3>

<h4>Dark red</h4>

<h5>Pastel and transparent red</h5>

Here’s the result:

Color Gradients in CSS

We have only discussed how you can make the background of an element or entire page a solid color. But you can also make it a gradient. A gradient shows one gradually changing into another color (or multiple) in a certain direction like top to bottom, left to right, or diagonally.

To create a gradient, you have to specify at least two color stops. But you don’t have to specify just two. You can specify as many as you want, in any format you want.

Say you want to create a rainbow gradient moving left to right. First, create a div in HTML. You don't have to put anything inside the div element. You can just leave it empty and then style it with CSS.

To create the gradient effect, use the shorthand “background” property in CSS and set the property to “linear-gradient.” You can then specify as many color stops as you want in parentheses. You can use any combination of HTML color names, hex color codes, RGB color codes, and HSL color values. Below we'll use five color stops.

Here’s the CSS:

 
div {

  height: 100px;

  background:

    linear-gradient(

      to right,

      rgb(252, 164, 213),

      red,

      #FACA2E,

      green,

      hsl(240, 95%, 58%)

    );

}

Here’s the HTML:

 
<h1>Creating a Color Gradient in CSS</h1>

<p>To create a color gradient, use the following CSS:

<p>background-image: linear-gradient(direction, color-stop1, color-stop2, ...);</p>

<div>

</div>

Here’s the result:

You can learn more about creating background color gradients in How to Add & Change Background Color in HTML.

Adding Color with Bootstrap CSS

The above examples have assumed you're building your site from scratch. But what if you're using Bootstrap CSS in your project?

Bootstrap CSS is an open-source toolkit that provides pre-designed templates and components so you can build out layouts with important design elements like Bootstrap navbars, Bootstrap buttons, and forms without having to build them from scratch.

But to create a truly custom website that reflects your unique brand identity, you can't simply copy and paste these chunks of reusable code. You’ll want to add custom CSS in an external stylesheet to override Bootstrap CSS's default stylesheet. 

For example, say you want to add a call-to-action button on your site. Then you can use one of Bootstrap's nine default modifier classes, which will automatically create a button with rounded edges and a particular text and background color. For example, the .btn-danger class will make the button red with white font, while .btn-warning will make the button yellow with black font, and so on. Here's a look at all the predefined button styles together. 

Image Source

Let's say you like the size and rounded edges of these buttons, but none of the colors are part of your website's color scheme. In that case, you'll want to use the Bootstrap button class without a modifier class. Then, in your own stylesheet, you can apply a text and background color to your buttons using the CSS properties and values discussed above. 

In the example below, we'll add a button element with the .btn class in the HTML. We'll also wrap this button in a div with the .container class so padding is added on all sides.

Then, using a class selector, we'll define the color and background-color properties with hex color codes for white (#FFFFFF) and a shade of turquoise (#5FBC9F) in CSS.

Here's the CSS:

 
.btn {
color: #FFFFFF;
background-color: #5FBC9F;
}

Here's the HTML:

 
<div class="container">
<h2>Button defined by CSS color property</h2>
<button type="button" class="btn">Click Me</button>
</div>

Here's the result:

You can follow this same process for overriding the default styling of other Bootstrap elements, like navbars, tables, grids, and more. 

Adding Color with CSS

In CSS, you can change the text and background color of your web page or different elements on the page. To do so, you just need some familiarity with the color names and codes above. Depending on the code you use, you can not only experiment with solid colors. You can also change the transparency, hue, saturation, and lightness of the colors on your website. Such basic web design knowledge can help you create a truly custom site.