颜色变体 — 色调、阴影和色调

生成任何颜色的更浅、更深和去饱和变体。非常适合UI组件、设计系统和品牌配色方案。

颜色选择器

选择或输入颜色代码

#2596BE

HSL/HSV 方形选择器

颜色变体

此部分的目的是以10%的增量准确生成所选颜色的色调（添加纯白色）和阴影（添加纯黑色）。

阴影

通过添加黑色到基础颜色，创建更深层次的颜色。阴影通常用于创建深度和层次感。

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

#2596BE

#2187AB

#1E7898

#1A6985

#165A72

#134B5F

#0F3C4C

#0B2D39

#071E26

#040F13

#000000

色调

通过添加白色到基础颜色，创建更浅层次的颜色。色调通常用于创建明亮和清新的颜色。

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

#2596BE

#3BA1C5

#51ABCB

#66B6D2

#7CC0D8

#92CBDF

#A8D5E5

#BEE0EC

#D3EAF2

#E9F5F9

#FFFFFF

色调

通过添加灰色到基础颜色，增加其亮度。色调看起来比基础颜色更加精致和复杂。

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

#2596BE

#2E94B8

#3792B2

#408FAB

#498DA5

#538B9F

#5C8999

#658793

#6E848C

#778286

#808080

色相

色相是指从红色到紫色的基本颜色族。色相是色轮上基础颜色的变化。

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

#26C04F

#26C06E

#26C08C

#26C0AB

#26B5C0

#2697C0

#2678C0

#2659C0

#263AC0

#3026C0

#4F26C0

冷暖色调

颜色通常根据我们的感知分为冷色和暖色。绿色和蓝色是冷色，而红色和黄色是暖色。

10%

20%

30%

40%

50%

60%

70%

80%

90%

100%

#97C026

#59C026

#26C030

#26C06E

#26C0AB

#2697C0

#2659C0

#3026C0

#6E26C0

#AB26C0

#C02697

常见使用场景

• UI 组件状态（悬停、激活、禁用）• 使用阴影和 highlights 创建深度• 构建一致的颜色系统

设计系统提示

这些变体构成了一个连贯的颜色调色板的基础。导出它们以在整个项目中保持一致性。

格式转换

配色组合

对比度检查

色盲模拟

核心功能

色阶变化一屏对比
围绕一个基础色生成更亮的浅色、更深的暗色和更柔和的色调。
同源颜色统一查看
在一个视图中比较不同变化层级，便于做按钮状态、背景层级和品牌辅助色。
即时颜色代码输出
每个变化结果都能直接查看 HEX、RGB 和 HSL 值。
适合设计系统
快速生成 hover、active、muted、surface 等语义层级。
一键复制结果
把需要的颜色直接复制到 CSS、Figma、产品设计稿或文档中。

如何使用

选择基础颜色 — 输入 HEX 颜色值或直接可视化选色。

查看变化类型 — 对比 tint、shade 和 tone 三类结果。

挑选可用层级 — 找出适合界面层次、状态色或品牌延展的颜色步骤。

复制颜色代码 — 把需要的变化色直接用于产品设计和开发。

查找常见问题的答案

什么是颜色变体？

颜色变体是围绕同一个基础色生成的不同明暗和强度版本，包括浅色、暗色和柔和色。

tint、shade 和 tone 有什么区别？

tint 更亮，shade 更深，tone 则更柔和，三者适合不同的界面层级和视觉语气。

为什么设计系统需要颜色变体？

因为一个品牌主色通常不够用，界面还需要 hover、active、surface、disabled 等多个层级颜色。

生成后的颜色可以直接复制吗？

可以。每个变体都能直接复制，用于设计稿、样式表和组件规范。

这个颜色变体工具免费吗？

是的。颜色变体生成器可直接在线使用，无需注册。