调色板生成器

颜色格式转换工具（/color）侧重 HEX / RGB / HSL / HSV / CMYK 五种格式互转， 内置简单的 5 种和谐方案（仅旋转色相）；调色板生成器（本工具）侧重调色板生成与导出， 提供更丰富的能力： ①6 种和谐方案（含单色阶）+ 明度色调（Tints / Shades / Tones）+ 设计系统色阶（Tailwind 50-950 / Material 100-900）； ②WCAG 2.1 对比度检查（普通文字 / 大字号 AA / AAA 等级判定）； ③三种色盲模拟（红色盲 / 绿色盲 / 蓝色盲）； ④6 种格式导出（CSS 变量 / Tailwind 配置 / SCSS / JSON / Android XML / iOS Swift）。 两者互补，颜色格式互转用 /color，调色板生成与可访问性检查用本工具。

基于色环理论的 6 种方案： 互补色（180° 对比）适合 CTA 按钮强调，如蓝色背景 + 橙色按钮； 类似色（±30° 邻近）适合背景渐变与图表系列，和谐统一； 三角色（±120°）适合品牌识别与三栏布局，活泼平衡； 分割互补（180°±30°）比互补色柔和，对比但不刺眼，适合插画配色； 四角色（±90°/±180°）适合多主题配色与数据可视化； 单色阶（同色相不同明度）适合统一沉稳的设计，如企业站主色调。 建议先选 1 个主色 + 1 个强调色（互补或分割互补），再用类似色或灰色填充背景。

以输入色为 500 锚点，向亮端（50）提升明度 + 降低饱和度，向暗端（950）降低明度 + 略提升饱和度。 各档位的明度偏移与饱和度系数参考 Tailwind 与 Material 官方色阶规律（如 50 档明度 +42、饱和度 ×0.7； 950 档明度 -42、饱和度 ×1.15）。Tailwind 色阶为 50/100/200/300/400/500/600/700/800/900/950 共 11 档， Material 色阶为 50/100/200/300/400/500/600/700/800/900 共 10 档。 生成结果接近但非完全等同官方色板（官方是人工精调），适合快速搭建设计系统原型。

Tints（明色）：向纯白渐变，明度提升 + 饱和度略降，适合背景与悬停态（hover）； Shades（暗色）：向纯黑渐变，明度降低，适合按下态（active）与边框； Tones（浊色）：向纯灰渐变，饱和度降低，适合次要元素与禁用态。 三者都是从当前色出发的 5 档阶梯，与设计系统色阶（50-950）的区别是： 色阶覆盖从最亮到最暗的完整范围，色调阶梯只覆盖单一方向（仅亮 / 仅暗 / 仅浊）。

WCAG 2.1（Web Content Accessibility Guidelines）是 W3C 制定的无障碍标准。 对比度 = (亮色相对亮度 + 0.05) / (暗色相对亮度 + 0.05)，范围 1-21。 普通文字：AA ≥ 4.5:1，AAA ≥ 7:1； 大字号（18pt 或 14pt 粗体）：AA ≥ 3:1，AAA ≥ 4.5:1。 本工具同时检查当前色与白字 / 黑字的对比度，标注合规等级，便于选择文字色。 例如深蓝色背景白字通常通过 AA，浅黄色背景白字可能不达标需改用黑字。

色盲模拟通过线性 RGB 变换矩阵（Machado et al. 2009 简化版）模拟色盲视觉： 红色盲（Protanopia）约 1% 男性，红色感知缺失； 绿色盲（Deuteranopia）约 1% 男性，绿色感知缺失（最常见）； 蓝色盲（Tritanopia）极罕见，蓝色感知缺失。 检查色盲可访问性的原因：约 8% 男性存在不同程度的色觉异常，若配色仅靠红绿区分（如红=错误、绿=成功）， 色盲用户无法识别。建议同时用颜色 + 图标 / 文字标注状态，避免仅靠颜色传达信息。 本工具展示当前色在色盲眼中的实际呈现，便于调整配色。

支持 6 种格式（设计系统色阶 Tab 可选全部，其他 Tab 默认 CSS 变量）： CSS 变量：复制到样式表顶部，用 var(--primary-500) 引用； Tailwind 配置：粘贴到 tailwind.config.js 的 theme.extend.colors， 用 bg-primary-500、text-primary-700 等类名引用； SCSS：复制到 _colors.scss，用 $primary-500 引用； JSON：供 JavaScript 动态加载或设计工具导入； Android XML：放入 res/values/colors.xml，用 @color/primary_500 引用； iOS Swift：UIColor 扩展，用 .primary500 引用。 变量名前缀可在导出区自定义（默认 primary）。

随机配色采用黄金角度旋转采样（137.508°）：从随机起始色相开始， 每次旋转 137.508° 取下一个色相，保证色相在色环上分布最均匀。 黄金角度是数学上最优的均匀分布角度（源自向日葵种子排列、松果鳞片等自然现象）， 相比纯随机采样能避免色相扎堆或遗漏。饱和度与明度固定在中等范围（S: 60-90, L: 45-60）， 保证生成的配色既鲜艳又不刺眼。点击「重新生成」可取第一个色为主色。

不一样。Tailwind 与 Material 官方色板是设计师人工精调的结果， 每个颜色的明度、饱和度、色相都经过仔细校准，本工具采用算法生成： 以输入色为 500 锚点，按经验公式向亮暗两端推导其他档位。 算法生成的色阶接近官方风格但非完全等同，适合： ①快速搭建原型（无需手动调色）； ②自定义品牌色（输入品牌色生成完整色阶）； ③学习色阶规律（理解明度与饱和度的变化趋势）。 生产环境建议在算法生成基础上手动微调，或直接使用官方色板。

支持以下输入： #rgb、#rrggbb（带或不带 #）、 rgb(r, g, b)、hsl(h, s%, l%)。 也可省略前缀只写 3 个 0-255 的数字（按 RGB 解析）。 建议加前缀避免歧义，如 220, 100%, 58% 可能是 HSL 也可能是 HSV， 加 hsl(...) 才能确保正确。也可点击左侧色块用拾色器直接选色。

不会。本工具完全在浏览器内运行，所有颜色解析、调色板生成、对比度计算、色盲模拟、 代码导出逻辑由 JavaScript 在你本地执行，输入的颜色值不会发送到任何服务器。 这对于处理品牌色、商业设计稿配色尤其重要，可避免配色方案提前泄露。 但请注意：浏览器历史记录、屏幕截图、共享设备可能留下痕迹，如需彻底保密请在隐私模式中使用。

站点提供三个颜色相关工具，互补使用： 颜色格式转换工具（/color）—— HEX / RGB / HSL / HSV / CMYK 五格式互转 + 简单和谐方案； 调色板生成器（/color-palette，本工具）—— 调色板生成 + 设计系统色阶 + 多格式导出； 颜色对比度检查工具（/color-contrast）—— 双色对比度精确检查 + WCAG 合规判定。 典型流程：先用 /color 选基础色 → 用本工具生成完整色阶与和谐方案 → 用 /color-contrast 验证关键组合的对比度。