Colors Models Overview
CSS gives you three main ways to write the exact same color — RGB for mixing light, HEX as a compact shorthand for RGB, and HSL for thinking about color the way humans naturally do — and this page previews all three before we go deep on each.
One Color, Several Spellings
A color model is just a system of numbers for describing a specific color so a computer can reproduce it exactly. CSS doesn't force you to pick one system — it understands several, and you can freely switch between them because they all describe the same underlying colors, just with different math. The three you'll meet constantly are RGB, HEX, and HSL.
RGB: Mixing Light Like a Screen Does
RGB stands for Red, Green, and Blue — the three colors of light that every screen pixel is built from. This is additive color: you start with black (no light at all) and add red, green, and blue light together to build up brighter colors. Add all three at full strength and you get white. Each channel is a number from 0 (none of that light) to 255 (that light at full strength), giving 256 possible levels per channel.
An RGB Color
<!DOCTYPE html>
<html>
<head>
<style>
.sky-panel {
background-color: rgb(70, 130, 220);
}
</style>
</head>
<body>
<div class="sky-panel">Sky Panel</div>
</body>
</html>HEX: RGB Written in Base-16
A hex color code like #4682DC is not a different color system — it's the exact same RGB numbers, just written in base-16 (hexadecimal) instead of base-10, packed into a single compact string. Two hex digits represent each channel (00 to FF, which is the same range as 0 to 255), so #4682DC means red=46 in hex, green=82 in hex, and blue=DC in hex. Hex codes became popular because they're short, easy to copy and paste, and easy to store in a stylesheet or design tool.
HSL: Describing Color the Way People Think About It
HSL stands for Hue, Saturation, and Lightness. Instead of thinking in terms of how much red, green, and blue light to mix, HSL lets you think in terms people already use in conversation: "a blue" (Hue, a position on a color wheel), "how vivid" (Saturation), and "how light or dark" (Lightness). This makes HSL especially good for adjusting an existing color — turning it into a lighter or more muted version — without redoing the math from scratch.
The Same Blue in HSL
<!DOCTYPE html>
<html>
<head>
<style>
.sky-panel-alt {
background-color: hsl(213, 68%, 57%);
}
</style>
</head>
<body>
<div class="sky-panel-alt">Sky Panel Alt</div>
</body>
</html>Exercise: Colors Introduction
Which CSS property is responsible for setting the color of an element's text?
