生成配色方案

使用基础颜色并调整色相、饱和度和亮度的偏移程度。生成器会安全地限制数值范围，将色相循环在 360 度内，并将导出数值四舍五入。RGB 数值为整数，HSL 百分比保留一位小数。

基础颜色

输入 3 位或 6 位十六进制颜色代码，例如 #C96C3D 或 #f80。

配色模式不同的模式会改变色相间隔，而幅度滑块则决定方案内的色彩差异。

配色数量为了保证配色和谐，当请求颜色超过核心模式数量时，某些模式会重复间隔。

变化幅度

48%

低幅度会使配色更接近基础色调。高幅度会使亮色和暗色点缀的差异更明显。

配色方案已就绪。

结果

预览条按从左到右的顺序显示配色方案。每个色块都包含针对该特定颜色的前景色文本对比度建议。

使用格式选择器在 CSS 自定义属性和 JSON 之间切换。仅当浏览器剪贴板 API 不可用时，复制操作才会禁用。

HEX RGB HSL CSS JSON

导出格式

生成器将基础十六进制颜色转换为 HSL 格式，根据所选的色彩模式应用色相间隔，然后根据幅度值调整整个配色方案的饱和度和亮度。

十六进制输入会被修剪、标准化并在需要时进行扩展。无效输入不会导致页面崩溃，在输入纠正前将保留上一个有效的配色方案。

色相值会在色轮上循环。饱和度和亮度被限制在 0 到 100 之间，以防止输出无效的颜色数值。

导出内容包含命名、四舍五入的数值和稳定的排序，可以直接放入设计令牌、快速原型或样式表中。

颜色在不同显示器、浏览器和操作系统上的呈现可能有所不同。请将此工具作为快速配色的起点，然后在目标环境和无障碍工作流中验证最终选择。