在线免费颜色深浅生成器
从任意基础颜色生成浅色和深色变体，点击色块即可复制十六进制代码。
Who uses the 颜色深浅生成器?
- 为设计系统和组件库创建品牌色彩调色板的前端开发者。
- 为悬停/激活状态挑选品牌颜色的浅色或深色变体的设计师。
- 为视觉一致的界面构建统一色阶梯度的 UI 设计师。
How the 颜色深浅生成器 works
输入一个基础 HEX 颜色，或通过取色器选择一个。
工具会基于你的基础颜色生成 9 个更浅的色调和 9 个更深的色阶，以 hex 色板形式展示。
点击任意色板即可将其 hex 代码复制到剪贴板。
基础颜色本身会单独显示在浅色调和深色阶两行之间。
Tips & tricks
- 点击任意色板——不只是基础颜色——即可复制该特定的 hex 代码；一个小的“Copied!”提示会确认操作成功。
- 没有“全部导出”按钮，因此若需要完整的 CSS 变量或 Tailwind 配置代码块，请逐个复制你需要的色板。
- 由于混合方式是简单的 RGB 混合，饱和色的极浅色调可能会比经过感知校准的调色板工具看起来略显发灰。
- 在文本框中直接输入 hex 代码以获得精确颜色，而不是依赖取色器的色板网格。
Frequently Asked Questions
这个工具生成多少种颜色？
总共 19 种：9 个色调（更浅，向白色混合）、你的基础颜色，以及 9 个色阶（更深，向黑色混合）。色板标注的是它们各自的 hex 代码，而不是编号的层级。
这个工具是否使用 Tailwind 的 50–950 命名规范？
不是——色板显示为普通的 hex 代码，不带 Tailwind 的数字层级标签（50、100、200……950）。如有需要，你可以自行将生成的 hex 值对应到 Tailwind 的命名上。
色阶（shade）和色调（tint）有什么区别？
色调（tint）是与白色混合的颜色（更浅）。色阶（shade）是与黑色混合的颜色（更深）。本工具会从你的基础颜色同时生成这两个方向。
这个工具使用什么颜色混合方法？
一种简单的线性 RGB 混合，向白色（色调）或黑色（色阶）过渡。它没有使用像 OKLCH 这样感知均匀的色彩空间，因此非常饱和的色相在变亮或变暗时，相较于中性色可能会显得略微不均匀——没有切换混合方法的选项。
我可以把调色板导出为 CSS 变量或 Tailwind 配置文件吗？
不能自动导出——没有批量导出按钮。请点击你需要的每个色板，然后手动将其 hex 代码粘贴到你的 CSS 变量或 Tailwind 配置中。
Is my data safe when using the 颜色深浅生成器?
Completely safe. The 颜色深浅生成器 processes everything locally in your browser. No input data, results, or usage information is ever transmitted to or stored on any server.
Can I use the 颜色深浅生成器 output in commercial projects?
Yes. The 颜色深浅生成器 is a utility tool and its output carries no licensing restrictions. You are free to use results in any project, commercial or personal.
Does the 颜色深浅生成器 follow official standards?
Yes. The 颜色深浅生成器 is built to comply with the relevant industry standard or specification for this utility type. If you encounter an unexpected result, verify your input against the specification — edge cases outside the standard may produce undefined behaviour.