2022-11-16
1244
#css
Samuel Martins
131269
Nov 16, 2022 â‹… 4 min read

How to add dynamic colors with CSS

Samuel Martins I am a full-stack developer who loves sharing the knowledge accumulated over the years with people. The different technologies that I have encountered through my journey allows me to relate to beginners and seniors alike. I write about all things tech.

Recent posts:

Comparison between TanStack Start and Next.js — two modern full-stack React frameworks with different architectural approaches.

TanStack Start vs. Next.js: Choosing the right full-stack React framework

TanStack Start vs. Next.js: both are powerful full-stack React frameworks, but they take fundamentally different approaches to architecture, routing, and developer experience. This guide breaks down their core features from SSR and data fetching to TypeScript support and deployment, to help you choose the right tool for your next React project.

Abiola Farounbi
Jun 12, 2025 â‹… 8 min read
Angular v20 might seem boring…here are 5 reasons it’s not

Angular v20 might seem boring — Here are 6 reasons it’s not

While it may seem like a maintenance update, Angular v20 is packed with practical, production-ready upgrades that will enable us to build apps faster and with more confidence.

Yan Sun
Jun 12, 2025 â‹… 8 min read
vibe based ui building with google stitch

Vibe-based UI building with Google Stitch — Is this the future of frontend?

Build a responsive, multi-page e-commerce site with Stitch, Google’s new AI-powered UI design and development tool.

Emmanuel John
Jun 11, 2025 â‹… 29 min read
Vercel-level deployment without Vercel-level prices

Get Vercel-level deployment without Vercel-level prices

Explore how to build and deploy a Next.js app to Cloudflare Workers to enjoy Vercel-like performance with more flexibility and lower costs.

Elijah Asaolu
Jun 11, 2025 â‹… 5 min read
View all posts

3 Replies to "How to add dynamic colors with CSS"

  1. 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);`

  2. 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.

  3. 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.

Leave a Reply