现代 CSS 解决方案：文字颜色自动适配背景色！ - ChokCoco
内容提要
CSS相对颜色是2023年的新特性，允许基于现有颜色生成新颜色，支持动态变化和适应背景色。使用`from`关键字可以轻松转换颜色，提升文字颜色的可读性。新规范`color-contrast()`能够自动选择对比度更高的颜色，增强用户体验。
延伸解读
相对颜色语法核心：from 关键字与变量替换
相对颜色通过 from 关键字将现有颜色转换为 r、g、b 等变量，再结合 calc() 生成新颜色。例如 rgb(from var(--color) calc(r - 255) calc(g + 255) b) 可将红色转为绿色。from 后支持任意颜色表示法或 CSS 变量，如 rgba、hsl 等，这为动态颜色计算提供了基础。
交互状态颜色简化：基于 HSL 的亮度调整
对于按钮的 hover/active 状态，传统需写多个颜色值。使用相对颜色，可基于基础色通过 hsl(from var(--bg) h s calc(l * 1.2)) 和 calc(l * 0.8) 自动生成更亮或更暗的颜色，减少代码量并保持色调一致。这比 filter 方案更直观，且不依赖滤镜。
文字自适应背景：反色方案与局限
当背景色不确定时，可用相对颜色反转背景色作为文字颜色：color: rgb(from var(--bg) calc(1 - r) calc(1 - g) calc(1 - b))。但该方案在灰色背景（如 #808080）下对比度不足，且可能产生不理想的颜色。它适合对可读性要求不极端的场景。
color-contrast()：更优解但兼容性受限
CSS Color Module Level 6 的 color-contrast() 函数可自动从候选颜色（如 #fff 和 #000）中选择与背景对比度最高的颜色，完美解决反色方案的缺陷。然而，它目前仍是实验室功能，未大规模兼容，生产环境需谨慎使用或提供回退方案。
Q&A
CSS相对颜色的主要功能是什么？
CSS相对颜色允许基于现有颜色生成新颜色，提升颜色的可读性和适应性。
如何使用`from`关键字在CSS中转换颜色？
`from`关键字用于指定基准颜色，通过计算生成新的颜色，例如：`color: rgb(from var(--color) calc(r - 255) calc(g + 255) b);`。
CSS相对颜色如何提高文字的可读性？
相对颜色可以使文字颜色自适应背景颜色，确保在不同背景下的可读性。
什么是`color-contrast()`函数，它有什么用？
`color-contrast()`函数可以自动选择对比度更高的颜色，增强文字在不同背景下的可读性。
CSS相对颜色支持哪些颜色表示法？
CSS相对颜色支持所有颜色表示法，包括rgb、hsl等。
如何实现文字颜色自动适应背景色？
可以通过设置背景色和使用相对颜色的反转逻辑，自动调整文字颜色以适应背景。
