配色方案生成器配色方案生成器
zh-CN

AppHelp

配色方案生成器

选择基础色，生成五个相关色块，复制 HEX 色值或 CSS 自定义属性。

CSS 变量
--color-1: #13C6C9;
--color-2: #1599E0;
--color-3: #2463EB;
--color-4: #3E3BED;
--color-5: #8952EF;

常见任务

  • 配色方案生成器

快速答案

选择基础色，生成五个相关色块，复制 HEX 色值或 CSS 自定义属性。

使用步骤

  1. 1. 选择基础色用颜色选择器设置起始颜色。
  2. 2. 比较配色模式在相邻色、互补色和三角色之间切换。
  3. 3. 复制配色点击色块复制 HEX，或复制五个 CSS 变量。

示例

CSS 自定义属性

输入
基础色 #2563EB，相邻色模式
输出
生成 --color-1 至 --color-5 五条声明。

注意事项

  • 生成结果是配色建议，不会自动检查对比度或无障碍合规性。
  • 色相、饱和度和亮度会经过调整，因此基础色不一定原样保留。

功能特点

  • 相邻色、互补色与三角色模式
  • 五个 HEX 色块
  • 复制样式表所需的 CSS 变量

相关工具

颜色转换与对比度CSS 渐变生成器

常见问题

数据会上传到服务器吗？
不会。此工具的处理逻辑在浏览器本地运行。
是否需要账号？
不需要账号即可使用。