Few things change the feel of a website as fast as color. Swap a dull grey for a confident teal, drop a soft background behind a section, add a gentle gradient — and a plain page suddenly looks designed. Color is one of the most rewarding parts of CSS to learn, simply because the results show up the instant you hit save.
In this article we’ll look at the different ways to write a color in CSS, how to add transparency, and how to fill the background of an element — with solid colors, gradients, and even images. You’ve already bumped into color and background-color; now let’s really get to know them.
The ways to write a color
Back in the first CSS article you saw blue and #00838f. Those are just two of several ways CSS lets you specify a color, and it pays to know each one.
Named colors
The simplest are the named colors — about 140 of them, written as plain English words:
color: red;
color: teal;
color: rebeccapurple;They read well and are perfect for quick experiments, but the list is fixed — there’s no named color for the exact custom shade your design calls for. For that, you’ll reach for one of the next options.
Hex codes
A hex code is the most common way to write a color. It’s a # followed by six hexadecimal characters — two for red, two for green, two for blue:
color: #00b8e6; /* a bright cyan */
color: #333333; /* dark grey */Each pair runs from 00 (none of that color) up to ff (the full amount). So #ff0000 is pure red, #00ff00 is pure green, and #0000ff is pure blue. You don’t need to do this math in your head — in practice you’ll pick a color from a design tool or palette and paste the hex code straight in. And when all three pairs repeat, you can shorten it: #ffffff becomes #fff.
RGB and RGBA
You can also write a color as RGB — the same red, green, blue idea, but with numbers from 0 to 255:
color: rgb(0, 184, 230);Where RGB really earns its keep is its sibling, RGBA, which tacks on an alpha value for transparency — a number from 0 (fully transparent) to 1 (fully opaque):
color: rgba(0, 184, 230, 0.5); /* half-transparent cyan */That 0.5 makes the color 50% see-through, so whatever sits behind it peeks through. Transparency turns out to be incredibly handy for overlays, subtle backgrounds, and shadows.
HSL
One more worth knowing: HSL stands for Hue, Saturation, Lightness, and many people find it the most intuitive way to think about color:
color: hsl(193, 100%, 45%);- Hue is the color itself, as a position on a 360° color wheel (0 is red, 120 is green, 240 is blue).
- Saturation is how vivid it is, from 0% (grey) to 100% (full color).
- Lightness is how light or dark, from 0% (black) to 100% (white).
HSL makes spinning off variations of a color almost effortless — want a darker shade? Just lower the lightness and leave the rest alone. And like RGB, it has an alpha form, hsla(), when you need transparency.
Which color format should you use?
There’s no single right answer, but here’s a practical guide. Hex is the most common and the one you’ll see everywhere, so it’s a safe default. Switch to rgba() or hsla() when you need transparency. Reach for hsl() when you want to hand-tune a color — it’s the easiest to nudge by feel. They all describe the same colors, so pick whichever fits the moment. And don’t worry about memorizing any values — design tools and color pickers spit them out for you.
Text color vs background color
Two properties cover the basics of putting color on an element:
.box {
color: white; /* the text color */
background-color: #00838f; /* the box's background */
}colorsets the color of the text inside an element.background-colorfills the background behind the content.
One small but important habit: always make sure your text and background have enough contrast. Light grey text on a white background might look elegant on your screen, but plenty of people will struggle to read it. Good contrast is a cornerstone of accessibility — aim for text that’s comfortably legible against whatever sits behind it.
Background gradients
A background doesn’t have to be one flat color. CSS can generate gradients — smooth transitions between colors — with no image file involved at all. A linear gradient fades from one color into another along a straight line:
.hero {
background: linear-gradient(to right, #00b8e6, #0077b6);
}This fills the element with a gradient flowing from left (#00b8e6) over to right (#0077b6). You can point it in any direction (to bottom, to right, or an exact angle like 45deg) and chain on as many color stops as you like:
background: linear-gradient(to bottom, #00b8e6, #4fd6f5, #ffffff);There’s also radial-gradient(), which spreads outward from a center point instead of running in a straight line. Either way, gradients are a fast way to add visual depth without touching a single image file.
Background images
You can also use an actual image as a background with background-image:
.banner {
background-image: url("mountains.jpg");
background-size: cover;
background-position: center;
}Three properties usually team up here:
background-image: url(...)points to the image file.background-size: coverscales the image up until it fills the element completely, cropping the overflow. Swap incontainand it fits the whole image inside instead, with no cropping.background-position: centerdecides which part of the image stays visible when it does get cropped.
background-color and background-image can team up
You can set a background-color and a background-image on the same element. The color shows through while the image is still loading, and it fills any area the image doesn’t reach. A good habit is to pick a background color that roughly matches your image — that way, if the image loads slowly or fails entirely, the element still looks intentional instead of blank.
The background shorthand
CSS has a handy shorthand that lets you set several background properties in one line:
.banner {
background: #00838f url("pattern.png") no-repeat center / cover;
}That single line sets the color, image, repeat behavior, position, and size all at once. Shorthands like this show up all over CSS — they save space once the individual properties feel familiar. While you’re starting out, there’s nothing wrong with writing each property on its own line for clarity; you can pick up the shorthands as your confidence grows.
Wrapping up
You can now bring real color to your pages:
- CSS color can be written as named colors (
teal), hex (#00b8e6), RGB (rgb(0,184,230)), or HSL (hsl(193,100%,45%)) — they all describe the same colors. - RGBA and HSLA add an alpha channel for transparency (0 = invisible, 1 = solid).
colorsets text color;background-colorfills the background. Keep enough contrast between them for readability.- Gradients (
linear-gradient,radial-gradient) create smooth color transitions with no image. background-imageuses a real image, usually paired withbackground-size: coverandbackground-position.
Color is one of those skills that improves fastest through play — change a value, watch the page transform on the spot, repeat. Next, we’ll tackle one of the most important ideas in all of CSS: the box model, which governs the size and spacing of every single element on a page. It’s the key that unlocks real control over layout.
