CSS Color Systems
CSS supports named colors, hexadecimal notation, RGB, HSL, HWB, and modern color functions. Modern interfaces often benefit from relative color manipulation, alpha channels, and perceptual color spaces where browser support permits.
Using custom properties for semantic colors makes themes easier to maintain.
CSS Color Representations
Modern Colors
:root {
--color-primary: #2563eb;
--color-text: rgb(15 23 42);
--color-muted: hsl(215 16% 47%);
--color-overlay: rgb(0 0 0 / 0.5);
}💡 CSS supports multiple color representations. Semantic variables prevent colors from being scattered throughout the stylesheet.
Key Takeaways
- Use semantic color variables for scalable design systems.
- Alpha channels can be expressed directly in modern RGB syntax.
Knowledge Check
Which notation represents an alpha channel in modern RGB syntax?