单色调色板生成器
颜色和调色板均在此浏览器中生成。分步模式会在当前标签页的会话存储中保留项目，最长 30 分钟；任何颜色值都不会进入我们的服务器或网址。
创建单色色阶
输入一种颜色，然后选择变换方式、插值色彩空间和色样数量。
支持 #RGB、#RRGGBB、rgb(0–255) 以及使用百分比的 hsl()。不支持 Alpha 通道。
用于 CSS 变量、Tailwind、SCSS 和设计令牌导出。
选定一个基础色，生成器会围绕它构建一套单色调色板：淡色（逐步与白色混合，形成更亮的梯度）、暗色（逐步与黑色混合，形成更深的梯度）以及浊色（与灰色混合以降低饱和度）。它适合需要从单一品牌色生成连贯梯度的设计系统（类似 Tailwind 的 50–950 色阶，但可自由调节），也适合在不离开调色板的情况下挑选悬停态和激活态的颜色。
调色板的生成方式
-
1
输入基础颜色
使用 #RGB、#RRGGBB、整数 rgb() 通道或百分比 hsl()。
-
2
选择调色板类型
选择完整明暗色阶、向白色过渡的淡色、向黑色过渡的暗色或向中性过渡的浊色。
-
3
选择步数
可选 5、9 或 11 步。9 步采用常见的 Material 风格 100–900 标签；11 步再加入 50 和 950，形成 Tailwind 风格色阶。
-
4
复制或导出
复制 HEX、RGB、HSL 或 OkLCH，或导出 CSS、Tailwind、SCSS 和 Design Tokens Community Group JSON。
淡色 vs. 暗色 vs. 浊色
- 淡色 = 基础色 + 白色。更浅，更接近粉彩。
mix(base, #fff, p%)，其中 p 是白色的百分比。 - 暗色 = 基础色 + 黑色。更深，更沉稳。
mix(base, #000, p%)。 - 浊色 = 基础色 + 灰色。明度不变，饱和度降低，更柔和内敛。
这三种变换会呈现不同的视觉性格：淡色轻盈乐观，暗色沉稳严肃，浊色低调而精致。
从一个基础色生成的 9 级梯度
| 步骤 | 说明 | 常用场景 |
|---|---|---|
| 100 | 非常浅 | 表面、标签背景 |
| 200 | 浅色 | 禁用状态 |
| 300 | 中浅 | 边框、分隔线 |
| 400 | 略微暗淡 | 次要文本（浅色背景） |
| 500 | 基础色 | 默认品牌色，你的基准 |
| 600 | 中深 | 主要操作的悬停状态 |
| 700 | 深色 | 激活状态、标题 |
| 800 | 非常深 | 浅色背景上的强文本 |
| 900 | 最深的暗色 | 最高对比度文本 |
数字标签参考常见的令牌命名惯例；生成的颜色不是 Material 或 Tailwind 的官方色值。
为什么单色配色适合界面
- 一致感。 每个元素看起来都明显同属一体。
- 一致性。 重复使用同一色相有助于识别关联，但仅靠这一点并不能让界面适应不同的色觉。
- 简单。 只需一个决定，基础色，就能确定整套调色板。
与中性色搭配
单色调色板同样需要灰色。常见做法：
- 用品牌色生成主梯度（9 级）。
- 用主色去饱和后的版本生成中性梯度（9 级）。
- 也许再加一个强调色（为提示和 CTA 精心挑选的单个色阶）。
请把它视为起始结构，而非固定规则。所需调色板数量取决于产品状态、数据可视化、语义颜色和无障碍要求。
对比度检查点
对于背景之上的文本，WCAG 要求普通文本达到 4.5:1、大号文本达到 3:1。100、500 或 900 等标签并不代表固定的对比度；结果取决于基础色、调色板类型和插值色彩空间。
请务必用对比度检查工具核对你打算使用的具体组合。
导出到你的设计系统
输出格式：
- CSS 自定义属性：
--primary-50: #f0f9ff; --primary-100: ... - Tailwind 配置： 可直接粘贴进
tailwind.config.js → theme.extend.colors的 JS 对象。 - 面向 Sass 项目的 SCSS map。
- 使用 Design Tokens Community Group
$type/$value结构的 设计令牌 JSON。
常见问题
淡色会有意向白色过渡，因此高饱和度基础色可能很快变成粉彩。可比较 HSL 与 OkLCH、减少色样数量，或先选择饱和度较低的基础色。
你可以选择 HSL 或 OkLCH。HSL 调整明度和饱和度轴；OkLCH 调整感知明度和色度，并在需要时降低色度，使结果保持在 sRGB 范围内。
在完整色阶中，基础色是中间的 500 令牌。淡色色阶以基础色结束，暗色色阶从基础色开始，浊色色阶以基础色结束。标签并不保证特定明度。
本工具不与 Figma 直接集成。你可以逐个复制颜色值，或把 CSS、Tailwind、SCSS 以及采用 Design Tokens Community Group 结构的 JSON 文本作为工作流程的起点。
相关工具
GIF 制作器
将一组图片或短视频转换为动画 GIF。导出前可调整帧率、循环次数和尺寸。
图片尺寸调整器
将图片调整到精确的像素尺寸或百分比，同时保持宽高比。适合批量准备图片，无需上传。
图像放大器
使用 AI 超分辨率或经典插值，将低分辨率图像放大 2×、3× 或 4×，同时保留重要细节。
BMP 转 PNG
在浏览器中将 BMP 文件转换为 PNG。无损，保留色深，并可从原始 BMP 的 alpha 通道添加可选透明度。
SVG 转 PNG
在浏览器中将 SVG 文件或 SVG 标记转换为 PNG，选择缩放因子，并保持透明边缘清晰。
邀请函制作工具
制作婚宴、满月酒、生日会或商务活动的精美邀请函。自定义文字与配色，实时预览效果，下载可按 7 寸（5 × 7 英寸）冲印的 PNG。