If we want our website to stop looking like a text document straight out of 1997, we have to start painting it. To do that, we need to apply colors.
Technically, a color in CSS is a value within a color space (like sRGB). It tells the browser the hue, lightness, and transparency to apply.
CSS allows us to control many elements, such as text color, backgrounds, borders, shadows, and even smooth transitions between colors.
In this article we are going to delve into the different syntaxes and formats offered by the standard.
Where we use colors
In CSS, colors appear in many different properties. Some are obvious, like color or background-color. Others appear later, like border-color, box-shadow, or even text-decoration-color.
.tarjeta {
color: #222222;
background-color: #ffffff;
border: 1px solid #dddddd;
box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}
Ways to write a color
In CSS there is not a single way to say “red”. The browser understands several formats, each with its advantages and its peculiarities.
Predefined names
CSS includes a list of more than 140 color names in English that the browser recognizes directly.
p {
color: red;
background-color: tomato;
border-color: lightblue;
}
They are convenient for quick tests, examples, or prototypes. For real projects they fall a bit short because they don’t give us much control over exact shades, transparencies, or color scales.
Hexadecimal
The hexadecimal format is the classic web format. It is written with a hash # followed by six characters that represent red, green, and blue.
h1 {
color: #ff0000; /* Pure red */
background: #336699; /* Grayish blue */
}
The first two characters are the red channel, the next two are the green channel, and the last two are the blue channel. Each channel ranges from 00 (no light) to ff (full light).
There is also a shorthand version, like #fff for white or #000 for black. And in modern CSS you can add transparency with eight characters, for example #00000080 for a 50% black.
RGB and transparency
The RGB system mixes red, green, and blue with numeric values from 0 to 255.
.caja {
color: rgb(255, 0, 0);
background-color: rgba(0, 0, 0, 0.5);
}
The fourth value is the alpha channel, which controls transparency. 0 means fully transparent and 1 means fully opaque.
.velo {
background: rgb(0 0 0 / 50%);
}
Modern syntax allows writing it with spaces and a slash (/). It’s the same idea, but more convenient when working with transparencies.
HSL
The HSL format is usually more intuitive for people, as it separates color into hue, saturation, and lightness.
.alerta {
background-color: hsl(0 100% 50%);
color: hsl(0 100% 50% / 50%);
}
- Hue: The shade on the color wheel.
0is red,120is green,240is blue. - Saturation: The intensity of the color.
0%is gray,100%is vivid color. - Lightness: The brightness.
0%is black,100%is white.
HSL is very useful for creating variants. For example, you can keep the same hue and change only the lightness to create hover states, borders, or soft backgrounds.
