tgoop.com/cosine_front_end/2945
Create:
Last Update:
Last Update:
#优质博文 #CSS #前端 #color #新特性
学到很多，比如 rgb 可以不加 a。
A pragmatic guide to modern CSS colours - part one
AI 摘要：本文系统介绍了现代 CSS 颜色系统的演变与新特性，重点包括新版 rgb() 与 hsl() 的语法变化、相对颜色（relative colours）的用法、改进的亮暗主题处理方式、颜色空间（colour spaces）的应用，以及应对更广色域设备的新工具。作者旨在帮助不专注设计的开发者高效掌握现代 CSS 色彩特性，从而提高代码一致性与灵活性。
[以下是方便搜索索引的大纲(AI 生成)，请读原文]
1. 现代 CSS 写法演进
• 从传统的十六进制与函数写法过渡到更灵活的空间分隔语法
• 新版 rgb() 与 hsl() 可直接包含透明度通道，无需“a”版本
• / 用于区分主色值与 alpha 通道，提高一致性
• 空格分隔语法引入新规范以支持更多色彩函数，如 oklch()、hwb()、color()
2. 相对颜色（Relative Colours）
• 允许从已有颜色生成新颜色，通过语法 rgb(from #ff0000 r g b) 实现
• 可结合自定义属性（CSS variables）动态调整不透明度或亮度
• 帮助快速生成同系浅色、深色变化，便于主题一致管理
• 可用于构造组件风格如提示框（toast），只需修改基础色
3. 改进的亮暗主题（Theming）
• 传统方法需在媒体查询与主题类中重复定义变量
• light-dark() 函数允许在单条声明中同时定义明亮与暗色配色
• 结合 color-scheme 可根据用户系统偏好自动切换
• 支持组件级别的独立 color-scheme 控制，增强设计灵活度
4. 颜色空间（Colour Spaces）
• 颜色空间决定浏览器如何计算与过渡颜色
• 支持在 linear-gradient() 中指定颜色空间，如 oklch、lab、hwb
• 新空间可避免传统 sRGB 中的颜色过渡失真
• “longer hue” 参数用于控制渐变方向，生成更自然或彩虹式渐变
5. 扩展色域与精准配色
• 介绍 color() 函数与广色域（wide gamut）空间 display-p3 的使用场景
• 适用于与品牌色或印刷标准（如 Pantone）匹配需求
• 浏览器会自动降级不支持的色域，保证兼容性
6. 展望与总结
• CSS 色彩能力远超以往，包括即将介绍的 color-mix()、oklch() 等函数
• 开发者无需成为设计师，也能直接在代码层面进行色彩管理与调和
author Kevin Powell
BY cosine - 前端人の日常频道
Share with your friend now:
tgoop.com/cosine_front_end/2945