工具用的顺手吗？
你的反馈能帮助我们做得更好
生成网站配色方案，输出颜色代码与搭配建议。
支持十六进制颜色码，例如 #2563eb 或 #36f；也可以使用左侧取色器直接选色。
主色与色环上对角的颜色搭配，对比强烈、视觉抓眼，适合突出按钮和强调元素。
:root {
--color-primary: #2463eb;
--color-secondary: #ebac24;
--color-background: #c1d0f1;
--color-accent: #c98f13;
--color-text: #272b35;
}primary: #2463eb
secondary: #ebac24
background: #c1d0f1
accent: #c98f13
text: #272b35这是一段示例段落，用来展示在当前配色方案下，正文文字、背景与按钮搭配的整体观感。
卡片内容用于展示辅助色、背景色与文字色在小模块中的真实表现。
概览
了解工具能解决的问题、计算或处理逻辑，以及数据边界。
网页配色方案生成器接收一个主色，并按所选关系生成五个角色色：主色、辅助色、强调色、背景色和文字色。输入支持三位或六位十六进制色码，也可以用取色器选色；随机按钮会生成新的主色。每个结果包含 HEX、RGB 和 HSL 表示，同时提供色块预览、纯文本色板和可复制的 CSS 变量片段。默认主色为 #2563eb，默认关系为互补色。
这些选项是在 HSL 色相模型上按固定角度生成候选组合：互补色把色相转到对面；类似色在主色两侧取邻近色；三角色分布在三个方向；四角色按四个方向排布；分裂互补取互补色两侧的两个方向；单色保持相近色相并改变明度。工具还会为背景和文字角色调整部分饱和度或明度。得到的是一组可继续编辑的色值，不是针对某个品牌或页面自动完成的设计规范。
以主色的色相角H表示时，互补色取H+180°，类似色取H−30°与H+30°，三角色取H、H+120°、H+240°，四角色按每90°排布，分裂互补色取H+150°与H+210°。单色方案保留相近色相并改变明度；背景、强调色和文字色还会按方案调整明度或饱和度，因此它们不是只对主色做角度旋转的机械复制。
HSL色相角适合按规则改变颜色方向，但相同角度变化在人眼看来不一定等距。选择方案时，应把颜色放到实际页面中比较，而不是把角度相同理解成视觉差异也相同。
指南
按步骤完成操作，并通过示例核对输入与结果。
输入三位或六位十六进制颜色码，或用取色器选择主色。无效文本不会成为新的主色。
从互补色、类似色、三角色、四角色、分裂互补色和单色中选一种关系，预览会随主色或方案变化更新。
查看五个角色色的 HEX、RGB、HSL 值和示例界面预览，确认颜色用途是否符合你的页面需求。
复制单个色值、纯文本色板或 CSS 变量代码，再粘贴到样式表或设计记录中。
更换主色和配色关系时，先保持其他条件不变，分别比较色块在导航、按钮、卡片和正文区域中的层级。若输入需要恢复到初始方案，可使用重置按钮回到默认主色与互补关系；确认候选后再复制代码，以减少手工抄写颜色值。
场景
查看这项工具在不同工作与生活流程中的用法。
设计者已有品牌主色、但还未确定辅助色时，可比较互补、类似或单色方案，快速挑出值得继续试排的候选颜色，再放入真实页面检查层级与整体气氛。
开发者可复制五个角色色的 CSS 变量，在原型或测试页面中替换颜色。角色名能帮助团队区分主色、强调色、背景色和文字色，但具体命名与项目既有规范仍需人工协调。
制作文章页面、产品卡片或演示稿时，可用生成的背景、文字和强调色搭出初始方案；页面预览有助于观察几种颜色同时出现的效果，再根据实际内容与品牌要求微调。
同一个品牌主色可以分别查看类似色与互补色结果：前者便于观察相近色调的统一感，后者便于观察对比色能否突出操作入口。把候选色放到真实版面后再判断面积比例和层级，不要只根据色块是否“和谐”决定最终界面颜色。
须知
使用前了解适用范围、结果限制与必要提醒。
生成器按色相关系给出候选色，不会测量文字与背景的对比度，也不会判定整套配色是否符合无障碍要求。W3C WCAG 2.2 对普通文本列出至少4.5:1的对比度要求，大文本为至少3:1；具体适用条件请查看标准说明。复制到实际界面后，应针对文字大小、按钮状态、焦点提示和不同屏幕逐项检查，不要只依据色块预览认定可读或合规。
推荐
查找相关工具、专题与可用的 API 能力。