CSS Color Basics

Using color in CSS (short for cascading stylesheets) is actually pretty easy. In this tutorial we'll show you how to use all the various color formats in CSS, including Hex color codes, HTML color names, and RGB and HSL values. If you're new to CSS, just search intro to CSS, there are lots of great tutorials out there.

How to use Hex color codes in CSS

Hex color codes are the most common method of adding color to an HTML element using CSS. In your stylesheet, you can use the CSS color property to change the default color of your website's text.

CSS
/* In your .css stylesheet */
body { color: #FF0000; }

A second option is to include the CSS styles right in the <head> of your HTML document using <style> tags, like below:

HTML
<!-- In your HTML document -->
<head>
  <style>
    body { color: #FF0000; }
  </style>
</head>

Easy, right? You can use the CSS color property with a Hex code on just about any HTML element, the <body> tag is only one example. Go crazy!

How to use HTML color names in CSS

HTML color names are another way to style your content in CSS, and can often be easier to understand. You can use a color name in the same way as a Hex color code, setting it as the value for the CSS color property in your stylesheet.

CSS
/* In your .css stylesheet */
body { color: red; }

Currently 140 color names are supported across all modern browsers, and we've put together a nice list of them all here for quick reference.

How to use RGB color values in CSS

RGB, which stands for Red, Green and Blue, is a color system commonly found in many design applications and technologies, and more recently has become a go-to for web designers and programmers alike. In CSS, RGB colors can be used by wrapping the values in parentheses and prefixing them with a lowercase 'rgb'.

CSS
/* In your .css stylesheet */
body { color: rgb(255, 0, 0); }

One of the benefits of using RGB in your CSS is the ability to control the opacity in addition to the color. Adding an 'a' to the rgb() prefix enables a fourth value to be assigned which determines transparency of the color on a scale of 0 to 1. In this example, HTML page text would render at 50% opacity since 0.5 is halfway between 0 and 1.

CSS
/* In your .css stylesheet */
body { color: rgba(255, 0, 0, 0.5); }

If you want to use RGB but are not sure where to start, check out our color picker to quickly generate some color codes.

How to use HSL color values in CSS

You may have heard of HSL, which stands for Hue, Saturation and Lightness, another color system used in many applications. Hue is measured in degrees from 0 – 360, while Saturation and Lightness use a scale of 0% – 100%. In CSS, HSL can be easily implemented following a syntax similar to RGB but prefixed instead with 'hsl'.

CSS
/* In your .css stylesheet */
body { color: hsl(0, 100%, 50%); }

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

CSS
/* In your .css stylesheet */
body { color: hsla(0, 100%, 50%, 0.5); }

Note, rgba(), hsl() and hsla() are relatively new additions to CSS, and are not supported by some older browsers. Depending on your situation, you may want to select different methods for manipulating the opacity of your colors.