配色方案生成器
输入主色，自动生成互补色、类似色、三角色等配色方案，并生成色阶梯度
色阶（Tints & Shades）
— 从浅到深10个梯度
场景示例 — 点击「填入」加载预设主色
深海蓝（企业风）
主色
#003153，适合科技、金融类产品珊瑚红（活力风）
主色
#FF6B6B，适合消费、娱乐类产品青绿（自然风）
主色
#4ECDC4，适合健康、环保类产品紫罗兰（创意风）
主色
#6C5CE7，适合设计、创意类产品
关于配色方案生成器
- 基于色彩理论（色相环）自动计算与主色和谐的配色方案，适用于 UI 设计、品牌配色、网页主题等场景
- 支持互补色（对角180°）、类似色（相邻30°）、三角色（均分120°）、四方色（均分90°）、分裂互补色五种方案
- 色阶功能生成从白色到主色再到黑色的10个梯度，方便建立完整的颜色系统
操作说明
- 通过颜色选择器或直接输入十六进制颜色值（如
#003153）设置主色 - 点击上方 Tab 切换配色方案类型，色块实时更新
- 点击任意色块可复制该颜色的 HEX 值；点击「复制 CSS 变量」导出所有颜色为 CSS 自定义属性
- 点击「示例」加载预设主色，快速体验不同配色效果
注意事项
- 配色方案基于 HSL 色彩模型计算，结果为理论值，实际使用时建议结合视觉感受微调
- WCAG 对比度要求：正文文字与背景的对比度应 ≥ 4.5:1，大号文字 ≥ 3:1
- 所有计算在浏览器本地完成，不会上传任何数据
色彩理论知识详解
五种配色方案说明
| 方案 | 色相角度 | 特点 | 适用场景 |
|---|---|---|---|
| 互补色 | 主色 + 180° | 对比强烈，视觉冲击力强 | 强调按钮、警告提示 |
| 类似色 | 主色 ±30° | 和谐自然，过渡柔和 | 背景渐变、同系色调 |
| 三角色 | 均分 120° | 平衡丰富，活泼有趣 | 信息图表、多状态标签 |
| 四方色 | 均分 90° | 色彩丰富，需谨慎使用 | 复杂 UI、数据可视化 |
| 分裂互补 | 互补色 ±30° | 比互补色更柔和，仍有对比 | 主色 + 强调色组合 |
HSL 色彩模型说明
| 分量 | 范围 | 说明 |
|---|---|---|
| H（色相 Hue） | 0° ～ 360° | 颜色在色相环上的位置，0°=红，120°=绿，240°=蓝 |
| S（饱和度 Saturation） | 0% ～ 100% | 颜色的鲜艳程度，0%=灰色，100%=纯色 |
| L（亮度 Lightness） | 0% ～ 100% | 颜色的明暗程度，0%=黑色，50%=正常，100%=白色 |
/* CSS 中使用 HSL */
color: hsl(210, 100%, 20%); /* 深蓝 */
color: hsl(210, 100%, 20% / 0.5); /* 半透明深蓝（CSS4）*/
/* 互补色计算：色相 +180° */
--primary: hsl(210, 100%, 20%);
--complementary: hsl(30, 100%, 20%); /* 210 + 180 = 390 → 30 */
WCAG 对比度标准
| 等级 | 正文文字 | 大号文字（≥18pt） | 说明 |
|---|---|---|---|
| AA（最低要求） | ≥ 4.5:1 | ≥ 3:1 | 大多数网站应达到此标准 |
| AAA（增强） | ≥ 7:1 | ≥ 4.5:1 | 无障碍要求较高的场景 |
CSS 自定义属性最佳实践
:root {
/* 主色系 */
--color-primary: #003153;
--color-primary-100: #ccd6de; /* 最浅 */
--color-primary-500: #003153; /* 主色 */
--color-primary-900: #000a14; /* 最深 */
/* 互补色 */
--color-accent: #533100;
/* 语义化颜色 */
--color-success: #28a745;
--color-warning: #ffc107;
--color-danger: #dc3545;
}