配色方案生成器
选择一个基准色，即刻生成基于色彩理论的配色——互补色、类似色、三角色、四角色、分裂互补色和单色——以实时色块呈现，可复制为 HEX、RGB、HSL、CSS 变量或 Tailwind 配置。
互补色
基准色与其在色环上的对面色（色相 + 180°）——对比度最强的搭配。
类似色
基准色两侧各有一个色环上的相邻色（色相 ± 30°）——平和而协调的配色。
三角色
在色环上以 120° 均匀分布的三种颜色（色相、+120°、+240°）——鲜明又平衡。
四角色（矩形）
在色环上构成矩形的四种颜色（色相、+90°、+180°、+270°）——两对互补色。
分裂互补色
基准色再加上其互补色两侧的两种颜色（色相 +150° 和 +210°）——对比强烈却更易平衡。
单色
同一色相按明度从浅到深排开——轻松就能协调的色阶。
导出配色
将所选配色复制为可直接粘贴的 CSS 自定义属性，或 Tailwind 颜色配置。
:root {
--color-1: #3498DB;
--color-2: #DB7633;
}关于配色方案生成器
配色方案生成器借助色环的几何关系，把单一的基准色变成一组彼此协调的颜色。色彩理论中的配色不过是色相之间既定的关系：彼此相对的颜色、相邻的颜色，或在色环上均匀分布的颜色。此工具读取你的基准色的色相、饱和度和明度（HSL），再把色相旋转固定角度，构建出六种经典配色——互补色（色相 + 180°）、类似色（色相 ± 30°）、三角色（相隔 120°）、四角色或矩形（相隔 90°）、分裂互补色（互补色两侧）以及单色（单一色相，明度不同）。每种配色都以实时色块显示，让你看到颜色之间的关系而不只是读数字，且每种颜色都附带可复制的 HEX、RGB 和 HSL 值。当你有了喜欢的配色，就把它导出为 CSS 自定义属性或 Tailwind 颜色配置，直接放进项目里。它为设计师、开发者、插画师，以及任何要为网站、品牌、图表、幻灯片或室内挑选颜色的人打造——让你从一个心仪的颜色迅速走向一整套均衡的配色。
如何使用此生成器
- 1 用色块取色器选一个基准色，或在输入框中键入任意 hex 值（例如 #3498DB 或 #39F）。
- 2 浏览六个配色板块——互补色、类似色、三角色、四角色、分裂互补色和单色——每一个都以实时色块呈现。
- 3 用每个色块上的按钮把任意单个颜色复制为 HEX；每个色块还会显示对应的 RGB 和 HSL 值。
- 4 在导出框中选择配色和格式，复制 CSS 自定义属性或 Tailwind 颜色配置，然后粘贴到你的项目中。
配色是如何运作的（色环）
每一种配色都是把基准色的色相绕 360° 色环旋转，同时保持饱和度和明度不变。用 HSL（色相、饱和度、明度）来处理很简单：只有色相在变。 互补色——色相 + 180°。两种颜色正好相对，给出最强的对比。 类似色——色相 − 30°、色相、色相 + 30°。相邻的颜色平滑过渡，显得协调。 三角色——色相、色相 + 120°、色相 + 240°。位于等边三角形顶点的三种颜色：鲜艳却平衡。 四角色（矩形）——色相、色相 + 90°、色相 + 180°、色相 + 270°。两对互补色，构成丰富的四色配色。 分裂互补色——色相、色相 + 150°、色相 + 210°。基准色加上其互补色两侧的两种色相——对比接近互补色，却更柔和。 单色——同一色相的多个明度层次，从浅色调到深色调。 例如，基准色 #3498DB 的色相约为 204°。它的互补色是 204° + 180° = 24°（橙色），它的三角色伙伴在 324° 和 84°，它的分裂互补色在 354° 和 54°。计算在 HSL 中完成，并为每个色块转换回 HEX。
常见问题
什么是互补色？
互补色就是在色环上与另一种颜色正好相对的颜色——色相旋转 180°。蓝与橙、红与绿、黄与紫都是互补色对。并排放置时会产生尽可能最强的对比，使每种颜色显得更浓烈，因此互补色对常用于行动号召、点缀，以及任何需要突出的元素。本生成器通过取你基准色的色相再加上 180° 来求出互补色。
如何制作配色方案？
从一个你喜欢的基准色开始，然后用色彩理论的关系来推导其余颜色，而不是凭空猜测。挑一种符合氛围的配色：类似色或单色配色显得平和统一，而互补色、三角色和分裂互补色配色则增添对比和活力。保持饱和度和明度一致，让颜色像一个整体，并把颜色控制在少数几种再加上中性色。此工具将这一过程自动化——输入一个基准色，它就会生成六套现成配色，可复制为 HEX、RGB、HSL、CSS 变量或 Tailwind 配置。
什么是三角配色方案？
三角配色方案使用在色环上均匀分布、相隔 120° 的三种颜色——例如红、蓝、黄。三角配色鲜艳而对比十足，同时又保持平衡，因为三种色相彼此等距。常见做法是让一种颜色占主导，另外两种作为点缀。在本生成器中，三角配色就是你的基准色再加上 +120° 和 +240° 处的色相。
什么是类似配色方案？
类似配色方案使用在色环上彼此相邻的颜色，通常在基准色相约 30° 以内——例如蓝、蓝绿和绿。由于色相非常接近，类似配色显得平滑、自然、协调，这也是它们在自然界（日落、树叶、海洋）中如此常见的原因。它们的对比比互补配色弱，因此最好选一种颜色作为主导。此工具用 −30°、基准色和 +30° 处的色相来构建类似配色。
相关设计与颜色工具
配色生成器可与颜色转换自然搭配，用于在 HEX、RGB、HSL、HSV 和 CMYK 之间转换任意色块；与对比度检测搭配，确保你选的颜色清晰可读且符合 WCAG 无障碍标准；与 CSS 渐变生成器搭配，把配色中的颜色融合成柔和的背景；以及宽高比计算器，服务于你其余的设计工作流程。