"gray"还是"grey"？答案完全取决于你在大西洋的哪一侧——而在代码中选择哪种写法，取决于你遵循的惯例，有时会产生不同的结果。这是颜色问题中拼写在技术语境下真正有意义的少数情形之一，尽管两个词都指同一种视觉现象：黑色与白色之间的非彩色中性色，以及所有围绕它聚集的偏暖或偏冷的近中性变体。
本文涵盖拼写问题、CSS 规则、"灰色"的技术本质、暖灰与冷灰的实用选择指南，以及覆盖完整明度范围的关键灰色十六进制代码参考表。
美式与英式拼写：Gray 与 Grey
这一拼写差异是美式英语与英式英语分歧最清晰的例证之一：
语言变体
首选拼写
美式英语
gray
英式英语
grey
加拿大英语
grey（受英式影响）
澳大利亚英语
grey（受英式影响）
南非英语
grey（受英式影响）
两种拼写历史都很悠久。该词可追溯至古英语 grǣg，"gray"和"grey"在中世纪英语文献中均有出现。哪种拼写占主导地位的分歧，遵循了美式英语固定某一变体、英式英语保留另一变体的一般规律。
一个实用的记忆口诀：grAy 是 American（美式），grEy 是 European（欧式）——元音字母 A 和 E 对应各自的大洲。
在日常使用中，两种拼写均无误——它们指代同一种颜色。风格指南和品牌规范通常会指定一种拼写以保持一致性。如果你面向国际受众写作且没有明确的地区偏好，"gray"在网络语境中略有优势，因为它是 CSS 规范的首选拼写（详见下文）。
CSS 颜色命名：Gray 是标准
在制定 HTML 和 CSS 颜色标准时，关于采用哪种拼写做出了明确决定。CSS 同时接受两种拼写，但它们并不总是指向相同颜色——这造成了一个微妙的技术隐患。
CSS 灰色家族
CSS 包含多个以 gray 命名的颜色。以下是完整列表，并列出了适用的两种拼写变体：
CSS 名称
十六进制
备注
gainsboro
#DCDCDC
非常浅的灰色
lightgray / lightgrey
#D3D3D3
同一颜色，两种拼写
silver
#C0C0C0
中浅灰
darkgray / darkgrey
#A9A9A9
同一颜色，两种拼写
gray
#808080
中性灰——仅"gray"拼写
grey
#808080
CSS 中与 gray 相同
dimgray / dimgrey
#696969
同一颜色，两种拼写
slategray / slategrey
#708090
略带蓝色的灰
darkslategray / darkslategrey
#2F4F4F
深蓝灰色
lightslategray / lightslategrey
#778899
浅蓝灰色
重要说明：对于大多数复合词（lightgray、darkgray、dimgray、slategray），两种拼写都存在且对应相同的十六进制值。基本的 gray / grey 也都映射到 #808080。这一区别对于依赖浏览器默认值的开发者最为重要——实际上，CSS 能正确处理两种拼写。
更重要的技术规则是：在十六进制代码和 RGB 值中，"gray"还是"grey"并不重要——只有数字才算数。无论你怎么称呼它，#808080 就是 #808080。
什么使灰色成为"灰色"？技术本质
纯灰色——在技术上称为非彩色——在所有三个 RGB 通道中具有相等的值。当红、绿、蓝三色完全相同时，结果是一个没有色相的中性色：
RGB 模式
十六进制
颜色
rgb(255, 255, 255)
#FFFFFF
白色
rgb(192, 192, 192)
#C0C0C0
银色
rgb(128, 128, 128)
#808080
中性灰
rgb(64, 64, 64)
#404040
深灰色
rgb(0, 0, 0)
#000000
黑色
在 HSL 中，真正的非彩色灰色饱和度为 0%，色相未定义。明度百分比决定其深浅。
然而，现实设计中的大多数"灰色"并不是完全非彩色的——它们带有轻微的色偏，使其显得"暖"或"冷"。
50种灰：覆盖全范围的关键十六进制代码
以下是从近白到近黑的完整范围实用参考：
色调
十六进制
RGB
描述
近白
#F8F8F8
rgb(248, 248, 248)
几乎不带灰色的白
幽灵白
#F5F5F5
rgb(245, 245, 245)
常见页面背景色
Gainsboro
#DCDCDC
rgb(220, 220, 220)
经典浅灰
浅灰
#D3D3D3
rgb(211, 211, 211)
CSS lightgray
银色
#C0C0C0
rgb(192, 192, 192)
金属质感参考
深灰 (CSS)
#A9A9A9
rgb(169, 169, 169)
CSS darkgray
灰色 (CSS)
#808080
rgb(128, 128, 128)
真正的中性灰
暗灰
#696969
rgb(105, 105, 105)
CSS dimgray
无障碍灰
#767676
rgb(118, 118, 118)
在白底上 AA 文字的最低要求
木炭灰
#36454F
rgb(54, 69, 79)
冷色深灰
近黑
#343434
rgb(52, 52, 52)
接近黑色
几乎黑
#1A1A1A
rgb(26, 26, 26)
比纯黑柔和
重要的无障碍灰：#767676
这个特定的灰色在网页设计中具有特殊意义：它是在白色背景 #FFFFFF 上能达到 4.5:1 对比度的最浅灰色，也是 WCAG AA 标准对普通文本的最低要求。任何比 #767676 更浅的灰色，作为白色背景上的文字都将无法通过 WCAG AA。
这意味着 CSS 的 gray（#808080）在技术上无法通过 WCAG AA——它与白色的对比度仅约为 3.95:1。尽管名为"gray"且看起来相对较深，但它还不够深，不足以作为无障碍正文文本使用。任何面向无障碍目标的文本，请使用 #767676 或更深的颜色。
冷灰与暖灰：设计师真正关心的问题
在实践中，设计师面对的更重要区分不是"gray 还是 grey"——而是暖灰与冷灰的选择。
冷灰偏蓝、绿或紫。感觉简洁、现代、清冽。与其他冷色搭配效果好，营造出科技感强的视觉风格。
暖灰偏红、橙或黄。感觉自然、亲切、质朴。与木质色调、陶土色及其他暖色天然材质搭配效果好。
中性灰——完全非彩色，不带任何色相——介于两者之间。实际上，真正的中性灰会因周围颜色的不同而产生不同的感知效果（这一现象被称为同步对比效应）。
暖灰与冷灰示例
类别
十六进制
RGB 分析
性格特质
冷蓝灰
#708090
蓝色通道略高
板岩色、商务感
冷紫灰
#9E9EAE
蓝色+红色高于绿色
现代、极简
中性灰
#808080
R=G=B 完全相等
纯粹、非彩色
暖黄灰
#9B9B8A
红色+绿色高于蓝色
质朴、自然
暖棕灰
#8A8070
红色最高，蓝色最低
灰褐色、有机感
暖粉灰
#9E8F8F
红色最高
接近裸粉色调
如何通过十六进制代码判断暖灰还是冷灰
查看 RGB 值：
- 如果蓝色通道最高 → 冷灰
- 如果红色或绿色最高 → 暖灰
- 如果三者完全相等 → 中性灰
例如：
- #708090 = rgb(112, 128, 144) → 蓝色（144）最高 → 冷灰
- #9B9B8A = rgb(155, 155, 138) → 蓝色（138）最低 → 暖灰
- #808080 = rgb(128, 128, 128) → 三者相等 → 中性灰
灰色在现代网页设计中的应用
灰色可以说是网页设计中最重要的颜色。它出现在：
- 页面背景——使用浅灰色代替纯白色可减少眼睛疲劳，并建立视觉层次
- UI 组件——边框、分隔线、输入框背景、卡片背景几乎无一例外地使用灰色
- 排版——网页正文文字通常是深灰而非纯黑，这样可以减少刺眼感
- 禁用状态——变灰的交互元素普遍表示不可用状态
网页设计系统的实用灰色值
使用场景
推荐十六进制
备注
页面背景（浅色模式）
#F5F5F5
几乎不带灰，非常干净
卡片背景
#F9F9F9
比页面背景略浅
边框颜色
#E5E5E5
可见但不突兀
次要文字/说明文字
#6B7280
Tailwind 的 gray-500
正文（无障碍）
#374151
Tailwind 的 gray-700
标题文字
#111827
近黑，偏暖
深色模式背景
#1F2937
Tailwind 的 gray-800
深色模式表面
#374151
Tailwind 的 gray-700
Tailwind CSS 灰度系统（#F9FAFB 至 #030712）已成为网页设计系统的广泛参考。使用色调生成器可以从任意基础灰色创建类似 Tailwind 风格的 50–950 灰度系列。
深色模式灰色策略
深色模式设计需要谨慎选择灰色。大多数情况下应避免使用纯黑色 #000000 作为深色模式背景——纯黑色与白色文字产生的对比过于强烈，令人不适。建议如下：
深色模式背景最适合在 #121212 到 #1E1E1E 范围内——深暗但非纯黑
深色模式表面（卡片、对话框）应比背景亮一两个层级：#2C2C2C 到 #3A3A3A
深色背景上的文字最好使用偏暖的近白色（#E8E8E8 至 #F5F5F5），而非纯白
在不同颜色模型间转换灰色
对于任何灰色，转换都很简单，因为非彩色属性使得 CMYK 等其他模型的行为具有可预测性：
灰色
HEX
RGB
HSL
CMYK
白色
#FFFFFF
rgb(255,255,255)
hsl(0,0%,100%)
C:0 M:0 Y:0 K:0
浅灰
#D3D3D3
rgb(211,211,211)
hsl(0,0%,83%)
C:0 M:0 Y:0 K:17
中性灰
#808080
rgb(128,128,128)
hsl(0,0%,50%)
C:0 M:0 Y:0 K:50
深灰
#404040
rgb(64,64,64)
hsl(0,0%,25%)
C:0 M:0 Y:0 K:75
近黑
#1A1A1A
rgb(26,26,26)
hsl(0,0%,10%)
C:0 M:0 Y:0 K:90
对于真正的非彩色灰色（R=G=B 相等），CMYK 值始终为 C:0 M:0 Y:0 K:{X}，其中 K 等于 100 减去明度百分比。使用颜色转换器处理带有非零色相的暖灰和冷灰，这类灰色的 CMYK 值会更为复杂。
关键要点
拼写："Gray"是美式英语；"grey"是英式英语。在 CSS 中，两种拼写对命名颜色均有效；大多数对应相同的十六进制值。基本的 gray 和 grey 都等于 #808080
技术定义：真正的非彩色灰色具有相等的 RGB 通道（R=G=B）且 HSL 饱和度为 0%。通道中任何不平衡都会产生暖灰（红色/绿色更高）或冷灰（蓝色更高）
无障碍关键阈值：#767676 是在白色背景上能通过 WCAG AA（4.5:1）的最浅灰色。CSS 的 gray #808080 不达标——其对比度仅约为 3.95:1
暖冷识别方式：蓝色通道最高 → 冷灰；红色/绿色最高 → 暖灰；各通道相等 → 中性灰
网页设计：灰色背景、边框和文字变体构成了几乎所有 Web UI 的结构层。浅色模式背景建议在 #F5F5F5 附近，深色模式背景建议在 #121212 到 #1E1E1E 之间
使用色调生成器构建完整灰度系列，使用转换器将任意灰色转换为 CMYK、HSL、RGB 或 OKLCH 格式