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.
Modern color functions help build tonal systems directly in CSS. Use them to derive variants from one source color so component states remain coherent.
Color and effect features are strongest when contrast remains the first priority. Check hover, focus, and disabled states before finalizing.
If you liked this tip, you might enjoy the book, which is packed with similar insights to help you build better websites without relying on JavaScript.
Go check it out https://theosoti.com/you-dont-need-js/ and enjoy 20% OFF for a limited time!