
Vibe coding isn’t just AI-assisted chaos. Here’s how to avoid insecure, unreadable code and turn your “vibes” into real developer productivity.

GitHub SpecKit brings structure to AI-assisted coding with a spec-driven workflow. Learn how to build a consistent, React-based project guided by clear specs and plans.

:has(), with examplesThe CSS :has() pseudo-class is a powerful new feature that lets you style parents, siblings, and more – writing cleaner, more dynamic CSS with less JavaScript.

Kombai AI converts Figma designs into clean, responsive frontend code. It helps developers build production-ready UIs faster while keeping design accuracy and code quality intact.
Would you be interested in joining LogRocket's developer community?
Join LogRocket’s Content Advisory Board. You’ll help inform the type of content we create and get access to exclusive meetups, social accreditation, and swag.
Sign up now
3 Replies to "How to add dynamic colors with CSS"
I feel like some context is missing from the article. Where does the keyword `from` come from? This doesn’t seem to work, and I can’t find any reference to it in the CSS specs.
`–color: hsl(from var(–color) h calc(s – 10%) l);`
I’m pretty sure it has only been implemented on Safari as of right now. I’m not sure of the progress being made on Chrome, FireFox, etc. This appears to come from the Color Level 5 spec which is still in early development. Chrome has just released Color Level 4 and Color-Mix() from the Level 5 spec on Chrome 111, but I cannot find any status update on the remainder of Color Level 5. It appears they are still in the very early stages of development and implementation. I haven’t found any mentions of this on the roadmaps for at least the next few releases of Chrome.
Samual, great article! Thanks.
I was just about to say the same thing as @EdCharbeneau pointed out. Checking MDN first, I couldn’t find anything about relative colors.
With Adam’s comment I then found high level browser status for color module 5 on w3.org https://www.w3.org/TR/css-color-5/
and then the more specific tests for relative-color:
https://wpt.fyi/results/css/css-color/parsing/color-valid-relative-color.html
I think it would be good if it were mentioned up in the article section as long as browser support is so sparse.