颜色深浅生成器 — Tailwind 风格
选择任意基础色，即可生成完整的11级色阶（50、100、200、300、400、500、600、700、800、900、950），与Tailwind CSS和Material Design的色阶规范保持一致。每个色阶均显示相对白色或黑色文字的WCAG无障碍对比度评级。点击色块复制hex代码，或点击「复制CSS」将所有色阶导出为CSS自定义属性。
工作原理
颜色色阶的工作原理
颜色色阶是基础色的一系列由浅到深的变体，用于在UI设计中构建视觉层次和无障碍对比度。Tailwind CSS的规范使用50、100、200、300、400、500、600、700、800、900和950共11个色阶。数字越小颜色越浅（HSL明度越高），数字越大颜色越深。500级通常最接近输入的基础色。
本工具通过将输入的hex颜色转换为HSL（色相、饱和度、明度），在保持色相和饱和度不变的同时，将每个色阶映射到预定义的明度值来生成色阶。50级对应约97%明度（接近白色），500级对应约52%（中间值），950级对应约12%（接近黑色）。这种方式能在所有亮度级别上保持颜色特性，生成视觉上一致的色板。
色板中的WCAG对比度评级
色板中的每个色阶都会显示相对黑色或白色文字（取可读性更强者）的WCAG（网页内容无障碍指南）对比度评级。评级标准为：AAA（对比度≥7:1，最佳无障碍）、AA（≥4.5:1，普通文字必达标准）、AA Large（≥3:1，仅适用于大号文字和UI组件）以及Fail（<3:1，不适合用于文字）。在许多地区，符合WCAG 2.1 AA标准是无障碍访问的最低法律要求。
使用颜色色板构建UI时，请为背景上的文字选择AA或AAA评级的色阶。通常情况下，50~300级与深色文字有较强对比，700~950级与白色文字有较强对比。中间色阶（400~600）对于小号文字通常处于AA Large或Fail级别，适合用于装饰元素、边框或大号白色文字的背景，但不适合用于小号正文文字。
在CSS和设计系统中使用色板
点击「复制CSS」按钮，可将色板导出为:root块中的CSS自定义属性（CSS变量），直接粘贴到样式表中即可使用。例如，blue-500变量会输出为--color-500: #3b82f6（具体取决于您选择的颜色）。您可以根据项目需求修改变量前缀，例如--brand-500、--primary-500、--blue-500等。CSS自定义属性具有层叠特性，可以按组件或主题进行覆盖。
Tailwind CSS、Material Design、Ant Design、Chakra UI等设计系统均采用编号色阶作为颜色体系。有了一致的色阶，就能自信地做出设计决策：50用于悬停背景，100用于浅色主题的激活状态，500用于主按钮，700用于按钮悬停状态，900用于深色背景。将所有品牌色统一在同一编号色阶上，能够提升设计的可预测性，减少组件层面的设计决策。
常见问题
›色阶数字（50~950）代表什么？
数字遵循Tailwind CSS颜色色阶规范。数字越小颜色越浅：50接近白色，100非常浅，200和300为浅色调。中间值（500）接近原始颜色。数字越大颜色越深：700为深色，900非常深，950接近黑色。色阶并非线性，而是经过调整使整个范围内的步进在视觉上感觉均匀。
›浅色调（tint）和深色调（shade）有什么区别？
浅色调是颜色与白色混合后变亮的结果，深色调是颜色与黑色混合后变暗的结果。用HSL术语来说，浅色调明度较高，深色调明度较低，色相保持不变。本色阶中，50~400为浅色调（比基础色更浅），600~950为深色调（比基础色更深）。500级大致等于基础色本身。
›这个工具是如何生成色阶的？
工具将hex颜色转换为HSL（色相、饱和度、明度）。在保持色相和饱和度不变的同时，将每个色阶编号映射到目标明度值：50级→明度97%，500级→52%，950级→12%。然后将结果转换回hex。这种方式在所有色阶上都能保持颜色的特性（暖度、冷度、鲜艳度）。
›什么是WCAG？为什么色阶会显示评级？
WCAG（网页内容无障碍指南）定义了可读文字所需的最低对比度。AA要求普通文字的对比度为4.5:1，AAA要求7:1。每个色阶的对比度评级显示该背景上的黑色或白色文字是否符合AA或AAA标准，帮助您判断哪些色阶可以安全用于文字，哪些只适合装饰性元素。
›如何在Tailwind CSS中使用这个色板？
Tailwind允许在tailwind.config.js中自定义颜色。在theme.extend.colors下添加色阶：colors: { brand: { 50: '#your-50-hex', 100: '#your-100-hex', ... } }。之后即可使用bg-brand-100、text-brand-700、border-brand-300等类名。对于使用CSS优先配置的Tailwind v4，请将CSS变量输出粘贴到主题定义中。
›为什么所选颜色的500级色阶与输入值不完全一致？
工具会为每个色阶设定特定的目标明度值——500级的目标明度约为HSL的52%。如果您的输入颜色明度不同（例如较浅的颜色明度为70%），500级色阶会被调整至52%。这样可以生成一致的色阶，但意味着500级可能与原始输入不完全相同。如果希望500级与输入颜色完全一致，可以手动调整hex值——色阶将基于您的输入相对生成。
›可以与CSS自定义属性配合使用吗？
可以。点击「复制CSS」即可获取包含所有11级色阶自定义属性的:root块，随时可用。在CSS中通过var(--color-500)、var(--color-50)等方式引用。--color-前缀可以改成任何适合您项目的名称（--brand-、--primary-、--blue-）。自定义属性具有层叠特性，可以限定到某个组件，也可以在媒体查询中覆盖以支持深色模式。
›这些色阶与CSS的color-mix()函数有什么区别？
CSS的color-mix()函数（现代浏览器支持）按百分比混合两种颜色，类似于混合颜料。本工具使用预定义的明度色阶（基于HSL），能生成更可控、更可预测的设计系统色阶。color-mix()更适合一次性混色（例如将品牌色与20%白色混合），而本工具用于生成完整的系统化设计系统色板。两种方法各有其适用场景。
相关工具
最后更新: