#优质博文 #前端
CSS Relative Colors
https://ishadeed.com/article/css-relative-colors/

AI 摘要：探讨 CSS 相对颜色语法（Relative Colors）如何通过调整颜色亮度实现动态主题切换的实用案例。

本文通过实际案例展示了 CSS 相对颜色语法（ from 关键字）的灵活性与应用场景。传统 CSS 变量需预定义多个颜色值，而相对颜色语法允许开发者基于现有颜色动态调整 HSL 通道值（如亮度、饱和度），从而实现更简洁的动态主题适配。作者以按钮悬停效果为例，对比传统方法和相对颜色语法的差异：传统方法需为不同状态定义多个变量，而相对颜色通过 hsl(from var(--color) h s calc(l - 10%)) 直接基于原色降低亮度，减少代码冗余。文章进一步扩展至动态主题切换场景，展示如何通过调整基准色实现全局颜色适配。此外，文章讨论了兼容性问题（仅 Safari 16+ 和 Chrome 119+ 支持）及回退方案（如 @supports 检测和 PostCSS 插件），并强调相对颜色语法对现代 CSS 设计系统灵活性的提升价值。

#css #color
via Ahmad Shadeed

Ishadeed

CSS Relative Colors

An interactive guide to learn CSS Relative Colors.