不喜欢广告？ 去 无广告 今天
Color Scheme Generator (Complementary / Triadic / Analogous)
开发人员
广告 移除？
广告 移除？
指导
配色方案生成器
使用色彩理论生成和谐的配色方案。选择一个基础颜色并选择一种和谐类型 — 互补色、三元色、类似色、分裂互补色、四元色或单色 — 即可即时创建平衡的配色方案。视觉色板显示十六进制、RGB 和 HSL 值。WCAG 对比度检查确保可访问性。导出为 CSS 自定义属性、JSON、Tailwind 配置或 SCSS 变量。
如何使用
使用颜色选择器、十六进制输入、RGB 滑块或 HSL 值输入基础颜色 — 所有输入都会自动同步。选择一种和谐类型，根据色彩理论数学生成 3-6 种颜色的配色方案。每种颜色都显示为带有十六进制、RGB 和 HSL 值以及复制按钮的视觉色板。检查与黑色和白色文本的 WCAG 对比度。以您喜欢的格式导出整个配色方案。
特征
- 6 种和谐类型 — 互补色（180°）、三元色（120°）、类似色（30°）、分裂互补色（150°/210°）、四元色/方形（90°）和单色（饱和度/亮度变化）。
- 多种颜色输入 — 原生颜色选择器、十六进制 (RGB)、RGB 滑块和 HSL 滑块全部实时同步。更改任何输入，其他所有输入都会立即更新。
- 视觉配色方案显示 — 每个颜色的大色块，带有十六进制、RGB 和 HSL 值。对任何值进行一键复制。
- WCAG 对比度检查 — 每个配色方案的颜色都显示与黑色和白色文本的对比度，并带有 AA/AAA 通过/失败徽章。确保您的颜色选择符合可访问性标准。
- 4 种导出格式 — CSS 自定义属性（:root 变量）、JSON 对象、Tailwind 配置颜色和 SCSS 变量。一键复制整个导出块。
- 实时更新 — 更改任何输入，配色方案都会即时重新生成。无需生成按钮。
- 基于 HSL 的计算 — 所有和谐类型都使用数学上正确的 HSL 色相旋转，产生符合色彩理论的准确结果。
颜色和谐类型
互补色： 色轮上相对的两种颜色（相差 180°）。高对比度，鲜艳。最佳用途：号召性用语元素，大胆的设计。
三元色： 等距分布的三种颜色（相差 120°）。平衡，多彩。最佳用途：插图，活泼的设计。
类似色： 色轮上相邻的颜色（相差 30°）。和谐，宁静。最佳用途：自然主题，渐变，连贯的设计。
分裂互补色： 基础颜色 + 补色的两种相邻颜色（150°/210°）。对比度强，张力小。最佳用途：初学者，多功能配色方案。
四元色/方形： 间隔 90° 的四种颜色。丰富，多样。最佳用途：具有多种元素设计的复杂设计。
单色： 具有不同饱和度和亮度的单一色相。优雅，统一。最佳用途：极简设计，单一品牌主题。
广告 移除？
什么是设计中的色彩和谐？
色彩和谐是指在视觉上令人愉悦且平衡的颜色组合。这些组合源自色轮 — 一种基于颜色之间关系的圆形排列。和谐的颜色创造出秩序感和美感。主要的和谐类型（互补色、三元色、类似色等）基于色轮上的几何关系：彼此处于特定角度的颜色倾向于看起来很好。设计师使用这些关系来创建有目的且连贯的配色方案，而不是随机的。
什么是 WCAG 对比度比，为什么它很重要？
WCAG（网页内容可访问性指南）对比度比衡量两种颜色（通常是文本及其背景）之间的亮度差异。1:1 的比率表示没有对比度（相同颜色），而 21:1 是最大对比度（白底黑字）。WCAG AA 要求正常文本至少有 4.5:1，大号文本至少有 3:1。WCAG AAA 要求正常文本至少有 7:1，大号文本至少有 4.5:1。满足这些比率可确保有视觉障碍、色盲或在光线不足条件下查看内容的人能够阅读您的内容。许多可访问性法律都引用 WCAG 标准。
RGB 和 HSL 颜色模型之间有什么区别？
RGB（红、绿、蓝）通过混合光强度来定义颜色 — 每个通道的范围是 0-255。屏幕显示颜色就是这样，但对人类来说并不直观。HSL（色相、饱和度、亮度）更直观：色相是色轮上的颜色角度（0-360°），饱和度是颜色的强度（0-100%），亮度是其亮度（0-100%）。HSL 更适合颜色和谐计算，因为直接旋转色相角度即可创建和谐的颜色，而在 RGB 中实现相同效果需要复杂的数学运算。
我应该为我的设计使用哪种和谐类型？
这取决于您的目标。互补色（2 种颜色）可创造高对比度和活力 — 适合 CTA 和大胆的陈述。类似色（3 种颜色）感觉平静而连贯 — 非常适合自然主题和宁静的设计。三元色（3 种颜色）平衡且充满活力 — 非常适合插图和活泼的品牌。分裂互补色是互补色的更安全版本，视觉张力较小。单色优雅而统一 — 非常适合极简设计。四元色提供了最多的变化，但需要仔细平衡。如有疑问，可以从类似色或分裂互补色开始 — 它们最容易掌握。
