CSS color functions are more powerful than ever.
Are you using them to their full potential?
Modern CSS now supports a rich set of color functions that go far beyond just rgb() and rgba().
Here’s a quick breakdown of what’s available: 1- hsl() / hsla() Define colors using hue, saturation, and lightness. hsla() adds transparency.
2- lab() / oklab() Perceptual color spaces that better match human vision. oklab() is optimized for digital use.
3- lch() / oklch() Like lab()/oklab(), but in cylindrical form—great for adjusting brightness and intensity.
4- rgb() / rgba() Classic red-green-blue color model. rgba() adds an alpha channel for opacity.
5- color() Use advanced color spaces like display-p3 for more vibrant, high-fidelity colors.
6- color-mix() Blend any two colors together, with control over mix ratio and color space.
7- color-contrast() Automatically picks the most readable color from a list based on background.
8- hwb() Defines color by hue, whiteness, and blackness—more intuitive for some adjustments.
9- device-cmyk() Used for defining colors in print workflows using CMYK values.
10- light-dark() Chooses a different color depending on light or dark mode.
These tools make it easier to create accessible, responsive, and future-proof designs.
Browser support for many of these is growing fast, especially in Chromium and Safari.
To learn more tips about CSS, make sure to join my newsletter below ❤️