配色方案与渐变生成器

从一个基础色生成配色方案，随机生成配色，并制作渐变，可以复制为 CSS 或保存为 PNG 图片。适合为设计、演示文稿或网页挑选颜色。

使用方法

1. 在“配色”中选择一个“基础色”和一种“配色方案”。如果满意，点击“将此方案用作配色”。
2. 点击“生成（空格）”获得新的颜色；锁定想保留的颜色后再次生成。
3. 用“复制 HEX 列表”“复制 CSS 变量”或“保存为图片”取出颜色，点击“收藏配色”保存起来以后用。
4. 在“渐变”中设置“类型”“角度”和“色标”，然后复制 CSS 代码或点击“保存 PNG”。

计算方式与说明

• 配色方案通过在 HSL 色轮上旋转色相生成：互补色 180°，类似色 ±30°，三角配色 120°，分裂互补 150° 和 210°，四方配色每次 90°。
• 对比度等级依据 WCAG 2.2：AA 需要 4.5:1，AAA 需要 7:1，大号文字需要 3:1。
• “色觉模拟”是基于 Machado 等人（2009）的近似模拟。它只改变屏幕上显示的颜色，不改变复制或保存的值。
• 本设备的这个浏览器中最多保存 40 个收藏的配色。

常见问题

怎么找到一个颜色的互补色？

互补色是色轮上正对面、相隔 180° 的颜色。把“配色方案”设为“互补色”即可看到，点击色块即可复制其 HEX 值。

CSS渐变怎么做？

在“渐变”中点击色条添加色标，并设置它们的颜色和位置。CSS 框中会显示可以直接复制的代码。

为什么渐变中间的颜色发灰？

把“插值色彩空间”设为 OKLCH。中间的颜色会更鲜艳，CSS 中还会为旧版浏览器加上一行后备代码。

怎么知道这个颜色上的文字是否清晰易读？

每个颜色都会显示白色和黑色中更易读的那种文字颜色的对比度和等级。对比度为 (L1 + 0.05) ÷ (L2 + 0.05)，其中 L1 和 L2 分别是较亮和较暗颜色的相对亮度。