Colour Formats
| Format | Example | Notes |
|---|---|---|
| Hex | #6366f1 | 3 or 6 digit. #fff = #ffffff |
| Hex + alpha | #6366f180 | 8-digit hex, last 2 = opacity |
| rgb() | rgb(99, 102, 241) | 0–255 for each channel |
| rgba() | rgba(99, 102, 241, 0.5) | Alpha 0–1 |
| hsl() | hsl(239, 84%, 67%) | Hue 0–360, Saturation/Lightness % |
| hsla() | hsla(239, 84%, 67%, 0.5) | With alpha |
| Named | indigo, crimson, transparent | 140+ named colours |
Useful Named Colours
color: transparent; /* fully transparent */
color: currentColor; /* inherits from current color property */
color: inherit; /* inherits from parent */
color: initial; /* browser default (usually black) */
color: unset; /* inherits if inheritable, otherwise initial */currentColor
currentColor is one of CSS's most useful keywords — it equals the current value of the color property, making it easy to create consistent icon/border colours:
.btn {
color: #6366f1;
border: 1px solid currentColor; /* border matches text colour */
}
.btn svg {
fill: currentColor; /* SVG icon matches text colour */
}Modern Colour Functions
/* oklch() — perceptually uniform, great for design systems */
color: oklch(67% 0.2 264); /* lightness% chroma hue */
/* color-mix() — mix two colours */
color: color-mix(in srgb, #6366f1 70%, #ec4899 30%);
/* Relative colour syntax (CSS Color Level 5) */
color: hsl(from var(--accent) h s calc(l - 10%));💡 HSL for design systems: HSL is easier to work with than hex for design tokens. You can intuitively adjust lightness to create tints and shades of a colour without a colour picker.