调色板生成器 (一基色 5 种方案)

选基色, 选色彩理论方案, 得协调调色板。点色块复制单个 hex 值, 或一次复制所有用于设计工具和 CSS 变量。

基色

配色方案

工作原理

互补: 色轮两端 (相距 180°) 的两个颜色。高对比、鲜艳。用于强调、CTA 按钮、创建焦点。

类比: 色轮上相邻三色 (相距 30°)。和谐悦目、低对比。自然中常见; 适合背景和 UI 表面。

三色: 等距三色 (相距 120°)。鲜艳平衡。用于俏皮或有活力的设计。

四色 (矩形): 形成矩形的四色 (相距 90°)。调色板丰富但更难平衡 — 通常用一个为主导, 其他为强调。

单色: 单一色相的色调、色彩、阴影。精致统一。常见于极简设计和企业品牌。

品牌色: 多数项目从现有 logo 或品牌色开始。在所有 5 种方案中作基色测试找最适合你设计的。

灵感: 从摄影、艺术或自然选色。鲜艳颜色 (高饱和、中明度) 作基色最佳; 非常淡或非常暗的颜色产生苍白调色板。

无障碍: 确保最终调色板对文字有足够对比度。用我们的对比检查器验证前景/背景搭配满足 WCAG AA (普通文字 4.5:1)。

CSS 变量: 把调色板颜色定义为 :root 变量 (--color-primary、--color-accent 等), 通过改一处即可换主题。

设计工具: 把 hex 值粘到 Figma、Sketch 或 Adobe XD 的颜色库。多数工具接受 hex 直接; 一些接受 HSL 或命名 CSS 颜色。

限制使用: 即使有 5 色, 真实设计通常 2-3 色突出, 其余少用。60-30-10 法则 (60% 主导、30% 次要、10% 强调) 是有用的起点平衡。

›应该用哪种方案?

类比对多数设计最安全 — 三个邻近色制造和谐而不单调。互补适合强调 (CTA 按钮)。单色最适合极简/精致品牌。三色适合俏皮/有活力感觉。

›可以得到 5 个以上颜色?

本工具不能 — 我们生成标准 2-5 色方案。更大调色板用类比输出并创建每色的单色阴影 (合并方案)。

›算法用感知均匀颜色空间?

我们用 HSL 数学, 快速且可预测。感知均匀结果 (对无障碍调优调色板更好) 高级工具用 OKLCH 或 CIELAB。HSL 对多数设计工作足够。

›我的调色板会无障碍吗?

不会自动。色彩理论方案保证美学和谐, 不保证文字对比度。发布前总用我们的对比检查器检查文字-背景组合。

›可以保存我喜欢的调色板?

暂时不能 — 把 hex 代码复制到你的设计系统或笔记。可书签的调色板 URL 在路线图。

›Material Design 或 Tailwind 调色板呢?

那些是预策划系统。在这里生成基础方案, 然后查找相似的 Material/Tailwind 颜色。一些应用直接导出与这些系统兼容的 hex 代码。

›为什么我的调色板看起来「平」?

如果你的基色非常淡 (高明度) 或非常暗 (低明度), 生成的调色板动态范围有限。选中明度 (40-60%) 和高饱和 (70%+) 的基色得到鲜艳结果。

›数据会上传吗?

不会。所有计算在本地; 不向服务器发送。