颜色色阶生成器

颜色色阶生成器: 用途

选择一种颜色，工具会在 OKLCH 色彩空间中计算并生成 11 个色阶，从接近白色到接近黑色：色相保持不变，每一级只改变明度。基础色会放入明度最接近的那一级，不做任何改动。

点击某个色阶即可复制其 HEX，也可以复制全部 CSS 变量，或用你选定的名称复制 tailwind.config 对象。

使用方法

1. 在选择器中选择基础色，或输入 HEX。
2. 为颜色取个名称。
3. 复制某个色阶、CSS 变量或 Tailwind 色阶。

使用场景

• 为网站或设计系统创建配色。
• 获得同一种颜色的浅色背景和深色文字。
• 在 Tailwind 中搭建品牌色。

常见问题

色阶是如何计算的？

在符合人眼感知的 OKLCH 色彩空间中计算：工具保持基础色的色相，逐级改变明度，并在两端降低饱和度，使很浅和很深的色阶不会过于刺眼。

我的颜色在色阶中的位置？

基础色会被放在明度最接近的那一级，该级使用的正是你的原色，并会被标出。

如何在 Tailwind 或 CSS 中使用？

复制 CSS 变量（--color-50 到 --color-950）或用于 tailwind.config 的对象，并在名称框中改成你的颜色名称。

真的免费吗？

是的，100%免费。无需注册，无需订阅，不限使用次数。所有工具：Tools123是免费的。

相似工具