Color in CSS — Named Colors, Hex, RGB, and HSL

Color is one of the most immediate ways CSS transforms a page. A single color or background-color declaration can make an element go from invisible text to a branded headline. Before you can apply color intentionally, you need to understand the formats CSS provides — and what each one is actually saying.

Named colors

CSS includes over 140 built-in color keywords that correspond to specific color values:

h1 { color: forestgreen; }
nav { background-color: darkslategray; }
a { color: steelblue; }

Named colors are convenient for quick prototyping and are perfectly readable in code — anyone can understand color: red. They are not recommended for production stylesheets because the exact values are fixed by the CSS spec and not adjustable, and they rarely match a project’s brand palette precisely.

Use named colors to test or sketch, then switch to a more precise format.

Hex codes

Hex codes are the most common color format in production CSS. The format is #RRGGBB, where each pair of characters represents the red, green, and blue channels in hexadecimal (00–FF).

/* STO brand palette */
.site-header { background-color: #2c4a1e; } /* deep forest green */
.hero-heading { color: #f5f0eb; }           /* warm off-white */
.tour-card    { border-color: #d0e8c5; }    /* light sage */

00 is the minimum (none of that channel) and FF is the maximum (full intensity):

#000000 = black (no red, green, or blue)
#ffffff = white (full red, green, and blue)
#ff0000 = pure red

Shorthand: When each pair is a repeated digit (#aabbcc), you can write #abc. So #ffffff becomes #fff and #2c4a1e stays as-is (no shorthand possible).

Where to find hex values: design tools like Figma and Adobe XD copy hex codes directly. Color pickers in browsers, VS Code, and most design systems express colors as hex.

RGB

rgb() expresses color as three decimal values from 0 to 255:

.hero { background-color: rgb(44, 74, 30); }  /* same as #2c4a1e */

rgb() is more readable for some developers because the values map to familiar decimal numbers (0–255) rather than hexadecimal. It is most useful when you need to calculate or interpolate colors programmatically.

rgba — transparency with alpha

rgba() adds a fourth value, the alpha channel, from 0 (fully transparent) to 1 (fully opaque):

/* Semi-transparent dark overlay for a hero image */
.hero-overlay {
  background-color: rgba(0, 0, 0, 0.5); /* 50% transparent black */
}

/* Light green with 80% opacity */
.badge {
  background-color: rgba(44, 74, 30, 0.15);
}

rgba() is the right choice when you want transparency on a single property without affecting the entire element or its children (as opacity would).

HSL

hsl() expresses color as hue, saturation, and lightness:

.site-header { background-color: hsl(100, 45%, 20%); }

Hue (H): a degree on the color wheel, 0–360 (0 = red, 120 = green, 240 = blue)
Saturation (S): how vivid the color is, 0% = gray, 100% = full color
Lightness (L): how light or dark, 0% = black, 100% = white, 50% = true color

HSL is more intuitive than hex or RGB for adjusting colors. To make a green lighter, increase L. To make it less saturated (more muted), decrease S. You can generate an entire tonal palette by fixing H and S and varying L:

/* A full green palette from one hue */
--green-900: hsl(100, 45%, 15%);
--green-700: hsl(100, 45%, 25%);
--green-500: hsl(100, 45%, 40%);
--green-300: hsl(100, 45%, 65%);
--green-100: hsl(100, 45%, 88%);

hsla() adds the same alpha channel as rgba():

.overlay { background-color: hsla(100, 45%, 20%, 0.6); }

Choosing a format

Format	Best for
Named	Quick prototyping, learning
Hex	Fixed brand colors, design handoff
RGB/RGBA	Transparency effects, programmatic color
HSL/HSLA	Design systems, tonal palettes, theming

In practice: use hex for your fixed brand colors, rgba() for transparent overlays, and HSL when building a palette with multiple shades of the same hue.

The analogy: color formats are like different ways to describe the same physical color — a paint manufacturer’s code number, a percentage pigment mix, or a descriptive name like “forest green.” They all refer to the same color, just expressed differently.

Exercise

Define the Summit Trail Outfitters brand palette and apply it to the site:

Open your style.css. At the top, add a comment block defining the STO palette in hex:

/* STO Brand Palette */
/* --forest-dark:   #2c4a1e  (nav, headings, primary actions) */
/* --forest-mid:    #3a5c26  (hover states, borders) */
/* --sage-light:    #d0e8c5  (card borders, badges) */
/* --cream:         #f5f0eb  (nav text, light backgrounds) */
/* --body-text:     #1a1a1a  (default text) */

Apply the palette to key selectors:

body {
  color: #1a1a1a;
  background-color: #fafaf8;
}

.site-header {
  background-color: #2c4a1e;
}

.site-header a {
  color: #f5f0eb;
}

.tour-card {
  border-color: #d0e8c5;
}

h1, h2, h3 {
  color: #2c4a1e;
}

Add a semi-transparent overlay on the hero section using rgba():

.hero {
  position: relative;
}

.hero::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: rgba(0, 0, 0, 0.4);
}

Open the browser and verify the palette is applied consistently across index.html, tours.html, and about.html.

Recap

Named colors (e.g., forestgreen) are readable but fixed — use for prototyping, not production.
Hex codes (#2c4a1e) are the most common format for fixed brand colors.
rgb(R, G, B) uses 0–255 decimal values; rgba() adds alpha transparency (0–1).
hsl(H, S%, L%) expresses color intuitively by hue, saturation, and lightness; ideal for palettes and theming.
Use rgba() or hsla() for transparent overlays without affecting the whole element.

A note on workflow: in this module you will define the STO brand palette using hardcoded hex values at the top of your stylesheet in a comment block. In Module 08 (Styling STO End-to-End) you will convert these to CSS custom properties — a built-in CSS feature that lets you define a value once (e.g. --color-primary: #2c4a1e) and reference it anywhere with var(--color-primary). Change the value in one place and it updates everywhere. For now, keep your hex values in a clearly labeled comment block so they are easy to find when that refactor comes.

Lesson 02 extends color to backgrounds — how to use background-image, control size and position, and build a hero section with a full-bleed cover image.