使用方法
- 在「基色 HEX」填一个 6 位十六进制色，如默认 #3498db；也可只填「色相 H 覆盖」用纯色相（饱和度取一个稳妥默认值）生成。
- 点「生成浅色阶」或基色框裸按 Enter，工具把基色的 H、S 取出，把 L 推到 82%、84.8%、87.6%、90.4%、93.2%、96% 共 6 档。
- 结果区展示 6 个色块、一份
:root { --color-1: ... }的 CSS 变量块，以及每行一个的 HEX 列表。 - 点「复制 CSS 变量」把变量块存到剪贴板；点「复制 HEX 列表」复制纯色值，方便粘进设计稿或代码。
- 点「载入示例」恢复 #3498db 并重算；对照表区可「加载更多」「导出 CSV」「复制 TSV」拿到全部 14 行亮度对照。
能解决什么问题
一是从单一主色快速派生一套浅色。做卡片背景、表格隔行、提示条、悬停态时，设计师常要「同一个蓝但更浅」的一串色。浅色颜色生成器锁定 H 与 S，只动 L，保证整组色彼此协调不跑调，省去手动拖亮度条。
二是输出即用的 CSS 变量。前端写主题时常要 --color-1 ... --color-6 这种命名。本页直接吐出 :root{} 块，复制进样式表就能用，不用再逐个手敲 HEX。
三是统一「浅」的语义。很多人把「浅色」理解成「加点白」，但那会同时拉低饱和度，越浅越灰。本页用 HSL 的 L 通道控制亮度，S 不变，浅得干净、不泛灰，更接近专业配色的浅色调。
本页不做这些事：不生成深色/对比色、不做色盲模拟、不返回互补色或三角配色；它只回答「给定基色，它的 6 档浅色阶与 CSS 变量是什么」。
生成原理与变量说明
先把 HEX 转 RGB，再转 HSL。HEX 是 RGB 的十六进制写法，拆出 R/G/B 三个 0～255 分量；RGB→HSL 用标准公式得到色相 H（0～360°）、饱和度 S（0～1）、亮度 L（0～1）。默认 #3498db 拆得 R=52、G=152、B=219，换算 H≈204°、S≈0.70、L≈0.53。
锁定 H、S，只改 L。这是「同色系浅化」的关键：L 决定明暗、H 决定色相、S 决定鲜艳度。把 L 从基色的 0.53 推到 0.82～0.96，色相与饱和度纹丝不动，于是得到「同一个蓝，只是更亮」的一系列浅蓝。
再 HSL→RGB→HEX 回去。对每一档 L，用 HSL 转 RGB 公式算出新 R/G/B，四舍五入成整数后转回两位十六进制拼成 HEX。这一步是页面核心算法，对照表里每个 HEX 都由它实算，没有写死。
为什么 L 取 82%～96%。日常浅色背景的 L 多落在 0.85 以上；低于 0.82 开始显得「不够浅」，高于 0.96 又接近纯白失去色感。6 档均匀铺在 82～96，既分得清又有层次。
数值只在本地计算。整条链路只有进制换算、HSL 公式与字符串拼接，全部在当前页面执行，没有任何网络请求，也不写 Cookie 或 localStorage。
完整示例（默认输入实测）
示例条件与页面默认值完全一致：基色 #3498db，不填色相覆盖。逐项核对：
- HEX→RGB：#3498db = (52, 152, 219)；
- RGB→HSL：H≈204°、S≈0.70、L≈0.53（基色本身中亮）；
- 锁 H=204、S=0.70，L 取 82% 得 HEX ≈ #b1cbf1，L=96% 得 ≈ #eef3fc；
- 6 档即浅色颜色生成器给到的完整色阶，可作为卡片底色、表格条纹、标签浅底；
- 交叉验证：对照表里「亮度 82%」一行正是 #b1cbf1 量级，算法与上方一致。
这组数字和上方结果区完全一致；把基色换成你品牌的蓝/绿/橙，整套浅色阶会立即按同一逻辑重算。
对照表
- 对照表用途：固定以 #3498db 为基色，列出亮度 L 从 82% 到 96% 共 14 档时对应的 HEX，演示「亮度如何决定浅色深浅」。
- 行数：共 14 行，前 12 行直接显示，后 2 行点「加载更多」展开，可导出 CSV 或复制 TSV。
- 算法一致：表里每个 HEX 都用本页的 HSL→RGB→HEX 算法实算，和「生成浅色阶」按钮走同一套代码，没有任何特例。
- 换基色：表固定演示用 #3498db；你自己的品牌色请用上方生成器，会得到属于你那套 H、S 的浅色阶。
对照表是「亮度→HEX 的速查」而非「你的基色结果」，它与上方生成器是两个独立信息源：生成器给你具体基色的 6 档，对照表给你 #3498db 的 14 档亮度梯度。
结果边界与舍入说明
- 基色必须合法。填非 6 位 HEX（如 #zzz、#12345、空）会得到具体提示，页面不会拿脏数据硬算或静默归白。
- 灰度基色会得到浅灰阶。若基色 S=0（如 #808080），锁 S 后整组都是无彩灰，浅化只是变白，这是 HSL 语义的正确结果而非 bug。
- HEX 取整到整数 RGB。HSL→RGB 算出的分量多是小数，页面四舍五入成 0～255 整数再转 HEX，末位可能与无限精度差 1，肉眼不可辨。
- 亮度上限 96% 不取纯白。纯白 L=100% 已无色相信息；本页最高到 96%，保留一点点色感，让最浅一档仍是「浅蓝」而非白。
- 不保证对比度达标。浅色阶用于背景时，其上文字需满足 WCAG 对比度。本页只产出颜色，不校验前景文字是否够黑，请另行用对比度工具检查。
- 数值只在本地计算。整条链路只有颜色空间换算，全部在当前页面执行，没有网络请求，也不写 Cookie 或 localStorage，关掉页面即清空。
常见问题
为什么我填 #3498db 出来不是 #d4e6f7？
本页示例给出的 #d4e6f7 是某一档浅色的大致示意；实际由算法按 6 档 L 实算，浅色颜色生成器对 #3498db 给出的是从 #b1cbf1 到 #eef3fc 的色阶。若你想要 #d4e6f7 那一档，可微调基色饱和度或把 L 设到约 88%，整组会整体偏移。
基色和色相同时填会听谁的？
优先听「色相 H 覆盖」：只要它填了 0～360 的合法值，就忽略基色的 H，但仍用基色的 S；若色相框留空，则从基色 HEX 里取 H。两者都空或都非法会提示你补全。
生成的浅色为什么有时发灰？
浅色发灰通常因为基色本身饱和度低（S 小），而本页严格锁定 S 不变，所以浅化后依然低饱和，看起来发灰。换一个更鲜艳的基色（S 接近 0.8）再生成，浅色会更「通透」。
CSS 变量能直接用吗？
能。结果区给出的 :root{ --color-1:#...; ... } 是标准 CSS 自定义属性写法，整块复制进你的样式表，然后用 background:var(--color-1) 调用即可，无需任何修改。
能生成深色或对比色吗？
不能。本页定位是「浅化」，只把 L 往上推到 82%～96%。若要深色，应把 L 往下推（如 20%～45%），那是另一套逻辑；若要做互补色或三角配色也不在本页范围。
为什么最高只到 96% 而不是纯白？
纯白 L=100% 已不含任何色相信息，等于把颜色「洗白」。本页保留 96% 这一档，让最浅处仍看得出是蓝/绿/橙的浅版，而不是一片白，层次更自然。
对照表后两行为什么折叠？
前 12 行直接显示，亮度 95%、96% 两行默认折叠，点「加载更多（还有 2 行）」即可展开；同时可「导出对照表 CSV」或「复制对照表」拿到全部 14 行 TSV，便于粘进表格。
结果会被上传或保存吗？
不会。所有颜色换算只在你当前浏览器里完成，页面不发起任何网络请求，也不写 Cookie 或 localStorage。你在开发者工具的 Network 面板里连点几次「生成浅色阶」，面板始终是空的。