什么是色彩深浅生成器?
色彩深浅生成器帮助您从任意基础颜色创建完整的颜色变化。它生成三种类型的颜色变化，这对于构建统一的设计系统和用户界面至关重要。
色调
深色
灰调
为什么使用颜色变化?
一致的色阶是现代设计系统的基础。它们使设计师和开发人员能够轻松创建和谐、易用的界面。
交互状态
为按钮、链接和 UI 组件创建悬停、激活、聚焦和禁用状态，实现一致的颜色渐进。
无障碍访问
构建具有适当对比度的无障碍颜色组合，满足文本和交互元素的 WCAG 指南要求。
视觉一致性
通过系统生成的色阶在整个项目中保持统一的视觉语言。
深色模式支持
从现有品牌颜色生成深色模式调色板，确保无缝的主题切换。
您的数据保持私密
如何使用色彩深浅生成器
按照以下简单步骤，在几秒钟内生成专业调色板：
选择基础颜色
使用以下灵活的输入方式之一选择起始颜色：
- 颜色选择器 - 点击色块打开可视化选择器，操作直观便捷
- HEX 输入 - 直接输入 HEX 代码（例如 #3B82F6 或不带井号的 3B82F6）
- 随机按钮 - 点击生成随机颜色，激发创意灵感
调整设置
自定义生成多少个变化及其强度：
- 步数 - 选择每行 5、10、15 或 20 个颜色变化，实现不同的细腻程度
- 增量 - 设置步骤之间的强度跳跃（5%、10% 或 20%）以控制颜色渐进
复制颜色
通过多种便捷方式获取颜色：
- 单个颜色 - 点击任意色块即可立即将其 HEX 代码复制到剪贴板
- 所有颜色 - 使用"全部复制"按钮一次性导出整个调色板
导出调色板
从导出菜单中选择您喜欢的格式：
- CSS 变量 - 适用于现代 CSS 的即用自定义属性
- SCSS 变量 - 适用于预处理器工作流的 Sass 变量声明
- Tailwind 配置 - 适用于 Tailwind CSS 项目的颜色配置对象
- JSON - 与任何应用程序或设计工具兼容的结构化数据格式
功能特性
三种颜色变化类型
色调
深色
灰调
灵活控制
- 可调步数 - 为每种颜色类型生成 5 到 20 个变化，实现精确控制
- 自定义增量 - 选择颜色之间 5%、10% 或 20% 的强度跳跃
- 实时预览 - 调整设置时立即看到变化，无延迟
多种输入方式
可视化颜色选择器
使用直观、用户友好的界面选择颜色，让颜色选择变得轻松自如。
HEX 代码输入
直接输入精确的颜色值进行精准工作。支持完整和简写 HEX 格式。
随机生成器
一键发现新的颜色组合。非常适合创意探索和灵感激发。
导出选项
CSS 变量
SCSS 变量
Tailwind 配置
JSON 格式
轻松分享
- URL 参数 - 通过链接分享您的精确调色板配置，所有设置都会保留
- 一键复制 - 立即将单个颜色或整个调色板复制到剪贴板
常见问题
色调、深色和灰调有什么区别？
色调是通过向颜色添加白色创建的，使其逐渐变浅同时保持色相。深色是通过添加黑色创建的，使颜色逐渐变深。灰调是通过添加灰色创建的，这会降低颜色的饱和度（强度）而不会显著改变其明度，从而产生更柔和、更精致的变化。
步数和增量如何协同工作？
步数决定在每行中生成多少个色块，而增量设置每步之间的百分比差异。
例如，使用 10 步和 10% 增量，您将获得 10%、20%、30%... 直到 100% 混合的颜色。如果您选择 20% 增量和 10 步，您只会看到 5 个色块（20%、40%、60%、80%、100%），因为更高的百分比会超过 100%。
我可以使用简写 HEX 代码吗？
可以，该工具会自动扩展简写 HEX 代码。例如，输入 #F00 将自动转换为 #FF0000。您也可以省略井号 - 3B82F6 和 #3B82F6 都可以完美使用。
如何分享我的调色板？
只需从浏览器的地址栏复制网址。它包含所有设置（基础颜色、步数、增量），这些设置以 URL 参数编码，任何人打开时都会重现完全相同的调色板。
这非常适合：
- 与团队成员和客户分享
- 收藏您喜欢的调色板
- 包含在设计文档中
我应该使用哪种导出格式？
根据您的项目需求选择：
- CSS 变量 - 适用于原生 CSS 项目或 CSS-in-JS 解决方案（如 styled-components）
- SCSS 变量 - 适用于使用 Sass/SCSS 预处理器的项目
- Tailwind 配置 - 适用于 Tailwind CSS 项目，直接粘贴到 tailwind.config.js 中
- JSON - 适用于自定义实现、设计工具或需要结构化数据时
我的数据会存储在某处吗？
不会，绝对不会。所有颜色计算完全在您的浏览器中使用 JavaScript 进行。不会向任何服务器发送任何内容，我们也不会以任何方式存储、跟踪或收集您的颜色选择。
还没有评论，快来发表第一条！