Softonic

颜色调色板生成器

步 1 / 4 调色板生成器

选择一个基础 HEX 颜色，再选择色彩和谐方案，即可生成可复制到 UI 原型、落地页、图表或设计系统中的调色板。工具会规范化短 HEX 和完整 HEX 值，通过 HSL 中的 hue 与 lightness 偏移生成配色，并返回可点击的色块和 CSS 自定义属性。

调色板生成器如何工作

  1. 1

    输入基础 HEX 颜色

    使用取色器，或输入 #6366F1 这样的值。三位 HEX 简写会自动展开。

  2. 2

    选择和谐方案

    根据需要选择单色、类似色、互补色、三角色或四角色：安静的色阶、相邻色相，或更强的强调色。

  3. 3

    生成并检查色块

    调色板会以可复制的 HEX 色块显示。将颜色用于真实界面前，请先在实际布局中检查。

  4. 4

    导出

    在导出步骤中复制 HEX 列表，或复制 --palette-1、--palette-2 等 CSS 变量。

选择合适的方案

方案 输出 适合用途 发布前检查
单色 同一 hue 的 5 个明暗变化 品牌色阶、卡片、背景 如果整体太平，可补充强调色或中性色
类似色 5 个相邻 hue 渐变、插画、安静的产品页面 确保相邻颜色仍然容易区分
互补色 基础色加相对 hue CTA 强调、徽章、高能视觉 认真测试文字和图标对比度
三角色 3 个等距 hue 活泼品牌、图表、分类颜色 选定一个主色，避免 UI 显得嘈杂
四角色 色轮上的 4 个 hue 仪表盘、标签、更宽的视觉系统 大面积使用时降低饱和度

实用的调色板结构

生成的和谐配色只是起点，不是完整的设计系统。用于生产 UI 时，应按角色命名颜色，而不是按外观命名：primary、secondary、accent、surface、border、text、success、warning 和 error。中性灰色建议单独添加，因为中性色通常比基于 hue 的生成器需要更精细的控制。

先把生成的 HEX 颜色直接放进原型中测试，再保留那些能在真实页面、明暗背景、hover 和 disabled 状态下都表现稳定的颜色。

导出 CSS 变量

导出步骤使用简单的自定义属性：

:root {
  --palette-1: #6366F1;
  --palette-2: #818CF8;
  --palette-3: #4F46E5;
}

粘贴到 CSS、Tailwind theme tokens 或 design tokens 文件时，请把这些变量改成你自己系统中的名称。

HEX、RGB 和 HSL

输入和可见输出使用 HEX，因为它最方便在 CSS、设计工具和任务评论之间复制。工具内部会将基础色转换为 HSL，移动 hue 或 lightness，再把结果转回 HEX。如果需要 RGB 或 HSL 写法，请用颜色代码转换器处理生成的 HEX 值。

对比度与无障碍

和谐配色不保证无障碍。将颜色用于文字、控件或图表前，请用对比度检查工具验证：

  • 普通文字与背景：WCAG AA 至少 4.5:1。
  • 大号文字：至少 3:1。
  • 重要的非文本 UI 部分，例如按钮边框、图标、焦点环和图表边界：与相邻颜色至少 3:1。

也不要只依赖 hue。两个颜色在色块中看起来不同，但用于小字号文字、细图标或状态标签时仍可能失败。

小贴士

  • 从有意义的基础色开始，例如已有品牌色、产品色或活动色。
  • 选择一个主导色，其余颜色作为辅助色。所有颜色权重相同，界面通常会显得拥挤。
  • 在大面积区域降低饱和度，例如应用背景、面板和 hero 区块。
  • 套用主题后重新测试。在白色背景上可用的配色，可能在暗色模式或密集图表中失效。

常见问题

不会。它负责生成色彩和谐方案。发布前，请把重要的前景色和背景色组合放进对比度检查工具中测试。

每种方案遵循色轮上的不同关系。三角色返回三个 hue，四角色返回四个 hue；单色、类似色和互补色则返回五个色块，便于作为工作集使用。

当前输入是 HEX。请先把 RGB 或 HSL 转换为 HEX，再把结果作为基础色使用。

单色和类似色调色板通常更适合安静的 UI 表面。互补色、三角色和四角色更适合强调色、分类颜色和视觉活动。

相关工具

BBCode 转 HTML 转换器

将 BBCode（论坛标记）转换为干净的 HTML。支持格式标签、列表、引用、代码、图片、链接和表格。

二进制转 ASCII 转换器

粘贴二进制（用空格分隔的字节或一长串比特），即可得到它所表示的 ASCII 文本。支持 7 位和 8 位编码。

二进制转八进制转换器

通过每三位分组将二进制转为八进制。适合 Unix 权限、旧系统和紧凑的数字显示。

Base64 转 Hex 转换器

将 Base64 字符串转换为其底层字节的十六进制表示。适合检查令牌、密钥、证书和 JWT。

二进制转十六进制转换器

将二进制输入转换为纯大写十六进制值。非 0 和 1 字符会被忽略，前导零不会保留。

布尔代数化简器

使用 Karnaugh 图和 Quine-McCluskey 算法化简布尔表达式。显示每一步最小化过程以及最终 SOP/POS 形式。