CSS Color Basics

Applying color with CSS (short for Cascading Style Sheets) is quite straightforward. This guide will show you how to use every color format in CSS, including HEX codes, HTML color names, and RGB/HSL values. If you're new to CSS, searching for an intro to CSS will provide many excellent tutorials.

How to use HEX color codes in CSS

HEX codes are the most widely used method for applying color to an HTML element with CSS. In your stylesheet, you can use the CSS color property to alter the default color of your website's text.

A second method is to embed the CSS styles directly in the <head> of your HTML document with <style> tags, as shown below:

Simple, right? You can apply the CSS color property with a HEX code to almost any HTML element; the <body> tag is just one possibility. Get creative!

CSS

body { color: #FF0000; }

HTML

<head>
  <style>
    body { color: #FF0000; }
  </style>
</head>

How to use HTML color names in CSS

HTML color names offer another way to style your content in CSS and are often easier to interpret. You can use a color name just as you would a HEX code, by setting it as the value for the CSS color property in your stylesheet.

There are currently 140 color names supported across all modern browsers, and we've created a useful list of them all here for quick access.

CSS

body { color: red; }

How to use RGB color values in CSS

RGB, which stands for Red, Green, and Blue, is a color system often found in design software and has become a primary choice for web designers and developers. In CSS, RGB colors can be applied by wrapping the values in parentheses and prefixing them with 'rgb'.

A key benefit of using RGB in your CSS is the ability to manage opacity in addition to color. Adding an 'a' to the rgb() prefix allows a fourth value to be set, which controls the color's transparency on a 0 to 1 scale. In this example, the HTML page text would have 50% opacity since 0.5 is the midpoint between 0 and 1.

If you'd like to use RGB but are not sure how to start, visit our color picker to generate some color codes quickly.

CSS

body { color: rgb(255, 0, 0); }

CSS

body { color: rgba(255, 0, 0, 0.5); }

How to use HSL color values in CSS

You may know of HSL, which represents Hue, Saturation, and Lightness, another color model used in many programs. Hue is measured in degrees from 0 to 360, while Saturation and Lightness are on a scale of 0% to 100%. In CSS, HSL can be implemented easily with a syntax like RGB but prefixed with 'hsl'.

Likewise, HSL supports an alpha channel to manage the color's transparency. Its application is identical to RGB, with a fourth value between 0 and 1 enabled when using the 'hsla' prefix.

Note that rgba(), hsl(), and hsla() are newer additions to CSS and are not supported by some older browsers. Depending on your project's needs, you might have to choose other methods for handling color opacity.

CSS

body { color: hsl(0, 100%, 50%); }

CSS

body { color: hsla(0, 100%, 50%, 0.5); }

HEX

RGB

HSV