深浅双主题生成器

输入一个主色，基于 HSL 生成浅色主题与深色主题两套语义调色板（背景、表面、边框、主色、主色悬停、文字、次要文字等），并给出每个槽位相对背景的 WCAG 对比度。可选择明度阶梯、近似色或互补+三等分的配色关系，全部在浏览器本地完成。

主色与选项等待输入

主色

十六进制

生成模式

明度阶梯：同色相调整明度；近似色：色相 ±30°；互补+三等分：色相 +180°/+120°/+240°。

双主题色板

主色—

浅色槽位—

深色槽位—

选择主色并点击「生成色板」，浅色与深色两套主题将显示在这里。

浅色主题使用高亮低饱和背景，深色主题使用低亮背景并提亮主色；对比度为各槽位相对背景的 WCAG 对比度。

生成规则

槽位：background、surface、border、primary、primary-hover、text、text-secondary。
浅色主题：背景 L≈98% 且低饱和，文字 L≈18%，边框 L≈88%。
深色主题：背景 L≈12%，表面 L≈17%，文字 L≈95%。
主色悬停：浅色主题降低明度、深色主题提升明度。
配色关系：近似色取色相 ±30°；互补取 +180°；三等分取 +120° 与 +240°。
对比度：(L1+0.05)/(L2+0.05)，其中 L 为 WCAG 相对亮度，数值越大对比越强。