配色方案生成器

选择一个基准色,按互补、类似、三角、分裂互补、四角、方形或单色等配色规则,把基准色转换为 HSL 后按真实色相偏移生成一组颜色,再转回 HEX 显示。每个色块可点击复制,全部在浏览器本地完成。

基准色与配色类型 等待生成
基准色 #3B82F6
配色类型

配色在 HSL 色彩空间内按色相角度偏移计算,与基准色的饱和度、亮度保持一致(单色配色除外)。

配色结果
配色数—
基准色—
类型—
选择基准色与配色类型,点击「生成配色」,色块将显示在这里。

点击任意色块即可复制该 HEX 颜色值。

配色规则
  • 互补:基准色与色相 +180° 的颜色,对比最强。
  • 类似:基准色两侧各 ±30°,共三个邻近色相,观感柔和。
  • 三角:+120°、+240°,色环三等分,色彩饱满。
  • 分裂互补:+150°、+210°,兼顾对比与和谐。
  • 四角:+60°、+180°、+240°,形成矩形关系。
  • 方形:+90°、+180°、+270°,色环四等分。
  • 单色:色相与饱和度不变,亮度取 20% / 35% / 50% / 65% / 80% 五档。
  • HEX 与 HSL 互为精确转换;同一基准色与类型输出恒定。