CSS Colors

💡 The Concept

CSS colors can be written in several different formats, giving you flexibility and precision when defining color values in your code. When adding colors to a website, you will most frequently use a hexadecimal value. But CSS gives you several ways to specify color. In this lesson we will cover named colors and hexadecimal (hex) color codes. Named colors are the easiest for practicing CSS, but in live web development you will usually use hexadecimal numbers. This lesson covers named colors and hex codes. RGBA colors, which add transparency control, are covered in the next lesson.

Method 1: CSS Color Names

The simplest way to add color is to use a named color, like “blue”, “pink” or “hotpink”. CSS recognizes 147 predefined color names that all modern browsers support.

This graphic shows all of the color names. Click the graphic to see all the colors in a larger font:

Named colors are perfect for quick prototyping and experiments because they are easy to read and remember. However, 147 options is a limited palette when you are trying to match a specific brand color — that’s where hex comes in.

Method 2: Hexadecimal (Hex) Colors

Hexadecimal color codes are the workhorse of web design. A hex code is a six-character string preceded by a hash symbol (#). It represents a color by mixing red, green, and blue channels — each defined by a two-digit hex number ranging from 00 (none) to FF (maximum).

Mixing three channels in different proportions gives you access to over 16 million colors — far more than the 147 named options.

Shorthand Hex

When each pair of digits is identical, you can use a three-character shorthand:

/* These pairs are identical */
color: #FF6600;          color: #F60;
color: #000000;          color: #000;
color: #FFFFFF;          color: #FFF;

Where to Find Hex Codes

You will rarely memorize hex values — you just need to know where to look them up. This course has two tools built just for that. The Simple Hexadecimal Color Picker lets you pick any color and instantly get its hex code. The CSS Color Name Picker shows you all the named CSS colors in one place. Both are on your Tools of the Trade page — bookmark it if you have not already.

🎬 Video Demonstration

This video demonstrates how to find hex color values and apply them to your page:

Exercise: Try It Yourself

Open JSFiddle.net and follow the steps below. For your colors, open the Hex Color Picker and choose your own — do not use the same colors shown in the screenshot!

Step 1. In the HTML panel, type:

<h1>Hello CSS!</h1>

Step 2. Go to the Hex Color Picker and choose a background color you like. In the CSS panel, add:

body {
  background-color: #your-hex-color;
}

Step 3. Go back to the Hex Color Picker and choose a color for your heading text. Add:

h1 {
  color: #your-hex-color;
}

Step 4. Click Run and see your result. Try swapping in different colors until you find a combination you like.

❓ Frequently Asked Questions

★ Key Takeaways

Color is one of the first things visitors notice about a website. This lesson covered three ways to set color in CSS: named colors and hex codes. Next, you will learn about RGBA colors, which add a fourth value for controlling transparency. Transparent colors are great for overlays, backgrounds, and subtle design effects.

← Back to CSS Fundamentals Lessons

← Back to All Lessons