使用方法
- 「基色 HEX」默认 #315FE8，写成 #RRGGBB 六位形式。填好后右侧立刻显示它的 RGB 与原 HSL，同时把色相带入色相滑杆。
- 「色相 H」默认 224.9，允许 0 到 360，步长 0.1。它决定颜色属于哪个家族，本页只改饱和度与亮度，不动色相，所以生成的 pastel 与原色是同一个家族。
- 「目标饱和度 S」默认 45%，允许 25 到 65；「目标亮度 L」默认 85%，允许 75 到 90。这两个区间就是本页采用的 pastel 判定区间，拖出区间时会给出提示。
- 结果区第一行给出主色的 HEX 与 RGB，下面给出它与 #333333、#FFFFFF 的 WCAG 对比度，并标注是否通过 AA 与 AAA。
- 「批量基色」默认写了四个 HEX，每行一个，按同一组 S/L 逐个转化；按 Ctrl+Enter（Mac 上 Cmd+Enter）重算，被清空时点生成会自动填回。
- 结果下面是 12 色相环，色相从 0 度起每 30 度一格，饱和度与亮度沿用当前的 S/L，默认显示 6 行，点「加载更多」展开全部。
- 「复制结果」复制整段清单；「复制对照表」复制正文那张 12 条同色相变体表的 TSV；「导出 CSV」存成带字节序标记的表格文件。
- 基色写成三位、写成 #FFF 以外的非法字符、或批量某一行不是合法 HEX，都会给出针对该条的具体提示，不会拿上一次的结果冒充本次输出。
这个 Pastel 颜色生成器能解决什么问题
第一类是「手上的品牌色太冲」。品牌主色 #315FE8 的饱和度是 79.9%、亮度 55.1%，做按钮底色很醒目，但当背景铺满整屏就压得人喘不过气。把饱和度降到 45%、亮度提到 85%，得到 #C8D0EA，色相还是 224.9，一眼仍能认出是同一个蓝，但已经能当大面积背景用了。
第二类是「降饱和降成了脏色」。很多人用「往原色里掺白」来做浅色，#315FE8 掺 35% 白得到 #7997F0，色相同时被稀释，看起来发灰发闷。正确做法是在 HSL 里只动 S 与 L、保留 H，得到 #C8D3EA，色相干净。本页走的就是后一条路。
第三类是「配什么字色读不清」。pastel 背景的亮度普遍在 0.65 上下，白字与它的对比度只有 1.54:1，远低于 WCAG 要求的 4.5:1；#333333 反而能到 8.22:1。本页把两个方向的对比度都算出来，避免凭眼睛选字色——屏幕亮度、环境光都会骗人，算式不会。
第四类是「一套配色里深浅不统一」。12 色相环按同一个 S/L 生成，十二个色块的相对亮度接近，铺在仪表盘或标签组上不会某一块特别跳。若需要更深的档位，把亮度往下调即可，色相环会整体跟着走。
这个工具在本站也叫「Pastel颜色生成器」，判据是饱和度落在 25% 到 65%、亮度落在 75% 到 90% 这个区间，下面会讲清区间是怎么定的、以及相对亮度为什么不能按简单平均算。
计算原理与变量说明
转换分三步：先把十六进制基色拆成 RGB，再把 RGB 转成 HSL 取出色相，最后用「原色相 + 目标 S + 目标 L」合成新颜色转回 RGB 与十六进制。整条链上唯一被改写的量是 S 与 L，H 原样保留。
RGB 转 HSL 的公式是：L =（max + min）÷ 2；S =（max − min）÷（1 − |2L − 1|）；色相按最大分量落在哪个通道分支计算。#315FE8 拆成 rgb(49, 95, 232)，max = 0.9098、min = 0.1922，L = 0.551 即 55.1%；d = 0.7176，S = 0.7176 ÷ 0.8980 = 0.799 即 79.9%；最大分量是蓝，H = 60 ×（(R − G) ÷ d + 4）= 224.9°。
HSL 转 RGB 反过来算：C =（1 − |2L − 1|）× S，X = C ×（1 − |(H ÷ 60) mod 2 − 1|），按 H 落在哪个 60 度扇区给 R、G、B 赋 C、X、0，最后统一加 m = L − C ÷ 2。代入 H = 224.9、S = 45%、L = 85%，得 C = 0.135、X = 0.03398、m = 0.7825，三通道是 0.7825、0.8165、0.9175，乘 255 取整就是 rgb(200, 208, 234)，即 #C8D0EA。
相对亮度必须用 sRGB 分段公式。先把每个通道除以 255 归一，再分段处理：小于等于 0.03928 时取 c ÷ 12.92，大于时取 ((c + 0.055) ÷ 1.055)^2.4；最后按 L = 0.2126 R + 0.7152 G + 0.0722 B 加权求和。权重的差异来自人眼视锥细胞对不同波长的敏感度不同，绿通道占七成是因为人眼对绿最敏感。
简单平均会错 30.10%。以 rgb(200, 211, 234) 为例，三个通道直接取平均再除 255 得 0.8431，而按分段公式算出的正确值是 0.6481，两者相差 30.10%。这个差距会一路传进对比度：#C8D3EA 配 #333333 的正确对比度是 8.40:1，若按简单平均算会得出完全不同的结论，把不合格的配色判成合格。
对比度与 WCAG 阈值。对比度 =（较亮相对亮度 + 0.05）÷（较暗相对亮度 + 0.05），取值 1 到 21。WCAG 2.1 对正文文字要求 4.5:1（AA）与 7:1（AAA），大字号放宽到 3:1（AA）与 4.5:1（AAA）。加 0.05 这一项是为了避免纯黑背景把比值推向无穷大。
为什么 pastel 背景几乎配不了白字。pastel 的亮度下限是 75%，转出来的相对亮度普遍在 0.55 到 0.75 之间；白字的相对亮度是 1，两者相除最多也就 1.6:1 上下，离 4.5:1 差得远。所以 pastel 底上要么用深色字，要么把字加粗放大并接受它仍然不达标。
完整示例（数值仅作演示）
默认示例是基色 #315FE8、S 45%、L 85%。基色展开为 rgb(49, 95, 232)，HSL 为 224.9° / 79.9% / 55.1%；拉进 pastel 后主色是 #C8D0EA，即 rgb(200, 208, 234)，HSL 为 224.9° / 45.0% / 85.0%。它与 #333333 的对比度是 8.22:1，过 AAA；与 #FFFFFF 只有 1.54:1，不通过。
把饱和度与亮度改成 S 30%、L 88%，同一颗色相给出 #D7DCEA，比默认档更淡更冷。反过来把亮度压到 76%、饱和度提到 65%，得到 #9AB5EA，这一档仍然在 pastel 区间边缘，与 #333333 的对比度是 6.12:1，掉出了 AAA 但还够 AA。
12 色相环按 0 度起每 30 度一格铺开，两端各举一例：H = 0 得 #EAC8C8，与 #333 对比 8.18:1、与白字 1.54:1；H = 240 得 #C8C8EA，两组分别是 7.76:1 与 1.63:1。十二格里对比度最高的是 H = 60 的 10.29:1，最低的是 H = 240 的 7.76:1，全部过 AAA——这也说明同一组 S/L 下，色相对可读性的影响远没有亮度大。
批量框默认四个基色，按同一组 S/L 转化：#315FE8 得 #C8D0EA；#C8D3EA 本身已在 pastel 区间，转化后仍是 #C8D3EA；#1D4ED8 得 #C8D1EA；#EAC8C8 得 #EAC8C8。后两行一个几乎不变、一个完全不变，因为它们各自的 HSL 本来就在目标区间附近。
Pastel 变体与对比度对照表
下表固定色相 H = 220，按不同 S/L 阶梯给出 pastel 变体，末列是与 #333333 的对比度。
| S | L | HEX | RGB | 与 #333 对比 |
|---|---|---|---|---|
| 45% | 85% | #C8D3EA | rgb(200,211,234) | 8.40:1 |
| 45% | 82% | #BCCAE6 | rgb(188,202,230) | 7.66:1 |
| 45% | 88% | #D3DCEE | rgb(211,220,238) | 9.17:1 |
| 30% | 88% | #D7DDEA | rgb(215,221,234) | 9.28:1 |
| 35% | 86% | #CFD7E8 | rgb(207,215,232) | 8.75:1 |
| 50% | 84% | #C2CFEB | rgb(194,207,235) | 8.07:1 |
| 55% | 80% | #B0C3E8 | rgb(176,195,232) | 7.11:1 |
| 25% | 90% | #DFE3EC | rgb(223,227,236) | 9.83:1 |
| 40% | 78% | #B0BFDD | rgb(176,191,221) | 6.82:1 |
| 60% | 82% | #B6C8ED | rgb(182,200,237) | 7.50:1 |
| 20% | 86% | #D4D9E2 | rgb(212,217,226) | 8.92:1 |
| 65% | 76% | #9AB5EA | rgb(154,181,234) | 6.12:1 |
下面这张是「pastel 背景该配什么色文字」，背景固定为 #C8D3EA，判定按 WCAG 2.1 的正文文字标准。
| 文字色 | 对比度 | 判定 |
|---|---|---|
| #000000 | 13.96:1 | AAA 通过 |
| #333333 | 8.40:1 | AAA 通过 |
| #666666 | 3.82:1 | 仅大字号 AA |
| #999999 | 1.89:1 | 不通过 |
| #CCCCCC | 1.07:1 | 不通过 |
| #FFFFFF | 1.50:1 | 不通过 |
| #1D4ED8 | 4.46:1 | 仅大字号 AA |
| #B91C1C | 4.30:1 | 仅大字号 AA |
最后这张是「pastel 不是加白」的三条路径对照，同一个基色 #315FE8，末列是与 #333333 的对比度。
| 路径 | HEX | RGB | 与 #333 对比 |
|---|---|---|---|
| 原色 | #315FE8 | rgb(49,95,232) | 2.37:1 |
| RGB 加白 35%（色相被稀释） | #7997F0 | rgb(121,151,240) | 4.51:1 |
| HSL 淡化（保留色相） | #C8D3EA | rgb(200,211,234) | 8.40:1 |
| HSL 更深档 | #9AB5EA | rgb(154,181,234) | 6.12:1 |
| 相对亮度按简单平均 | — | rgb(200,211,234) | 0.8431 |
| 相对亮度按 sRGB 分段 | — | rgb(200,211,234) | 0.6481 |
| 两者相差 | — | — | 30.10% |
| 结论 | 加白只整体抬升三通道并稀释色相，HSL 淡化保住色相同时改 S 与 L | ||
结果边界、舍入与适用说明
- 基色写成三位十六进制时提示请写成六位 #RRGGBB；本页不做三位简写展开，避免把 #FFF 与 #FFFFFF 当成两种输入。
- 基色带空格、带 rgb() 包裹或含非法字符时，报出原串并提示只能写 # 加六位十六进制。
- 饱和度与亮度由滑杆限定在 25~65 与 75~90，拖不动区间外的值；若通过键盘输入越界，提示该值不在 pastel 区间并保持上一次结果。
- 色相为 0 或 360 时两者等价，输出按 0 处理；色相超过 360 时取模后再计算。
- RGB 三通道按四舍五入取整，因此 HSL 往返一次可能与原值相差 1；这不是误差累积，是 8 位量化带来的必然结果。
- 对比度保留两位小数，判定阈值取 4.5:1（AA 正文）、7:1（AAA 正文）、3:1（AA 大字号），不做四舍五入进位。
- 本页只算 sRGB 色彩空间下的对比度，不考虑 Display-P3 广色域与深色模式下的感知差异。
- 页面不联网、不写本地存储，基色与滑杆值只用于本次计算。
常见问题
pastel 到底怎么定义？为什么是饱和度 25~65%、亮度 75~90%？
本页采用 HSL 口径：饱和度 25% 到 65%、亮度 75% 到 90%。低于 25% 饱和度就接近中性灰，失去色彩倾向；高于 65% 又开始显艳。亮度低于 75% 压不住大面积铺陈，高于 90% 则几乎与白底难分。这是一个工程上常用的区间，不是某份标准里的硬性规定。
为什么往原色里掺白得到的浅色发闷？
因为掺白同时稀释了色相。#315FE8 掺 35% 白得 #7997F0，三个通道整体被抬升，饱和度从 79.9% 掉下来的同时色相也偏了。正确做法是在 HSL 里只改 S 与 L、保留 H，得到 #C8D3EA，色相仍是 224.9 那一个家族。
相对亮度为什么不能把 RGB 三个值平均一下？
因为 sRGB 的编码是分段的非线性曲线，且人眼对三通道的敏感度差别很大。以 rgb(200, 211, 234) 为例，简单平均得 0.8431，按分段公式与 0.2126 / 0.7152 / 0.0722 的权重算得 0.6481，两者相差 30.10%。这个差距直接决定对比度判定会不会把不合格判成合格。
为什么 pastel 背景上白字总是不合格？
pastel 的亮度下限是 75%，相对亮度普遍在 0.55 到 0.75；白字的相对亮度是 1，比值最多 1.6:1 上下，离 4.5:1 差得很远。能过的是深色字：#C8D3EA 配 #333333 是 8.40:1，配纯黑是 13.96:1，都过 AAA。
8.40:1 和 13.96:1 都过 AAA，选哪个？
看场景。纯黑在浅色背景上对比最强，但边缘容易出现光晕，长段落阅读反而累；#333333 softer 一些，与 pastel 的柔和调性更搭，8.40:1 也远超 AAA 的 7:1 门槛。两者都达标时按视觉风格选，不必一味追求最高比值。
为什么我算出的对比度和别的网站差 0.01？
多是舍入位数与取整时机的差别。本页在 HSL 转 RGB 后先四舍五入取整成 8 位通道值，再用这个整数值算相对亮度，对比度保留两位小数。若对方保留更多小数或用浮点通道值计算，末位会有 0.01 级别的出入，不影响是否达标的判定。
这个工具免费吗？
免费，无需注册即可使用。
输入的数据安全吗？
安全。计算在当前浏览器本地完成，不会上传输入内容。
相关工具
- RGB转HSL转换器：看单个颜色在三套色彩模型里的取值。
- HSL转RGB转换器：反向换算，核对本页的合成结果。
- 颜色对比度检测：只测两个给定色之间的比值时用这个。
- WCAG 无障碍对比度检测：按 AA 与 AAA 两档出完整判定报告。
- 十六进制转RGB：把十六进制值拆成三通道，确认没有抄错位。