调色板生成器

用五种方式生成配色方案

这款配色方案生成器可以替代一整套独立工具。点击「生成」获取随机配色方案，从基础色调出色彩协调方案，从图片或照片中提取颜色，将单个十六进制代码扩展为完整配色，或将颜色名称或词语转换为可复现的调色板。设置3至10种颜色，锁定你喜欢的颜色，重新生成其余颜色——无需账户，数据不离开你的浏览器。

单击任意色块复制其值，在HEX、RGB和HSL之间切换格式，拖动色块重新排序。按空格键即可立即生成新配色——这正是Coolors流行的工作流程，在这里无需付费即可使用。

从图片、十六进制代码或颜色名称中提取颜色

从图片：拖入一张照片，工具会在隐藏的HTML5 Canvas上使用中值切割算法提取主要颜色——非常适合从产品图、品牌照片或情绪板中匹配配色。图片保留在你的设备上，永远不会上传到服务器。Coolors对Pro订阅用户收费提供此功能；在这里完全免费。

从十六进制代码：粘贴品牌色并将其作为锚点，生成器会自动创建相似色、互补色和明暗变体。从颜色名称：输入任意词语，确定性哈希算法会生成调色板，同一词语始终产生相同颜色——比基于AI的配色生成器更稳定可靠的离线替代方案。

基于真实色彩理论的色彩协调

协调模式通过在色轮上旋转色相来应用色彩理论。互补色相距180°，产生强烈对比；相似色在±30°范围内，营造平静统一的感觉；三角配色使用相隔120°的三种色相；四角配色使用相隔90°的四种；分裂互补色在150°/210°处软化对比冲突；单色保持单一色相并在调色板中变化明度。

每个生成的颜色还附带从50到900的完整深浅色阶——这是真实UI设计系统中悬停状态、边框颜色和背景变体所需的明暗梯度。

UtiloKit与Coolors、Adobe Color和Paletton的比较

Coolors是最受欢迎的调色板工具，拥有出色的锁定/重新生成工作流程和庞大的探索社区。Coolors Pro（每月4美元）将图片提取、高级导出和调色板历史记录置于付费墙后。免费版不含原生Tailwind导出。Adobe Color在WCAG无障碍检测和色彩协调可视化方面表现良好，但保存调色板需要免费的Adobe账户，且到达导出步骤需要更多点击。

Paletton在色彩理论方面很强，但只显示四种协调类型，不包含图片提取功能。UtiloKit融合了三者的核心优势——Coolors式锁定、Adobe Color的WCAG面板、图片提取，以及Tailwind/SCSS导出——无需账户、无付费墙、工具本身无广告。

锁定喜欢的颜色，持续迭代调整

好的配色方案来自反复迭代，而非一次生成。锁定一个色块，它就保持不变。按下「生成」或空格键时，只有未锁定的色块会改变。保留你喜欢的主色，调整强调色，持续优化直到整套配色满意——然后直接导出。

你可以同时锁定多个颜色。锁定品牌主色和中性背景色，让工具推荐强调色。找到合适的强调色后将其锁定，然后重新生成辅助色调。这模拟了设计师手动创建调色板的方式，但速度快得多。

导出为CSS、Tailwind、SCSS、JSON、PNG和可分享链接

调色板准备好后，以项目所需的格式导出。CSS生成包含自定义属性的:root块。Tailwind生成可直接粘贴到tailwind.config.js的theme.extend.colors对象。SCSS生成Sass兼容的$变量声明。JSON以HEX、RGB和HSL格式列出每种颜色，供JavaScript或设计令牌管道使用。下载PNG色板表用于品牌文档或演示文稿。复制将调色板编码在URL中的可分享链接，让团队成员看到与你完全相同的内容。

内置WCAG对比度检测

调色板只有在文字清晰可读的情况下才算完成。对比度面板显示每种颜色相对于白色和黑色文字的WCAG对比度，并标注AA和AAA通过/失败徽章。WCAG 2.1 AA要求普通文字4.5:1，大文字3:1。AAA要求普通文字7:1。大多数调色板工具跳过这一步或将其置于高级版本后——这里内置此功能，在生成或修改色块时实时运行。

无需注册，无需上传，数据不离开你的浏览器。每项调色板操作——随机生成、图片提取、协调计算、对比度检测和导出——均在本地JavaScript中运行。将这款免费配色方案生成器收藏起来，用于网页设计、品牌标识、插画、幻灯片和季节性或婚礼配色方案。