CSS 颜色名称大全

快速查询 140 多种 CSS 标准命名颜色及其代码

共 148 种颜色

探索 CSS 命名颜色的世界

开发痛点

死记硬背十六进制代码太难了!有没有一种更语义化、更易读的方式来描述颜色?

命名颜色的魅力

CSS 提供了 140 多种标准命名颜色。使用 Tomato 而不是 #FF6347 ,不仅能提高代码的可读性,还能让团队沟通变得更直观。

什么是 CSS 命名颜色?

CSS 命名颜色(Named Colors)是一组预定义的关键字,对应特定的 RGB 值。这组名单大多继承自 X11 窗口系统的颜色列表,后来被 W3C 标准化。它们包括了从基础的 RedBlue 到富有诗意的 AliceBluePapayaWhip 等各种色彩。

为什么使用命名颜色?

  • 原型开发阶段 : 在快速搭建 UI 原型时,直接输入颜色名称比查找取色器要快得多。
  • 代码可读性 : 看到 color: darkslateblue; 你能立刻联想到一种深紫蓝色,而 #483D8B 则需要大脑进行转换。
  • 标准统一 : 所有现代浏览器对这些名称的支持都是完全一致的,不存在兼容性问题。

技术深度:颜色排序与对比

本工具不仅提供了列表,还支持多种排序算法:

  • 色相排序 (Hue) : 基于 HSL 模型,将颜色按照彩虹光谱的顺序排列,方便你寻找相近色。
  • 亮度排序 (Lightness) : 帮助你快速找到最适合作为背景或前景的深色/浅色。
  • 智能对比度 : 当你将鼠标悬停在色块上时,我们会根据色块的亮度自动选择黑或白作为提示文字颜色,确保清晰可见。

关于隐私与安全

本工具完全基于静态数据运行,所有搜索和过滤操作均在您的浏览器本地完成。点击任意色块即可快速将 HEX 代码复制到剪贴板,助您提升开发效率。

已复制到剪贴板!