实用工具2026-05-304 分钟阅读

在线调色板生成器：色阶、和谐色系与 CSS 导出

什么是调色板生成器

调色板生成器根据一枚种子色自动展开可用色组，方便做品牌强调色、UI 主题和图表序列。本站调色板生成器全程在浏览器内：选基础色 → 选方案 → 复制 HEX、CSS 变量或 Tailwind 片段。

工具真实提供的方案

方案	产出	典型用途
明暗色阶	11 档（`50`–`950`），基础色在 `500`	Tailwind 风格品牌色阶、按钮状态
互补色	基础色 + 色相 +180°	高对比强调
类似色	基础色 ±30°	温和邻近 UI
三角色	+120° / +240°	三角角色（主色 / 辅色 / 强调）
分裂互补	+150° / +210°	有对比、比纯互补更柔和
四角色	+90° / +180° / +270°	多色系统（需人工精简）

理论里的「单色」与工具的 明暗色阶 相关但不相同：色阶是在 sRGB 里向白/黑混合；纯色轮单色只微调色相。需要完整浅→深色带时用色阶；需要相关色相时用和谐方案。

为什么要生成而不是手挑

品牌：从 LOGO 一枚 HEX 扩成可用色阶或强调色
UI token：先填 surface / accent，再改名
图表：先用三角/四角拉开色相，再调亮度
无障碍：生成候选后，用对比度检查器验收
原型：换方案不必打开设计稿

如何使用本站工具

选基础色（取色器或 HEX / CSS 颜色字符串）
选方案（色阶或某类和谐色）
生成——色阶 11 档；和谐色 2–4 个命名槽位
点击色块复制 HEX；或点 复制 CSS 变量 / 复制 Tailwind 片段
定稿前用对比度工具抽查正文/背景对

没有独立的 HSL 滑杆面板：改种子色再生成即可。单色格式互转（含 alpha）请用颜色转换器。

仍管用的色彩基础

色轮

和谐色本质是色轮上的色相算术：

         红 (0°)
        /  \
   品红      橙
    |          |
  蓝紫      黄
    |          |
   蓝        黄绿
        \  /
         绿 (120°)

HSL 心智模型

H：0–360°（和谐方案改的就是它）
S / L：旋转色相时保留种子色的饱和度与亮度——偏灰的种子不会突然变艳

示意公式

const complementary = (hue) => (hue + 180) % 360;
const analogous = (hue) => [(hue - 30 + 360) % 360, hue, (hue + 30) % 360];
const triadic = (hue) => [hue, (hue + 120) % 360, (hue + 240) % 360];

本站实现用 colorjs.io 在 HSL 中旋转，再输出每槽 HEX / RGB / HSL。

能直接粘贴的导出形态

CSS 变量（「复制 CSS 变量」输出）：

:root {
  --color-base: #3B82F6;
  --color-complement: #F69C3B;
}

Tailwind 片段（放进 theme.extend.colors）：

brand: {
  'base': '#3B82F6',
  'complement': '#F69C3B',
},

上线前把键名改成语义角色（surface / on-surface / accent）——base、triad-120 只是生成标签，不是设计语言。

生成策略四家族

和谐派（色轮偏移——可预测、偶尔平）、感知渐变派（OKLCH/Lab 插值——数据可视化常用）、提取派（从图取色——忠于品牌、质量看源图）、算法派（黄金比例色相步进——个性强、稳定性一般）。本生成器覆盖 和谐色 + 明暗色阶。图提取与 OKLCH 渐变属于别的环节，不要指望一个工具包办所有家族。

对比度是生成约束，不是事后补丁

先生成再查对比度，和瀑布开发最后补测试一样容易翻车。实用循环：生成 → 选正文/背景候选 → 正文达到 ≥4.5:1（AA）。第二陷阱：色阶在 UI 里看起来有层次，亮度却挤在一起。色阶应大致覆盖近白到近黑，再谈「定稿」。

暗色模式是第二套调色板

filter: invert 会弄坏阴影、品牌色和图片。真暗色按角色重推：近黑表面（避免纯 #000）、正文约 87% 白、强调色略降饱和以免在暗底上「震动」。token 保持语义化，明/暗只是同一角色的两套赋值。

实现注记

色阶模式在 sRGB 向白/黑混合；500 档等于未改的种子色。
和谐模式保留种子饱和度与亮度，只转色相。
非法颜色字符串返回空列表（不抛崩）；改种子再生成。
CSS / Tailwind 仅为复制导出，不写盘、不上传。

FAQ

如何为品牌选色？

明确调性（沉稳、活泼、技术感）
从 LOGO 锁定 1–2 个主色
用互补或分裂互补生成辅色 / 强调色
验收 WCAG AA（正文 4.5:1）

产品调色板要多少色？

通常 3–5 个彩色角色，外加中性色阶。营销页的「60-30-10」仍可用；产品 UI 往往需要比强调色更多的中性色。

如何保证无障碍？

正文 ≥ 4.5:1；大文本（≥18px / 14px 粗体）≥ 3:1
不要只靠颜色传达含义
暗色重赋角色后要重测——对比度是「色对」属性，不是品牌 HEX 的属性

本文由 ToolVault 工具匣提供。相关工具：调色板生成、颜色转换器、对比度检查器。更多见首页。