Colors & Backgrounds
CSS gives you many ways to set colors: named colors (red, blue), hex codes (#ff5733), rgb(), or hsl(). Backgrounds can be solid colors, images, or gradients. The linear-gradient() function creates smooth transitions between colors — great for hero sections and buttons.
Appy Says…
Colour makes or breaks a design. The right palette builds trust (banking blues), excitement (gaming reds), or calm (wellness greens). CSS gives you multiple ways to define and apply colour — master them and you can match any brand.
What are CSS Colors and Backgrounds?
CSS lets you set text colour, background colour, and background images/gradients using multiple colour formats.
- •Named:
color: tomato;(147 named colours) - •Hex:
color: #1a73e8;(6-digit RGB in hex) - •RGB:
color: rgb(26, 115, 232); - •HSL:
color: hsl(217, 80%, 51%);— hue/saturation/lightness (easiest to reason about) - •Alpha:
rgba(0,0,0,0.5)orhsla()or 8-digit hex#00000080 - •
background-color,background-image: url() - •Gradients:
background: linear-gradient(135deg, #667eea, #764ba2);
Think of it like Minecraft dyes
Minecraft has 16 dye colours — you can mix them to create new shades, apply them to blocks, banners, armour. CSS colour formats are your expanded dye kit: millions of exact shades, transparency, gradients.
How It Works
- •1.
colorsets text colour;background-colorsets the fill - •2. Hex:
#RRGGBB— red, green, blue each 00–FF - •3. HSL is intuitive: hue (0–360°, the colour wheel), saturation (0–100%), lightness (0–100%)
- •4. Gradients:
linear-gradient(direction, color1, color2) - •5. CSS variables:
:root { --brand: #1a73e8; }thencolor: var(--brand); - •6. Check contrast with WebAIM contrast checker (need 4.5:1 for body text)
Real-World Examples
- •Spotify green:
#1DB954— one hex code used consistently across the whole app - •Dark mode:
background-color: #121212; color: #ffffff; - •Hero gradient:
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); - •Semi-transparent overlay:
background: rgba(0,0,0,0.5);
Key Facts
- •CSS has 147 named colours — including gems like
rebeccapurple(named after a developer's daughter) - •HSL is easiest for creating colour palettes — keep hue, vary lightness and saturation
- •CSS
color-mix(in srgb, red 50%, blue)mixes colours natively (modern CSS) - •WCAG requires 4.5:1 contrast for normal text, 3:1 for large text
Watch Out!
Light grey text on white backgrounds might look elegant but often fails accessibility contrast requirements. Always check contrast ratios before shipping. WCAG 2.1 AA requires at least 4.5:1 for body text.
Remember
Use CSS variables for brand colours (--primary: #...) so you can update the entire site in one place. Check contrast ratios for accessibility.
What You Learned
- •Colour formats: named, hex, rgb, hsl, rgba with alpha
- •background-color, background-image, linear-gradient for visual fills
- •Unlocks: brand theming, dark mode, gradients, accessible colour choices
Key Facts
- →CSS has 147 named colours — including gems like
rebeccapurple(named after a developer's daughter) - →HSL is easiest for creating colour palettes — keep hue, vary lightness and saturation
- →CSS
color-mix(in srgb, red 50%, blue)mixes colours natively (modern CSS) - →WCAG requires 4.5:1 contrast for normal text, 3:1 for large text
Real-World Examples
Remember
Use CSS variables for brand colours (--primary: #...) so you can update the entire site in one place. Check contrast ratios for accessibility.
Quick Quiz
What does #ff0000 represent?