CSS命名颜色共140个，均在sRGB下有明确定义的十六进制值，如black为#000000、white为#ffffff、gray/grey同为#808080；rebeccapurple特例为#663399，语义优先于简洁，需结合设计系统谨慎使用。

常见 CSS 颜色名称实际对应哪个十六进制值

CSS 颜色名称不是“印象派”，每个都有明确定义的 RGB 值，但不同名称之间差异可能很微妙，比如 darkgray 和 dimgray 看起来几乎一样，实际却差了 8 个亮度单位。W3C 标准定义了 140 个命名颜色（含 orange、rebeccapurple 等），所有值都在 sRGB 色彩空间下固定。

实操建议：

• black 永远是 #000000，white 永远是 #ffffff，不随设备或浏览器变化
• gray 是 #808080，而 grey 是它的完全等价别名（不是近似）
• lightcoral 是 #f08080，比 salmon（#fa8072）更偏粉、更暗一点
• 避免靠肉眼猜——直接查 CSS Color 4 命名色表 或用开发者工具取色验证

什么时候该用颜色名称，而不是 #RRGGBB 或 rgb()

颜色名称只在语义明确、且团队/项目接受其精度限制时才合适。它们不是“更简洁的写法”，而是带隐含含义的标记。

实操建议：

• 用 transparent 而不用 rgba(0,0,0,0)：前者语义清晰、字节更少、兼容性更好（IE9+）
• 组件状态类中可用 valid/invalid 这类语义化变量，背后再映射到具体色值，而非直接写 red —— 因为 red 在可访问性检测中对比度常不达标
• 禁用 maroon、olive 等易拼错名称（maroon 不是 marroon，olive 不是 olivegreen）
• CI 流程中可加 ESLint 规则 color-no-named 强制禁用名称，防止设计系统失控

rebeccapurple 是特例，但别滥用

这是唯一一个以人名命名的 CSS 颜色，值为 #663399，致敬 web 先驱 Eric Meyer 的女儿 Rebecca。它被加入标准是为了推动包容性命名实践，不是为了提供新色相。

实操建议：

• 它和 purple（#800080）、darkmagenta（#8b008b）都属紫调，但饱和度与明度不同——rebeccapurple 更灰、更稳，适合 UI 主色调
• 不要把它当作“更高级的 purple”来用；如果设计系统没明确定义它，就别引入，否则会增加维护成本
• VS Code / WebStorm 输入 rebeccapurple 时不会自动补全，需手动敲全名（无缩写）

/* 对比示例：同一视觉区域，不同写法的实际渲染效果 */
.button--error {
  background-color: #dc2f2f;     /* 推荐：明确、可控、可计算 */
}
.button--error-alt {
  background-color: red;          /* ❌ 不推荐：对比度仅 3.99:1，不满足 AA */
}
.button--error-safe {
  background-color: rebeccapurple; /* ✅ 可用，但前提是设计规范已采纳 */
}

颜色名称最大的陷阱不是“不准”，而是“你以为它准”。真正要控制视觉一致性，得靠设计令牌（design tokens）绑定具体色值，而不是依赖记忆或浏览器默认映射。

# css  # 浏览器  # 字节  # webstorm  # 工具  # vs code  # red  # ui  # 明度  # 而不是  # 这是  # 都有  # 都在  # 什么时候  # 令牌  # 饱和度  # 把它  # 这类 

相关栏目： 【 网站优化151355 】 【 网络推广146373 】 【 网络技术251813 】 【 AI营销90571 】

相关推荐： 开心动漫网站制作软件下载,十分开心动画为何停播？  如何在阿里云虚拟机上搭建网站？步骤解析与避坑指南  javascript中数组（Array)对象和字符串（String)对象的常用方法总结  Laravel队列任务超时怎么办_Laravel Queue Timeout设置详解  如何在Ubuntu系统下快速搭建WordPress个人网站？  详解一款开源免费的.NET文档操作组件DocX（.NET组件介绍之一）  网站制作壁纸教程视频,电脑壁纸网站？  谷歌Google入口永久地址_Google搜索引擎官网首页永久入口  Laravel怎么解决跨域问题_Laravel配置CORS跨域访问  EditPlus中的正则表达式实战(6)  手机网站制作平台,手机靓号代理商怎么制作属于自己的手机靓号网站？  Laravel如何生成PDF或Excel文件_Laravel文档导出工具与使用教程  网页设计与网站制作内容,怎样注册网站？  Laravel如何配置和使用队列处理异步任务_Laravel队列驱动与任务分发实例  Laravel的契約(Contracts)是什么_深入理解Laravel Contracts与依赖倒置  Laravel如何使用Service Provider注册服务_Laravel服务提供者配置与加载  什么是JavaScript解构赋值_解构赋值有哪些实用技巧  Laravel Eloquent性能优化技巧_Laravel N+1查询问题解决  用yum安装MySQLdb模块的步骤方法  Laravel 419 page expired怎么解决_Laravel CSRF令牌过期处理  如何自定义建站之星网站的导航菜单样式？  作用域操作符会触发自动加载吗_php类自动加载机制与::调用【教程】  黑客入侵网站服务器的常见手法有哪些？  Claude怎样写结构化提示词_Claude结构化提示词写法【教程】  如何快速查询域名建站关键信息？  Android中AutoCompleteTextView自动提示  Laravel观察者模式如何使用_Laravel Model Observer配置  LinuxCD持续部署教程_自动发布与回滚机制  弹幕视频网站制作教程下载,弹幕视频网站是什么意思？  微信小程序 wx.uploadFile无法上传解决办法  JavaScript常见的五种数组去重的方式  高端云建站费用究竟需要多少预算？  北京网站制作费用多少,建立一个公司网站的费用.有哪些部分,分别要多少钱？  如何实现javascript表单验证_正则表达式有哪些实用技巧  Laravel如何构建RESTful API_Laravel标准化API接口开发指南  Python函数文档自动校验_规范解析【教程】  JS弹性运动实现方法分析  Laravel如何使用Guzzle调用外部接口_Laravel发起HTTP请求与JSON数据解析【详解】  Laravel如何处理跨站请求伪造（CSRF）保护_Laravel表单安全机制与令牌校验  javascript和jQuery中的AJAX技术详解【包含AJAX各种跨域技术】  如何用AI帮你把自己的生活经历写成一个有趣的故事？  javascript读取文本节点方法小结  Laravel怎么实现模型属性的自动加密  网站制作价目表怎么做,珍爱网婚介费用多少？  香港服务器如何优化才能显著提升网站加载速度？  如何用PHP快速搭建高效网站？分步指南  google浏览器怎么清理缓存_谷歌浏览器清除缓存加速详细步骤  Laravel怎么自定义错误页面_Laravel修改404和500页面模板  LinuxShell函数封装方法_脚本复用设计思路【教程】  JavaScript如何实现继承_有哪些常用方法