🌈 CSS Beginner

Colors & Backgrounds

⏱ 1 hr2 topicsLive playground
🎯 By the end: You can colour text and backgrounds using any of the common formats, add transparency, and apply gradients and background images.

Colour is the fastest way to make a page feel like yours. CSS gives you several ways to write a colour, plus backgrounds that can be solid, gradient, or an image. Let's make things colourful — and you'll see every change live.

1Ways to write a colour

The color property sets text colour; background-color sets the background. The colour value itself can be written several ways:

FormatExampleNotes
Namedtomato, navy~140 built-in names. Easy, limited.
Hex#FF6B00Most common. Red, green, blue in base-16.
RGBrgb(255, 107, 0)Red, green, blue from 0–255.
RGBArgba(255,107,0,0.5)Adds alpha — transparency from 0–1.
HSLhsl(25, 100%, 50%)Hue, saturation, lightness — intuitive to tweak.
They all describe the same kinds of colour — pick whichever you find easiest. Hex is the everyday default; HSL shines when you want "the same colour but lighter" — just raise the lightness percentage.
Try every colour format
HTML
CSS
Live preview
What's happening: Four ways to write colour, all valid. Change the alpha in rgba() from 0.5 to 0.1 to see transparency, or raise the last number in hsl() to lighten that colour.
Key points
  • color sets text colour; background-color sets the background.
  • Write colours as named, hex (#FF6B00), rgb(), rgba() (with transparency) or hsl().
  • Hex is the everyday default; HSL makes 'same colour, lighter' easy via the lightness value.

2Gradients and background images

Backgrounds can be far more than a flat colour:

  • Gradient: background: linear-gradient(135deg, #1f1a52, #FF6B00); blends smoothly between colours — no image file needed.
  • Image: background-image: url('photo.jpg'); places a picture behind the content.

With background images you'll usually pair a few properties: background-size: cover (fill the area), background-position: center, and background-repeat: no-repeat.

Keep text readable over busy backgrounds — add a dark overlay or a solid colour behind the text. Contrast is an accessibility requirement, not just taste (remember the a11y lesson).
A gradient hero box
HTML
CSS
Live preview
What's happening: linear-gradient blends from deep indigo to saffron across the box — no image needed. Change the angle (135deg) or the two colours and watch the blend update.
Key points
  • linear-gradient() blends between colours with no image file.
  • background-image: url(...) places a picture; pair with background-size: cover, position, no-repeat.
  • Keep enough contrast for readable text over images — it's an accessibility requirement.

★ Practical: a colourful card

In any playground, build a card and:

  1. Give it a background using a hex colour.
  2. Set its text color using rgb() or hsl().
  3. Swap the background for a linear-gradient() of two colours.
  4. Add a semi-transparent element using rgba() and check the text stays readable.

Ready to test yourself?

Take the short quiz. Score 60% or more to mark this lesson complete.

Start the quiz →

💡 Log in to save your progress and earn the certificate.

← Previous
Introduction to CSS
Next →
The Box Model