Colours and backgrounds

You want a button to be a specific shade of blue. You find the colour in a design file, paste #1b2130 into your stylesheet, and it works, but you have no idea what those characters mean or how you would nudge the shade a little lighter. Colour in CSS looks like a pile of cryptic codes until you learn the few systems underneath them. Once you can read a colour and paint it onto a background, most of the visual character of a page is in your hands.

Naming a colour

CSS lets you write the same colour in a few different ways. The simplest is a keyword: a plain English name the browser already knows.

css

.tag {
  color: rebeccapurple;      /* a named colour, no codes needed */
}

There are about 140 of these names, which is handy for quick work but far too few for real designs. The other ways let you describe any colour at all. A hex code is a # followed by six characters, and rgb() mixes red, green, and blue by amount. They all point at exact colours; keywords are the shortcut for the common ones.

css

.tag {
  color: #1b2130;            /* the same dark navy, written as a hex code */
}

JunoNaming a colour The same colour can be written as a keyword like rebeccapurple, a hex code like #1b2130, or with rgb(). Keywords are quick but there are only about 140 of them, so most real work uses the codes. Do not try to read a hex code by eye yet; copying exact values is completely normal at this stage.

Transparency

Sometimes you want a colour you can partly see through, so whatever sits behind it shows a little. This is transparency, and you add it with a fourth value called alpha: 0 is fully see-through, 1 is fully solid.

css

.overlay {
  background-color: rgb(27 33 48 / 0.5);   /* the navy, but half see-through */
}

The / 0.5 on the end means "half opacity". There is also a property called opacity that fades a whole element, text and all, at once:

css

.faded {
  opacity: 0.5;              /* fades the entire element, not one colour */
}

The difference matters: alpha affects only that one colour, while opacity fades everything about the element.

JunoTransparency Add a fourth value to a colour to make it see-through: 0 is invisible, 1 is solid, and something like / 0.5 is halfway. That alpha only touches the one colour. The separate opacity property fades the whole element, text included, so pick alpha when you only want a softer background.

Background colour and images

The background-color property fills the area behind an element, out to its border. You can use any colour you can name.

css

.hero {
  background-color: hsl(219 28% 15%);   /* a solid navy behind the content */
}

You can also put an image behind an element with background-image, pointing at the file with url(...):

css

.hero {
  background-image: url("mountains.jpg");
  background-size: cover;               /* scale the image to fill the whole area */
}

background-size: cover scales the picture so it fills the box completely, cropping any overflow. It is the setting you want most of the time so there are no empty gaps.

JunoBackground colour and imagesbackground-color fills the space behind an element, and background-image: url(...) puts a picture back there instead. Pair an image with background-size: cover so it fills the whole box without leaving gaps. That combination covers most of what you will reach for early on.

Gradients

A gradient is a smooth blend from one colour to another. CSS treats it as a kind of image, so it goes in background-image rather than background-color.

css

.banner {
  background-image: linear-gradient(hsl(219 28% 15%), hsl(219 40% 35%));
}

That blends from the first colour at the top down to the second at the bottom. You can list more than two colours, and you can change the direction:

css

.banner {
  background-image: linear-gradient(to right, hsl(340 80% 55%), hsl(30 90% 60%));
  /* blends left to right instead of top to bottom */
}

No image file needed; the browser draws the blend for you.

JunoGradients A gradient is a smooth blend between colours, and CSS counts it as an image, so it goes in background-image. linear-gradient() blends in a straight line, top to bottom by default, or add to right to change direction. No file needed, the browser draws the blend itself.

Colour that adapts and stays readable

One useful keyword is currentColor. It stands in for whatever the element's text colour is, so a border or icon can match the text automatically:

css

.chip {
  color: hsl(219 28% 15%);
  border: 2px solid currentColor;   /* the border matches the text colour */
}

Change the text colour later and the border follows on its own, with no second edit.

One more thing to keep in mind: make sure text stands out from its background. Dark text on a dark background is hard to read, and pale grey on white strains the eyes. Aim for a clear difference in brightness between the two.

JunoColour that adapts and stays readablecurrentColor is a keyword that copies the element's text colour, so a border can match the text and follow it if you change it later. Beyond that, keep text readable: make sure it is clearly brighter or darker than what sits behind it. Low contrast is the most common reason a page is hard to read.

Colours and backgrounds ​

Naming a colour ​

Transparency ​

Background colour and images ​

Gradients ​