RGB vs. HSL: Two Ways to Tell a Computer 'Color'

Why it exists

Computers and humans think about color differently. Computers create color by mixing red, green, and blue light on a screen. Humans perceive color based on its hue, intensity, and brightness. Digital color models provide a structured language to bridge this gap, letting us tell the computer what to display in a predictable way.

The mental model

RGB is for the machine. It's a technical recipe: "mix 214 parts red, 122 parts green, and 127 parts blue." HSL is for the human. It's an intuitive description: "start with a reddish-pink hue, make it pretty saturated, and keep it medium-light." HSL makes it easy to guess what a color will look like and to create variations, like a lighter shade for a hover effect.

How it works

In CSS, RGB is written as rgb(red, green, blue), where each value is 0-255. For example, rgb(214, 122, 127) is a dusty rose. HSL is written as hsl(hue, saturation, lightness). Hue is a degree on the color wheel (0-360), while saturation and lightness are percentages (0%-100%). For example, hsl(30, 82%, 43%) is a deep orange. Both models also support an optional alpha (transparency) channel, from 0 (fully transparent) to 1 (fully opaque).

When to use it

Use RGB when you have an exact color value from a design spec, often provided as a hex code (like #D67A7F), which is just shorthand for RGB. Use HSL when you need to create color systems or themes programmatically. For example, you can easily create a palette by keeping the hue the same and changing the saturation and lightness values. This is great for generating button states (default, hover, active).

When not to use it

Don't rely solely on visual intuition when picking colors, especially for text. The most common error is creating a design with insufficient contrast between the text and its background. This makes your content difficult or impossible for people with low vision to read and fails Web Content Accessibility Guidelines (WCAG). Always use a contrast checker tool.

One canonical example

A button needs a background color and a slightly lighter hover state. Using HSL, you could define the base color as hsl(237, 74%, 33%) (a deep blue). For the hover state, you can simply increase the lightness to hsl(237, 74%, 43%). Trying to calculate the "10% lighter" version of the equivalent RGB color, rgb(21, 33, 142), is much harder and less intuitive.