CSS 命名色参考

Indigo 颜色代码

CSS Indigo·#4B0082

蓝色系冷调深色调高饱和oklch(33.9% 0.179 302)
HEX
#4B0082主色 Token
RGB
rgb(75, 0, 130)屏幕色值
HSL
hsl(275 100% 25%)色相与明度
CMYK
42, 100, 0, 49印刷参考
LAB
20, 52, -53感知坐标
OKLCH
oklch(33.9% 0.179 302)现代感知空间
生成配色方案打开转换器

Indigo 是一个偏蓝紫方向的深色 CSS 命名色，色值为 #4B0082。相比 Navy 或 Dark Blue，它更有个性和情绪感，适合用于高级界面、类代码表面和更具戏剧张力的品牌时刻。

最佳文字颜色白色文字
正文对比度12.95:1
最佳用途高级界面、氛围外壳与蓝紫调强调

色阶

100#DFD1E9
300#AC8AC6
500#6B2E99
600#4B0082
800#36005E

对比度检查

白色文字放在该颜色上

按钮、标签、填充型操作。

12.95:1AAA 级对比

深色文字放在该颜色上

大标题和局部模块。

1.32:1需拉开明度差

该颜色用在浅色表面上

浅底上的链接、边框和图标。

12.30:1AAA 级对比
最佳文字颜色白色文字对比度 12.95:1

专业参考

OKLCHoklch(33.9% 0.179 302)
相对亮度0.0311
来源类型CSS 命名色
颜色分类
蓝色系冷调深色调高饱和
来源上下文
来源类型
CSS 命名色
系统
CSS
最接近颜色
Material Purple 900Ant Design Purple 8Tailwind Violet 900

可访问性矩阵

白色文字放在该颜色上

纯白文字放在当前颜色底上。

12.95:1AAA

深色文字放在该颜色上

深色正文或标题放在当前颜色底上。

1.32:1需拉开明度差

该颜色用在浅色表面上

当前颜色用于浅色界面的链接、描边或图标。

12.30:1AAA

该颜色用在深色表面上

当前颜色用于深色壳层里的描边、标签或图标。

1.32:1需拉开明度差
最佳文字颜色白色文字对比度 12.95:1 · AAA

适用场景

  • 适合高级点缀、类代码表面和氛围型首屏。
  • 比 Navy 更有性格，是偏蓝紫的深色锚点。
  • 可搭配白色、银灰中性和电气蓝或薰衣草色点缀。

参考说明

最后更新
2026-06-09
来源色库
CSS 标准色
整理方式
已核验来源色值 + 站内说明
颜色说明

CSS Indigo 收录自公开发布的 CSS 标准色，保留为可检索的参考色值，可直接用于产品、界面与品牌配色工作。

色相家族

稳定、专业、适合企业与产品系统的蓝色。

来源体系
CSS 命名色

相关颜色

Midnight Blue

CSS Midnight Blue

#191970·CSS 标准色

Dark Blue

CSS Dark Blue

#00008B·CSS 标准色

Navy

CSS Navy

#000080·CSS 标准色

Royal Blue

CSS Royal Blue

#4169E1·CSS 标准色

Rebecca Purple

CSS Rebecca Purple

#663399·CSS 标准色

配色起点

午夜霓虹

打开调色板库

星云跃迁

打开调色板库

高能葡萄

打开调色板库

实现片段

CSS 变量
:root {
  --color-indigo: #4B0082;
  --color-indigo-rgb: 75 0 130;
}
工具类写法
class="bg-[#4B0082] text-white"
class="hover:bg-[#36005E] ring-1 ring-[#4B0082]"
JSON Token
{
  "indigo": "#4B0082",
  "indigoRgb": [75, 0, 130],
  "indigoHsl": [275, 100, 25]
}

继续到工具

生成配色方案查看配色