CSS Tutorial · CSS Basics · Lesson 4 of 19

CSS Colors

Named colours, hex, rgb, hsl, opacity and modern colour functions.

Colour formats

Example 1Try it yourself

<style>
  body { font-family: system-ui, sans-serif; display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
  div { padding: 14px 8px; border-radius: 8px; color: white; text-align: center; font-size: 13px; }
</style>
<div style="background: tomato">tomato</div>
<div style="background: #2563eb">#2563eb</div>
<div style="background: rgb(22 163 74)">rgb(22 163 74)</div>
<div style="background: hsl(280 70% 50%)">hsl(280 70% 50%)</div>
<div style="background: hsl(280 70% 70%)">lighter: 70%</div>
<div style="background: rgb(0 0 0 / 40%)">40% black</div>

Format	Example
Named	`tomato`, `rebeccapurple`
Hex	`#2563eb`, short `#fff`, with alpha `#2563eb80`
RGB	`rgb(37 99 235)`, with alpha `rgb(37 99 235 / 50%)`
HSL	`hsl(221 83% 53%)` — hue, saturation, lightness
OKLCH	`oklch(60% 0.2 260)` — perceptually uniform, great for palettes

HSL is the easiest to tweak by hand: change the lightness to make lighter or darker shades of the same colour.

color and background-color

color sets the text colour; background-color the background. Make sure they have enough contrast (WCAG recommends at least 4.5:1 for body text).

Test yourself

In hsl(200 80% 40%), which value controls lightness?

200
80%
40%
None

Show answer

Answer: 40%