配色方案生成器把一个起始色相变成一整套和谐的颜色. 选一种和色模式加一个基础色相, 它就把配套颜色排出来: 默认视图是互补色对, 蓝 #428CD7 配橙 #D78C42, 页面加载时就算好了. 所有计算都在浏览器里完成, 你做的配色不会离开设备.
五种和色模式, 一个滑块
五个模式按钮是这个工具的核心. 互补 2 色: 基础色相和相差 180 度的色相. 类似 4 色: 一侧 30 度和 60 度, 另一侧 30 度. 三调 3 色, 相隔 120 度. 四色 4 个, 在 90, 180, 270 度. 分裂互补 3 色, 在 150 度和 210 度. 色相滑块范围 0 到 360, 默认 210, 是中蓝色. 所有角度都绕色轮回绕, 比如基础色相 340 的类似模式会得到 340, 10, 40, 310 四个色相.
固定的饱和度和明度, 65 和 55
没有饱和度和明度滑块, 因为两者都是常量: 工具输出的每个颜色都按 65% 饱和度, 55% 明度计算, 变化的只有色相, 随模式切换和滑块拖动而变. 这样整套配色里每个颜色的视觉重量一致, 看起来像一个家族而不是随机拼凑. 转换用的是标准 HSL 转十六进制算法, 结果永远是 7 位大写十六进制码, 例如 #428CD7.
配色实时刷新
没有生成按钮. 每次点击模式按钮或移动滑块, 配色立即重算, 色块直接跟着你的操作走, 没有中间步骤. 点四色模式, 色块马上从 2 个变成 4 个; 色相挪几度, 所有色块同向平移. 这让探索很快: 几秒扫完整个色轮, 哪套顺眼就停在哪.
随机按钮
骰子按钮在 0 到 359 之间取一个整数色相, 滑块跳到那里, 保留你当前选的模式, 然后配色按同样的逻辑重算, 效果和你亲手把滑块拖到那里一模一样. 它适合打断你在某个颜色上反复打转的状态: 连摇几次, 哪个基础色相顺眼就停, 再用滑块手动细调.
复制颜色, 单个或整组
点任意色块, 剪贴板得到那一个十六进制值, 例如 210 度类似色组里的 #8C42D7. 全部复制按钮则把整组复制成逗号分隔的列表, 默认互补对就是 #428CD7, #D78C42. 值永远是大写 6 位十六进制, 直接粘进 CSS, 设计文件或聊天消息都不用再改格式.
色块上的标签为什么在白色和深色之间切换
每个色块悬停时显示它的十六进制值, 文字用白色或近黑色, 取决于背景有多亮. 判断用一个简单的亮度分: 红绿蓝三通道分别按 0.299, 0.587, 0.114 加权, 分严格大于 186 就用深色字, 否则白色. 这是快速的亮度启发式, 不是 WCAG 对比度比: 它保证标签可读, 但不回答这个颜色上的文字能否通过无障碍阈值.
工具保留什么, 以及下一步
工具不保存任何东西, 也没有网络请求; 模式和色相只存在于页面里, 刷新就回到互补模式, 色相 210 的默认状态. 配好一套之后, 接着做: 用颜色转换器把十六进制值转成 rgb() 或 hsl() 写进样式表, 把前景背景组合过一遍WCAG 颜色对比度检测器再定稿, 想做横幅就交给CSS 渐变生成器把这套颜色拉成渐变. 想完整了解那四个对比度阈值怎么算, 看对比度检测器使用指南.