设计系统色参考

Tailwind Indigo 600 颜色代码

Tailwind 靛蓝 600·#4F46E5

蓝色系冷调中间调高饱和oklch(51.1% 0.230 277)
HEX
#4F46E5主色 Token
RGB
rgb(79, 70, 229)屏幕色值
HSL
hsl(243 75% 59%)色相与明度
CMYK
66, 69, 0, 10印刷参考
LAB
41, 51, -79感知坐标
OKLCH
oklch(51.1% 0.230 277)现代感知空间

Tailwind Indigo 600 就是 Tailwind CSS 中 `#4F46E5` 对应的官方 Token。如果您搜索的是 `#4F46E5`、`4F46E5 color` 或 `indigo-600`,这个页面就是精确匹配。它比 Indigo 500 更深,常用于 CTA、激活导航、应用层级和需要冷蓝紫锚点的产品界面。

最佳文字颜色白色文字
正文对比度6.29:1
最佳用途精确 `#4F46E5` Token 查询、更强的 CTA 与更深的 Tailwind 产品层级

色阶

100#DFDEFA
300#AEAAF3
500#6F67EA
600#4F46E5
800#3932A5

对比度检查

白色文字放在该颜色上

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

6.29:1可用于正文

深色文字放在该颜色上

大标题和局部模块。

2.73:1需拉开明度差

该颜色用在浅色表面上

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

5.97:1可用于正文
最佳文字颜色白色文字对比度 6.29:1

专业参考

OKLCHoklch(51.1% 0.230 277)
相对亮度0.1170
来源类型设计系统色
颜色分类
蓝色系冷调中间调高饱和
来源上下文
来源类型
设计系统色
系统
Tailwind
色阶
600
系统角色
  • 通常用于更强的操作位、激活态和 hover 强调。
别名
#4F46E54F46E5Indigo 600Tailwind Indigo 600
最接近颜色
Tailwind Indigo 700Material Indigo A400Ant Design Geekblue 6
颜色说明
  • Tailwind Indigo 600 对应的精确 Token 色值就是 `#4F46E5`。
  • 它比 Tailwind Indigo 500 更深、更有力度,但它属于设计系统 Token,而不是 CSS 命名色。
  • 搜索 `#4F46E5` 的用户,通常先需要确认精确 Token 映射和实现语境,而不是先看配色延展。

可访问性矩阵

白色文字放在该颜色上

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

6.29:1AA

深色文字放在该颜色上

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

2.73:1需拉开明度差

该颜色用在浅色表面上

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

5.97:1AA

该颜色用在深色表面上

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

2.73:1需拉开明度差
最佳文字颜色白色文字对比度 6.29:1 · AA

适用场景

  • 适合在 CTA、激活导航或层级锚点场景中,确认 `#4F46E5` 对应的精确 Tailwind Token。
  • 尤其在 value-first 或实现优先的查询里,应优先把它当成设计系统 Token 处理。
  • 如果色相方向对了但当前层级偏重,可优先与 Indigo 500 比较。

参考说明

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

Tailwind 靛蓝 600 收录自公开发布的 Tailwind CSS 色板,保留为可检索的参考色值,可直接用于产品与界面参考工作。

色相家族

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

来源体系
设计系统色板

相关颜色

配色起点

实现片段

CSS 变量
:root {
  --color-tailwind-indigo-600: #4F46E5;
  --color-tailwind-indigo-600-rgb: 79 70 229;
}
工具类写法
class="bg-[#4F46E5] text-white"
class="hover:bg-[#3932A5] ring-1 ring-[#4F46E5]"
JSON Token
{
  "tailwindIndigo-600": "#4F46E5",
  "tailwindIndigo-600Rgb": [79, 70, 229],
  "tailwindIndigo-600Hsl": [243, 75, 59]
}