CSS - Colors

Jun 8, 2026 3:00pm UTC (Check your timezone)

Theory Workshop Lab Review Quiz

Instructors: Jess, Carmen, and Eda

Colors

Download iCal File

Before this session, please:

During this session, we’ll:

After this session, please:

Instructor notes

Working with Colors in CSS: What Is Color Theory in Design?

We can classify colors as primary, secondary, or tertiary.

Primary colors are the fundamental colors that all other colors are derived from. They are:

Secondary colors are derived when mixing two primary colors in equal amounts. They are:

Tertiary colors are the combination of a primary color with a neighboring secondary color. They are:

Other ways we can classify colors are based on their temperature.

Warm colors are, for example, reds, oranges, and yellows.

Cool colors are, for example, blues, greens, and purples.

To represent colors and their relationships, there are some fundamental tools we can use.

A color wheel shows how colors relate to each other.

A color scheme is a set of colors chosen for a specific project.

An analogous color scheme has analogous colors that are adjacent to each other in the color wheel. It creates a cohesive experience.

A complementary color scheme has complementary colors that are on the opposite ends of the color wheel. It creates higher contrast. (In an RGB color wheel, complementary colors are located at the opposite ends of the wheel.)

A triadic color scheme has colors that are approximately equidistant from each other. It has vibrant colors.

A monochromatic color scheme has colors that are derived from the same base color by adjusting its lightness, darkness, and saturation. It evokes the feeling of unity and harmony.

Working with Colors in CSS: What Are Named Colors in CSS, and When to Use Them?

Named colors, such as red, aqua, and blueviolet are recognized by browsers, and they define a convenient way to work with colors.

Here’s all the named colors: https://drafts.csswg.org/css-color/#named-colors

MDN documentation: https://developer.mozilla.org/en-US/docs/Web/CSS/Reference/Values/named-color

Working with Colors in CSS: What Is the RGB Color Model, and How Does the RGB Function Work in CSS?

The RGB (red, green, blue) model is an additive color model, that is, colors are created by combining light at varying intensities.

The intensity of a color can be between 0 (no light) to 255 (full light). For example, black is rgb(0, 0, 0), and white is rgb(255, 255, 255), red is rgb(255, 0, 0), green is rgb(0, 255, 0), and blue is rgb(0, 0, 255).

We can set a color using the rgb() function in CSS:

1p {
2  /* This will be red */
3  color: rgb(255, 0, 0);
4}

There is also rgba() function that has the alpha value to control the transparency, which is between 0 (fully transparent) and 1 (fully opaque).

For example, we can use 0.5 to make the color semi-transparent:

1p {
2  color: rgba(255, 0, 0, 0.5);
3}

The RGB color model is useful for digital media and dynamic designs. A screen display uses red, green, and blue pixels to create the colors, so it directly corresponds to how screens display colors.

Working with Colors in CSS: What Is the HSL Color Model, and How Does the HSL Function Work in CSS?

The HSL (hue, saturation, lightness) model is a color model that is closer to how humans perceive color.

Hue (color type) is an angle on the color wheel and ranges from 0 to 360 degrees. For example, red is 0 degrees, green is 120 degrees, and blue is 240 degrees.

Saturation is the intensity of the color, and it’s represented with a percentage, with 0% being fully desaturated grayscale and 100% being the most vibrant form of the color.

Lightness is how light or dark the color is, and it’s represented with a percentage, with 0% being black, 50% being the normal tone of the hue, and 100% being white.

We can use the hsl() function in CSS to define colors.

Note: The values are usually separated with a space, unlike the rgb() function that has comma-separated values.

1p {
2  /* This will be a bright green */
3  color: hsl(120 100% 50%);
4}

The hsl() function can also have an optional alpha value, which is added after the separator character /.

1p {
2  color: hsl(120 100% 50% / 0.5);
3}

Note: hsla() is another (older) way to add an alpha value (with comma-separated values), such as hsla(120, 100%, 50%, 0.5).

The HSL color model is useful for creating color schemes and creating shades of a color, as it’s more intuitive and shows the intent of the designer/developer more clearly.

Working with Colors in CSS: What Are Hex Codes, and How Do They Work in CSS?

Using hexadecimal, or hex, color values is one of the most common ways to define a color in CSS.

A hex code is a six-character string in base-16 number system.

A hex color value starts with a hash symbol (#), followed by six characters, the first two representing red, the next two representing green, and the last two representing blue.

1color: #RRGGBB;

00 is the lowest intensity, and ff is the highest intensity. For example, red is #ff0000, green is #00ff00, and blue is #0000ff.

If both characters in each color are the same, hex values can be written in shorthand format. For example, instead of #ffffff, we can write #fff.

Working with Colors in CSS: What Are Linear and Radial Gradients, and How Do They Work in CSS?

Gradients are the smooth transitions between colors. We have two different gradients in CSS: linear and radial.

In fact, we’ve seen working with gradients as values for the background property in a previous lesson!

Build a Set of Colored Markers

We’ll take a look at this workshop to strengthen our understanding of colors!

Design a Set of Colored Boxes

We’ll go through this lab exercise to practice using CSS colors!

CSS Colors Review

In this unit, we’ve learned a lot about working with colors in CSS. Here’s a list of concepts explored in lessons and exercises of this unit: