配色方案生成
输入一个主色，生成互补/类似/三角配色与明度色阶，并导出 CSS 变量、Tailwind 或 JSON。
常用主色
#3b82f6建议文字色 #000000
- HEX
- #3b82f6
- RGB
- rgb(59, 130, 246)
- HSL
- hsl(217, 91%, 60%)
- 相对亮度
- 0.235
类似色
±30° 与 ±60°，邻近平缓，适合大面积铺色
互补色
相隔 180°，对比最强，适合强调与 CTA
分裂互补
相隔 150° 与 210°，强烈但比互补色柔和
三角配色
相隔 120°，均衡鲜明
四角配色
相隔 90° / 180° / 270°，颜色最丰富
明度色阶
500 就是主色本身；50–400 向白端插值，600–900 向黑端插值，可以直接当设计系统色板
复制到项目里直接用
:root {
--color-primary-50: #f5f9ff;
--color-primary-100: #e7f0fe;
--color-primary-200: #c8dcfc;
--color-primary-300: #a1c3fb;
--color-primary-400: #6ea2f8;
--color-primary-500: #3b82f6;
--color-primary-600: #0b62ef;
--color-primary-700: #084ab5;
--color-primary-800: #06327a;
--color-primary-900: #031d46;
}本工具在你的浏览器内运行，输入的内容与文件不会上传到任何服务器。
常见问题
- 配色方案是按什么规则生成的？
- 按色相环角度关系：类似色取 ±30° 与 ±60°，互补色取 180°，分裂互补取 150° 与 210°，三角配色取 120° 与 240°，四角配色取 90°、180°、270°。色相与饱和度保持不变，只旋转角度，所以同一方案里的颜色重量感是接近的。
- 色阶里的 500 是主色本身吗？
- 是。50–400 是把主色的明度向白端插值，600–900 是向黑端插值，500 固定等于你输入的主色。这样色阶既能直接当设计系统用，主色也不会在色阶里丢失。
- 导出的是不是最终设计稿的颜色？
- 不是。HSL 插值得到的是线性、可复现的色阶，适合做系统色板；正式设计里通常还要按人眼感知（如 OKLCH）微调。本工具的价值是给你一个准确、可算的起点。