CSS Colors

CSS colors can be written as names, HEX codes, RGB values or HSL values. They all describe the same colors, so pick whichever format is easiest for the task. The color property sets text color and background-color sets the fill behind an element.

Color Formats

• Named: tomato, navy, rebeccapurple (about 140 names)
• HEX: #ff6347 or the short form #f63
• RGB: rgb(255 99 71) with red, green and blue from 0 to 255
• HSL: hsl(9 100% 64%) with hue (0-360), saturation and lightness
• Add transparency with a fourth value: rgb(255 99 71 / 50%) or #ff634780

Same Color, Four Ways

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
div { padding: 12px; margin: 6px 0; color: white; font-family: sans-serif; }
.a { background-color: tomato; }
.b { background-color: #ff6347; }
.c { background-color: rgb(255 99 71); }
.d { background-color: hsl(9 100% 64%); }
</style>
</head>
<body>
<div class="a">Named: tomato</div>
<div class="b">HEX: #ff6347</div>
<div class="c">RGB: rgb(255 99 71)</div>
<div class="d">HSL: hsl(9 100% 64%)</div>
</body>
</html>

Transparent Colors

The alpha value controls opacity: 0 is fully transparent and 1 (or 100%) is solid. Unlike the opacity property, an alpha color only affects that one color, not the text inside.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
body { background: linear-gradient(90deg, gold, orchid); padding: 20px; }
.box { padding: 16px; margin: 8px 0; font: 16px sans-serif; }
.solid { background: rgb(0 0 0); color: white; }
.half { background: rgb(0 0 0 / 50%); color: white; }
.light { background: rgb(0 0 0 / 15%); }
</style>
</head>
<body>
<div class="box solid">alpha 100%</div>
<div class="box half">alpha 50%</div>
<div class="box light">alpha 15%</div>
</body>
</html>

Why HSL Is Handy

HSL makes color tweaks easy. Keep the hue and change only lightness to get lighter or darker shades of the same color, which is perfect for hover states and themes.

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>CSS Example</title>
<style>
.s { display: inline-block; width: 70px; height: 70px; }
</style>
</head>
<body>
<span class="s" style="background: hsl(220 80% 25%)"></span>
<span class="s" style="background: hsl(220 80% 45%)"></span>
<span class="s" style="background: hsl(220 80% 65%)"></span>
<span class="s" style="background: hsl(220 80% 85%)"></span>
</body>
</html>

Frequently asked questions

What is the difference between RGB and HEX in CSS?

They describe exactly the same colors. HEX writes each red, green and blue value as two hexadecimal digits, while RGB uses decimal numbers 0 to 255.

How do I make a background transparent in CSS?

Use a color with an alpha value, such as rgb(0 0 0 / 40%), or the keyword transparent for no color at all.

Is rgba still valid CSS?

Yes. rgba(0, 0, 0, 0.5) still works everywhere. Modern CSS also lets plain rgb() take an alpha value with the slash syntax.