共 148 种颜色
探索 CSS 命名颜色的世界
开发痛点
死记硬背十六进制代码太难了!有没有一种更语义化、更易读的方式来描述颜色?
命名颜色的魅力
CSS 提供了 140 多种标准命名颜色。使用
Tomato
而不是
#FF6347
,不仅能提高代码的可读性,还能让团队沟通变得更直观。
什么是 CSS 命名颜色?
CSS 命名颜色(Named Colors)是一组预定义的关键字,对应特定的 RGB 值。这组名单大多继承自
X11 窗口系统的颜色列表,后来被 W3C 标准化。它们包括了从基础的
Red
、
Blue
到富有诗意的
AliceBlue
、
PapayaWhip
等各种色彩。
为什么使用命名颜色?
- 原型开发阶段 : 在快速搭建 UI 原型时,直接输入颜色名称比查找取色器要快得多。
-
代码可读性
: 看到
color: darkslateblue;你能立刻联想到一种深紫蓝色,而#483D8B则需要大脑进行转换。 - 标准统一 : 所有现代浏览器对这些名称的支持都是完全一致的,不存在兼容性问题。
技术深度:颜色排序与对比
本工具不仅提供了列表,还支持多种排序算法:
- 色相排序 (Hue) : 基于 HSL 模型,将颜色按照彩虹光谱的顺序排列,方便你寻找相近色。
- 亮度排序 (Lightness) : 帮助你快速找到最适合作为背景或前景的深色/浅色。
- 智能对比度 : 当你将鼠标悬停在色块上时,我们会根据色块的亮度自动选择黑或白作为提示文字颜色,确保清晰可见。
关于隐私与安全
本工具完全基于静态数据运行,所有搜索和过滤操作均在您的浏览器本地完成。点击任意色块即可快速将 HEX 代码复制到剪贴板,助您提升开发效率。