Kevin is back with the follow up to part one of this series. This time, Kevin goes deep on how functional the newer colour capabilities are in practice to hopefully, encourage more designers to use their browser more often.

Piccalilli's resource offers insights, tutorials, and resources for frontend developers and web designers. Readers can learn about HTML, CSS, and JavaScript techniques, as well as design principles and accessibility. With articles, tutorials, and design showcases, Piccalilli provides  guidance and inspiration for creating modern and accessible web experiences.

Piccalilli

Modern CSS color functions like oklch(), hsl(), and color-mix() enable developers to create dynamic color schemes directly in the browser. The guide demonstrates practical techniques including generating complementary colors by manipulating hue values, creating perceptual color scales with consistent brightness across different hues, building surface levels for dark themes, and mixing colors in different color spaces. The oklch() color space offers better perceptual uniformity than hsl(), making it ideal for maintaining consistent contrast ratios across color variations. Relative colors combined with calc() allow for programmatic color manipulation, while color-mix() provides flexible blending capabilities that will become even more powerful with upcoming CSS custom functions.

A pragmatic guide to modern CSS colours - part two

Some of this will be easier in the future