HEX 加白加黑

HEX 加白加黑

这是加白 / 加黑生成器。加白往白色混，加黑往黑色混，和 CSS color-mix 在 sRGB 里对白 / 黑一致。从一颗品牌 HEX 拉出悬停、按下、边框用的色阶。另一条轴只动 HSL 的明度、饱和度或色相。HEX 转 Tailwind 是找默认类名；本页用你自己的 HEX 拉色阶。

如何使用

1. 粘贴 HEX、rgb() 或 hsl()，点色块、随机、示例（#3B82F6、#171B45、#0074D9、#0F766E），或在支持的浏览器里从屏幕取色。
2. 轴向默认是混合（白 / 黑）。明度、饱和度、色相会固定 HSL 的另外两路。步长 5%、10%、20%、25%；自定义是 2–20 等分。
3. 完整色阶左边是加黑、中间是原色、右边是加白。HEX 写在色块下面。点色块复制该 HEX，并刷新芯片（HEX、rgb()、hsl()）。
4. 变量名默认 brand，会写出 --brand-tint-10 这类 CSS 变量，以及带 tint / shade 的 Tailwind 片段。复制结果复制 CSS。显示示例会重新载入 #3B82F6、10% 混合。
5. 批量可一次转多颗。填入示例是 #3B82F6、#171B45、#0074D9。每行给出原色、中间加白、中间加黑。

注意事项

混合是在 sRGB 里线性走向 #FFFFFF 或 #000000。#3B82F6 加白 50% 等于把这颗蓝以 50% 叠在白上。明度 / 饱和度 / 色相走 HSL，不是 OKLCH，有的色相步距看起来会不均。非法 HEX 会报错。全部清除会清空色阶。相关：HEX 转 Tailwind、透明度叠底、HEX 转 RGBA。

用在哪里

• 从一颗品牌色做悬停、按下、边框。
• 10% 步长对应常见的 100–900 设计变量。
• 保持明度、降低饱和度做弱填充。
• 转色相找同重量的陪衬色。

常见问题