Web Utilities颜色色调与阴影生成器
从任意基础颜色生成色调、阴影和色度。创建 Tailwind 风格的 50–950 颜色刻度，复制 CSS 变量，即时构建完整的设计系统调色板。
hsl(217, 91%, 60%)
210
基础颜色
#3B82F6
CSS 自定义属性
:root {
--tint-1: #DFEAFD;
--tint-2: #BED6FC;
--tint-3: #9EC1FA;
--tint-4: #7DADF9;
--tint-5: #5D98F7;
--color-base: #3B82F6;
--shade-1: #0B64F4;
--shade-2: #0950C3;
--shade-3: #073C92;
--shade-4: #052861;
--shade-5: #021431;
/* Tones */
--tone-1: #4C87E6;
--tone-2: #5B8BD7;
--tone-3: #6B8EC7;
--tone-4: #7A92B8;
--tone-5: #8A95A8;
}色调
#DFEAFD
#BED6FC
#9EC1FA
#7DADF9
#5D98F7
阴影
Base#3B82F6
#0B64F4
#0950C3
#073C92
#052861
#021431
色度
#4C87E6
#5B8BD7
#6B8EC7
#7A92B8
#8A95A8
点击任意色块复制其十六进制值
相关工具
关于颜色色调与阴影生成器
工作原理
- 使用颜色选择器或十六进制输入框输入或选择任意基础颜色。
- 选择要生成的步骤数（色调和阴影）。
- 在经典模式（色调、阴影、色度）和 Tailwind 模式（50–950）之间切换。
- 点击任意色块即可将其十六进制值复制到剪贴板。
- 使用「复制全部为 CSS」获取完整调色板的 CSS 自定义属性。
常见使用场景
- 为 UI 框架构建设计系统颜色调色板。
- 为自定义主题生成 Tailwind CSS 兼容的颜色刻度。
- 创建保持品牌标识的无障碍颜色渐变。
- 探索品牌颜色在所有亮度级别上的外观。
- 为 Figma 或 Storybook 的设计交付生成颜色令牌。
常见问题
什么是颜色色调？
色调通过向基础颜色添加白色来创建，使其更亮、饱和度更低。色调保留原始色相但增加亮度，产生类似粉彩的变体，适用于背景、悬停状态和 UI 细微强调。
什么是颜色阴影？
阴影通过向基础颜色添加黑色来创建，使其更暗。阴影保留原始色相同时降低亮度，通常用于文本颜色、边框、按下状态和深色背景区域。
什么是颜色色度？
色度通过向基础颜色添加灰色来创建，降低饱和度而不显著改变亮度。色度产生更柔和的颜色变体，适合中性 UI 组件。
什么是 Tailwind 风格调色板模式？
Tailwind 模式生成 11 个刻度：50、100、200、300、400、500、600、700、800、900 和 950，与 Tailwind CSS 的命名约定相同，便于创建可直接用于 tailwind.config.js 的自定义颜色系列。
如何使用生成的 CSS 变量？
工具输出一个 :root { } 块，包含每种生成颜色的 CSS 自定义属性。将其复制到全局样式表中，通过 var(--tint-1)、var(--shade-3)、var(--color-500) 等引用颜色。
可以生成多少个步骤？
在经典模式下，可以为色调和阴影选择 2 到 10 个步骤。Tailwind 模式始终生成固定的 11 步刻度。
可以复制单个颜色值吗？
可以。点击任意色块即可立即将其十六进制值复制到剪贴板。也可以使用「复制全部为 CSS」按钮一次性获取整个调色板。
该工具支持哪些颜色格式？
可以在文本字段中输入任何 6 位十六进制颜色（如 #3B82F6），或使用浏览器原生颜色选择器。所有输出值均为十六进制格式。
生成的调色板是否具有无障碍性？
该工具生成感知均匀的颜色，但 WCAG 对比度合规性取决于文本和背景颜色的搭配方式。请使用 UI 颜色无障碍检查工具验证对比度比率。
该工具对设计系统有何用处？
设计系统通常需要每种品牌颜色的完整颜色刻度。该工具自动化了这一过程——输入品牌颜色一次，即可获得适用于 Figma tokens、Style Dictionary 或 Tailwind 配置文件的完整刻度。
该工具会存储我的颜色吗？
不会。所有颜色计算完全在浏览器中使用 JavaScript 进行。不会向服务器发送任何数据，会话之间不会存储任何内容。
色调/阴影与渐变有什么区别？
渐变是图像或 CSS 属性中两种或多种颜色之间的平滑视觉过渡。色调和阴影是单一色相系列中离散的、命名的颜色停止点，用作设计令牌中的单个颜色值。