Skip to main content

颜色渐变生成器 生成任意颜色的更深渐变,步数可调节。

颜色渐变生成器 illustration
🎨

颜色渐变生成器

生成任意颜色的更深渐变,步数可调节。

1

选择基础色

选择任意颜色作为起始点。

2

调整步骤

选择生成多少个逐渐加深的阴影。

3

复制阴影

复制单个阴影或整个集合。

Loading tool...

What Is 颜色渐变生成器?

颜色渐变生成器通过系统地降低基色在HSL颜色空间中的亮度来创建逐渐加深的版本。这些渐变保留了原始的色调和饱和度,同时向黑色移动,形成了一套连贯的较暗变体。在设计系统中,这对于需要多种强度的品牌颜色的场景至关重要--从用于主要按钮的原始颜色到用于文本、边框和悬停状态的深色版本。与在RGB中简单地添加黑色(这可能会改变感知到的色调)不同,基于HSL的方法可以在整个渐变范围内保留颜色的身份。可调整的步骤数允许您创建从简单的三种渐变到全面的十五步渐变的任何内容。

Why Use 颜色渐变生成器?

  • 基于HSL的加深保留了所有阴影的色调一致性
  • 可调整的步骤数(3到15)适用于任何用例
  • 每种阴影显示其明度百分比以供参考
  • 非常适合构建设计系统颜色比例尺
  • 单击复制个别阴影或完整集合

Common Use Cases

设计令牌

为设计系统生成编号的阴影比例尺(600、700、800、900)。

悬停状态

创建与基础色一致的按钮悬停状态的较暗版本。

文本颜色

找到品牌颜色的较暗阴影用于标题和正文文本。

边框和阴影

获取边框、轮廓和阴影颜色的较暗变体。

Technical Guide

渐变生成器将基色转换为HSL,并通过降低亮度从基值到接近零来创建N个渐变。每个渐变的公式是:L = baseLightness × (1 - i/(N-1)),其中i从0到N-1。这在原始颜色和接近黑色的范围内创建了均匀分布。色调和饱和度保持不变,确保所有渐变都是感知上相同的颜色,但具有不同的暗度。在色彩理论中,渐变是指与黑色混合的颜色,与与白色混合的色调(tint)或与灰色混合的色相(tone)不同。HSL方法比RGB加深更具感知上的均匀性,后者需要成比例地调整所有三个通道。

Tips & Best Practices

  • 1
    使用9个步骤创建标准的设计系统比例尺(100-900)
  • 2
    最暗的阴影适合用于浅色背景上的文本
  • 3
    结合阴影和色调生成器以创建完整的颜色比例尺
  • 4
    暖色(红、橙)的阴影是优秀的深色背景
  • 5
    测试较暗的阴影,以确保其在预期背景上有足够的对比度

Related Tools

Frequently Asked Questions

Q 什么是阴影和色调之间的区别?
阴影是通过添加黑色(减少明度)使颜色变暗。色调是通过添加白色(增加明度)使颜色变亮。色调是通过添加灰色(减少饱和度)使颜色变得柔和。
Q 为什么不直接在RGB中加深?
RGB加深(降低所有通道)会改变感知到的色调。基于HSL的加深保持了色调的恒定,确保所有阴影看起来像同一种颜色的不同强度。
Q 我应该使用多少步骤?
对于设计系统,9-10个步骤(如Tailwind CSS比例尺)。对于更简单的需求,3-5个步骤覆盖基础、较暗和最暗变体。

About This Tool

颜色渐变生成器 is a free online tool by FreeToolkit.ai. All processing happens directly in your browser — your data never leaves your device. No registration or installation required.