Colours and Backgrounds

All in one: every colour format and background property, side by side

What this example compares

What gets painted: color vs background-color vs the ignored colour, text-color, font-color
Who else gets it: color is inherited, background-color is not (children are see-through)
Four ways to write a colour: a name vs #2563eb vs rgb(37, 99, 235) vs hsl(217, 83%, 53%), plus seven named colours
Reading a hex code: the red, green and blue pairs; equal pairs are grey; the biggest pair names the family
One colour, many spellings: #ff0000 vs #f00 vs #FF0000 vs rgb(255, 0, 0) vs red
The dials of hsl(): hue vs saturation vs lightness, and a family of matching shades
See-through: rgba() vs #00000080 vs hsla() vs opacity vs transparent
Tiling: background-image with repeat vs repeat-x vs no-repeat
Picture size: cover vs contain vs 200px vs 100% 100%
Which part shows: center vs top left vs 50% 20%
On scroll: background-attachment: scroll vs fixed
Four lines or one: the longhands vs background: url(...) center/cover no-repeat
Content or decoration: <img alt> vs background-image
Gradients: to right vs 135deg vs to bottom left vs radial-gradient
White text on a photo: nothing vs an rgba() panel vs a gradient layer (first layer on top)
Contrast: 15 : 1 vs 4.5 : 1 vs failing pairs, and 3 : 1 for large text
Two habits: never colour alone; set color and background-color together
A tiny palette: dark, surface, accent and tint, applied to Asha's course cards

Point at any word in the code to see what it means (tap on a phone); click a word to keep its meaning on screen. Read the comment above each numbered panel, press Run, then Edit & experiment to try the TRY lines yourself.

The complete code

Loading the example…

What you should see

You should see eighteen panels (scroll inside the result to reach them all). Panel 1 shows the same red as letters, as a box and as both, then two boxes where the misspelt property did nothing. Panel 3 shows four blues that are nearly identical and one empty box. Panels 4 to 6 are rows of colour swatches; panel 7 shows dark boxes on an orange-to-green strip, where only the opacity box has faded letters. Panels 8 to 13 show the campus drawing tiled, sized, cropped and fixed, with an empty box wherever a declaration was ignored. Panel 14 shows four fades, panel 15 four campus banners of which two are easy to read, panel 16 five text samples from very clear to very faint, and panel 18 Asha Kumar's course cards. There is no JavaScript on this page, so the Console prints nothing.

Quick check: in panel 7, why are the letters in the opacity box fainter than the letters in the rgba() box, when both boxes are black at 0.5?

rgba(0, 0, 0, 0.5) makes only the background colour half see-through, so the white letters on top stay solid. opacity: 0.5 fades the whole element, so the letters fade along with the background. Use rgba() when the text must stay readable.