Lesson 7 of 50 · css
Colors & Color Functions
Duration: 8 mins
CSS supports many color formats:
- Hex –
#ff6600 - RGB –
rgb(255,102,0) - RGBA –
rgba(255,102,0,0.8)(adds opacity) - HSL –
hsl(30,100%,50%) - HSLA –
hsla(30,100%,50%,0.7) currentColor– inherits the element’scolorvalue.
CSS 4 adds color functions like color(), lab(), lch(), and color-mod() (still experimental).
Example: Dark‑mode friendly colors
:root {
--primary: hsl(210, 60%, 50%);
--primary-dark: hsl(210, 60%, 30%);
}
body { color: var(--primary); }
@media (prefers-color-scheme: dark) {
body { color: var(--primary-dark); }
}