色彩深浅生成器

关于色彩深浅生成器

此工具可从任意基础色生成系统性的颜色变体。色调将颜色与白色混合以创建更浅的版本，暗色与黑色混合以创建更深的版本，灰调与灰色混合以降低饱和度。这些色彩等级对于构建一致的设计系统、UI 组件和可访问的配色方案至关重要。所有处理都在您的浏览器中完成 — 不会向任何服务器发送数据。

功能特点

• 从任意 HEX 颜色生成色调、暗色和灰调
• 可调节步数（5–20）以实现精细控制
• 支持单个颜色或整个调色板的一键复制
• 以 CSS 变量、JSON 或纯 HEX 列表格式导出
• 实时更新的可视化预览
• 100% 客户端处理 — 数据不会离开您的浏览器

常见问题

色调、暗色和灰调有什么区别？

色调是通过将颜色与白色混合而创建的，使其更浅。暗色是通过与黑色混合而创建的，使其更深。灰调是通过与灰色混合而创建的，在保持相对明度的同时降低饱和度。它们共同构成了完整的色彩等级。

我应该使用多少步数？

对于大多数设计系统，10 步提供足够的粒度（例如 Tailwind CSS 中的 50–900）。对于更简单的项目，5 步即可。对于高度详细的系统，您可以使用多达 20 步。

我可以在 Tailwind CSS 或其他框架中使用这些颜色吗？

可以！导出为 CSS 变量并在样式中引用，或导出为 JSON 以集成到设计令牌中。许多开发人员使用 10 步等级（50、100、200、...、900）作为其色彩系统的基础。

色彩等级有什么用途？

色彩等级用于创建一致的 UI 组件 — 较浅的色调用于悬停状态和背景，基础色用于主要操作，较深的暗色用于按下状态和文本。它们确保整个应用程序的视觉层次和可访问性。