Palette Generator：配色方案生成器

什么是 Palette Generator？

即将推出: Palette Generator 是一款基于浏览器的工具，通过应用色彩理论算法从单一基础颜色生成数学上平衡的调色板。该工具提供三种模式：和谐模式（包含11种和谐类型：互补色、类似色、三色调和、四色调和、分裂互补色、单色、双分裂互补色、矩形、对冲、五音调和六音调）、生成模式（包含色调/淡色/浅色、受约束随机、WCAG对比度对、渐变插值和图像颜色提取）以及情绪模式（包含20种基于情绪的预设）。结果是一套调色板，您可以将其复制为十六进制值，下载为CSS变量文件、JSON对象、SCSS变量或Tailwind配置扩展，或导出为Adobe Swatch Exchange（ASE）文件。所有操作均在浏览器中运行，不向任何服务器发送数据。

主要功能

• 互补色配色方案：使用色轮上直接相对的颜色（相距180°）生成双色调色板，在固有视觉平衡的基础上产生最大对比度。
• 类似色调色板：生成色轮上相邻的三种颜色，创建和谐、低对比度的调色板，非常适合背景和平静的UI设计。
• 三色调和与四色调和：三色调和使用等间距120°的三种颜色；四色调和使用等间距90°的四种颜色。两者都在保持和谐的同时提供丰富的多色选择。
• 分裂互补色方案：互补色方案的更柔和替代——使用基础颜色及其补色两侧的两种颜色，而非补色本身。已在组件中验证为 'split-complementary' 和谐类型。
• 单色变体：通过改变明度生成相同色调的多种深浅变化，创建统一的单色调色板。
• 调整饱和度和明度：基础颜色输入接受任何有效的十六进制值，可手动输入、通过颜色选择器小部件选择，或点击随机按钮随机生成。
• 以多种格式复制颜色：调色板中的每种颜色都有独立的复制按钮。"全部复制"按钮将整个调色板作为逗号分隔的十六进制值写入，并在会话历史记录中记录该操作。
• 将调色板导出为JSON、CSS、SCSS、Tailwind或ASE：直接从工具提供五种导出格式，涵盖网页开发、样式表预处理器和Adobe设计应用程序。

如何使用 Palette Generator

第一步：选择基础颜色

打开 即将推出: Palette Generator。工具加载时使用从您当前网站配色方案派生的默认基础颜色（默认方案使用蓝色）。通过以下三种方式更改：

• 点击颜色样本输入（打开浏览器原生颜色选择器）
• 直接在样本旁的文本字段中输入或粘贴十六进制值
• 点击"随机"按钮生成随机十六进制颜色

大型预览样本实时更新，以对比文本显示基础颜色及其十六进制值。

第二步：选择和谐类型

在基础颜色部分下方，以网格形式显示十一个和谐类型按钮。点击其中一个进行选择：

活动的和谐类型按钮以主要颜色高亮显示。每次选择更改时，生成的调色板立即更新。

第三步：查看生成的调色板

"生成的调色板"部分显示结果的两种视图：

• 水平色块带，每个色块占据等比宽度。点击任意色块直接复制该颜色的十六进制值。
• 色块带下方的列表，显示每种颜色的十六进制代码，附带样本和独立的复制按钮。第一条目标注为基础颜色。

例如，以 #e63946 为基础颜色使用三色调和产生：

#e63946  (基础)
#46e639
#3946e6

第四步：复制或导出

使用导出按钮将调色板保存到您的工作流程中：

• 导出JSON：下载包含 { baseColor, harmonyType, palette } 的 triadic-palette.json。
• 导出CSS：将 triadic-palette.css 下载为 :root CSS自定义属性：--color-1、--color-2 等。
• 导出Tailwind JS：下载 triadic-tailwind.js，其中包含以 palette 为颜色族键的Tailwind配置 theme.extend.colors 块，条目如 color-1、color-2 等。
• 导出SCSS变量：下载包含 $color-1、$color-2 等以及Sass映射的 triadic-palette.scss。
• 导出ASE（高级版）：下载可被Photoshop、Illustrator及其他Adobe应用程序读取的二进制Adobe Swatch Exchange文件。

第五步：保存为预设或重置

如果您经常使用此基础颜色和和谐类型组合，请使用预设面板（Glyph Widgets支持者功能）按名称保存，以便一键调用。要恢复默认值，请点击清除按钮——这将重置为基础颜色 #8467c7 和互补色和谐类型。

实用示例

为落地页设计配色系统

从您的主品牌颜色开始，例如 #0f62fe（IBM蓝）。选择分裂互补色和谐以获得更柔和的对比配对。结果将给您一个主蓝色加两个温暖的强调色选项，它们协调搭配而不冲突。导出为CSS变量并直接粘贴到样式表的 :root 块中。

:root {
  --color-1: #0f62fe;
  --color-2: #fe620f;
  --color-3: #fe0f62;
}

生成Tailwind调色板扩展

您正在构建Tailwind CSS项目并需要自定义颜色族。输入品牌颜色，选择单色以生成从亮到暗的深浅变化，然后导出为Tailwind JS。下载的文件给您一个即可粘贴的 theme.extend.colors 块，每个深浅变化索引为 monochromatic-1、monochromatic-2 等。

为Adobe Illustrator项目准备色板

您需要在印刷设计中匹配网页调色板。输入基础颜色，选择和谐类型，然后导出为ASE。二进制ASE文件遵循ASEF格式，可直接加载到Illustrator的色板面板中，保留所有RGB值，无需手动重新输入。

使用技巧和最佳实践

随机按钮会设置一个完全随机的十六进制基础颜色。使用它来探索您不会有意选择的和谐类型——这是为新设计找到意想不到起点的快速方法。

比较和谐类型时，请注意基础颜色始终是每个生成调色板的第一个条目。这让您可以将调色板锚定在您已经确定的颜色上（标志颜色、品牌规范值），同时探索不同的互补选项。

当您需要三种明确不同的功能颜色时，三色调和调色板效果很好——主要操作、次要操作以及破坏性或警告状态。120°的间距确保没有两种颜色在视觉上过于相似。

为了确保无障碍访问，在最终确定之前请通过 Contrast Checker 检查生成调色板中的颜色。互补色对通常满足WCAG对比度要求，但类似色调色板可能产生用于文本时不合格的组合。

历史记录面板（支持者功能）会记录每次"全部复制"操作及基础颜色和和谐类型，让您无需记住确切值即可返回到本次会话中早前生成的调色板。

常见问题及故障排除

输入十六进制值时调色板不更新：该工具对文本输入中的每次按键都有响应。如果您输入不完整或无效的十六进制字符串，generateHarmony 函数会接收当前值，并可能产生意外输出，直到该值成为有效的6位十六进制为止。请输入完整值，或使用颜色选择器输入以确保有效结果。

随机按钮生成非常暗或非常亮的调色板：generateRandomColor() 函数生成完整范围的十六进制值，包括近乎黑色和近乎白色的颜色。如果随机结果过于极端，请再次点击随机，或使用颜色选择器手动调整基础颜色。

导出ASE产生Adobe无法打开的文件：ASE导出使用DataView在浏览器中构建二进制ASEF格式文件。如果下载包含零字节或文件被拒绝，请检查您的浏览器是否支持带有 application/octet-stream 的 Blob。现代基于Chromium的浏览器和Firefox可正确处理此问题。

"全部复制"复制的是逗号分隔的列表，但我需要换行分隔的值：剪贴板输出使用 , 作为分隔符。将值粘贴到文本编辑器中，如果您的目标工具需要每行一个值，请使用查找替换将 , 更改为换行符。

清除按钮重置为默认值：清除按钮设计用于恢复默认设置，包括当前网站配色方案中的基础颜色和互补色和谐类型。这是预期行为——它不会恢复之前的自定义颜色。

隐私与安全

Palette Generator 完全在客户端运行。所有色彩和谐计算均在您的浏览器中使用JavaScript完成——不向任何服务器传输颜色值、偏好设置或导出数据。导出的文件（JSON、CSS、SCSS、Tailwind JS、ASE）作为内存中的Blob对象生成，并直接下载到您的设备。页面加载后，该工具可离线使用。

常见问题解答

Palette Generator 免费吗？

是的。核心调色板生成和所有标准导出格式（JSON、CSS、SCSS、Tailwind JS）均免费，无需账户。ASE导出是Glyph Widgets支持者功能，通过在Ko-fi上捐赠5美元或以上可获得，捐赠后可享受30天高级访问权限。

Palette Generator 可以离线使用吗？

可以。页面在浏览器中加载后，所有颜色计算和文件导出都可以在没有互联网连接的情况下运行。该工具在正常调色板生成过程中不会发出任何网络请求。

我的数据在 Palette Generator 中是否安全？

所有计算均在您的浏览器中本地执行。不向任何服务器发送颜色数据、基础颜色或导出文件。您的调色板工作完全私密。

三色调和与分裂互补色有什么区别？

三色调和在色轮上精确选取120°间隔的三种颜色。分裂互补色取您的基础颜色及其补色两侧的两种颜色——即位于对面色调两侧各30°的两种颜色。分裂互补色通常比真正的互补色对产生更少的视觉张力，同时仍提供良好的对比度。

如何使用导出的CSS变量？

CSS导出生成一个 :root 块，其中包含名为 --color-1、--color-2 等的变量。将此块粘贴到您的样式表中，并在任何地方使用 var(--color-1) 引用这些变量。文件名包含和谐类型，因此 complementary-palette.css 标注清晰。

可以直接在项目中使用Tailwind导出文件吗？

下载的文件是Tailwind配置片段，而非完整的 tailwind.config.js。从 theme.extend.colors 内部复制 colors 对象，并将其合并到您现有的Tailwind配置中。颜色族以 palette 为键，条目如 color-1、color-2 等，因此您可以在模板中将颜色引用为 text-palette-color-1 或 bg-palette-color-2。

ASE导出格式是什么，面向哪些用户？

ASE（Adobe Swatch Exchange）是一种二进制格式，用于存储色板以供Adobe Creative Suite应用程序使用，包括Photoshop、Illustrator和InDesign。同时从事网页设计（CSS）和印刷设计（Adobe应用程序）的设计师可以使用ASE导出功能，在两种环境中保持颜色一致性，无需手动重新输入值。

每种和谐类型生成多少种颜色？

互补色生成2种颜色；类似色、三色调和、分裂互补色和对冲各生成3种；四色调和和矩形各生成4种；双分裂互补色和五音调各生成5种；六音调生成6种；单色生成数量可变的深浅变化。所有调色板条目均显示在调色板色带及其下方的列表中。

我可以从图像中提取的颜色开始吗？

可以。使用 即将推出: Image Color Picker 从照片中提取颜色，复制其十六进制值，然后将其粘贴到Palette Generator的基础颜色文本字段中，围绕它构建和谐调色板。

可以保存我喜爱的调色板吗？

拥有Glyph Widgets支持者账户后，预设面板允许您保存存储基础颜色和和谐类型的命名预设。历史记录面板还会记录过去的"全部复制"操作，便于找到之前生成的调色板。

相关工具

• 即将推出: Color Blender — 混合两种颜色并生成中间步骤，补充调色板工作。
• Color Picker — 在生成调色板之前，使用色轮或滑块选择精确的基础颜色。
• 即将推出: Gradient Generator — 使用生成调色板中的颜色创建CSS渐变。
• Contrast Checker — 在用于UI文本之前，验证调色板中任意两种颜色的WCAG对比度比率。

立即试用 Palette Generator：即将推出: Glyph Widgets Palette Generator