颜色变亮与变暗

把颜色“变亮 20%”听起来很简单，但不同工具对它的理解不同。Sass 的 lighten() 是在 HSL 明度上加 20 个百分点；color.scale() 是朝白色明度移动剩余距离的 20%；浅色（tint）是混入 20% 的白色；而 OKLCH 改变的是人眼实际感知到的明度。本工具对变亮、变暗、提高饱和度、降低饱和度和变灰都用这四种方法计算，以 HEX、RGB、HSL 和 OKLCH 显示结果，给出对应的 Sass 和现代 CSS 代码，并列出每 10% 一档的所有步进。

使用方法

1. 输入任意 CSS 格式的颜色。
2. 选择更亮、更暗、饱和度更高或更低，或更灰，并设置幅度。
3. 选择与你的代码库相符的方法：Sass HSL、Sass scale、与白/黑混合或 OKLCH。
4. 复制 HEX、CSS（HEX 兼容行加相对颜色或 color-mix() 行）或 Sass 调用。

计算公式

HSL add: L′ = L + a · HSL scale: L′ = L + (100 − L) × a · mix: c′ = c + (t − c) × a · OKLCH: L′ = L + a, C′ = C × (1 ± a) · luma: Y′ = 0.2126 R + 0.7152 G + 0.0722 B

a 是幅度（HSL 加减时是百分点，其他情况是比例）；c 是 RGB 的每个通道，t 是混入的白、黑或灰。变暗和降低饱和度使用对应的减法。用混合方式变灰时，使用 Rec. 709 亮度灰，权重与 CSS filter: grayscale() 相同。超出 sRGB 的 OKLCH 结果会损失色度，此时 CSS 行给出的是拟合后的颜色。

示例

Sass 的 lighten(#6b717f, 20%) 把 HSL 明度从 45.9% 提高到 65.9%，得到 #A1A5AF；darken(#b37399, 20%) 得到 #7C4465。如果改成把 #3366CC 与 20% 的白色混合，则得到 #5C85D6（51 + 204 × 0.2 = 91.8 → 92，其余同理）——在相同百分比下，比 lighten() 的变化更柔和。#3366CC 的亮度灰是 0.2126 × 51 + 0.7152 × 102 + 0.0722 × 204 = 98.5，所以用混合方式变灰的结果是 #636363。