分类: 开发工具

配色方案生成器

站方自主规划没找到想要的工具?

围绕一个颜色搭出一套配色

选一个基准色,按色轮关系得到成套配色:互补、邻近、三分、四分、单色或明暗阶。每个数值都能按 HEX、RGB、HSL 复制。

颜色数量
  • 1#0f7b63
  • 2#7b0f26
  • 3#073b30
  • 4#3b0712
  • 5#17ba97
全部数值
#0f7b63
#7b0f26
#073b30
#3b0712
#17ba97

调色板由你输入的颜色计算得出,不上传任何内容。

本页的所有处理都在浏览器中完成,不会上传任何内容。

这个工具能做什么

配色背后的关系其实是色轮上的几何:互补色在基准色对面,邻近色在两侧,三分色是等距的三个点。手工推算意味着转成 HSL、加角度、再转回来,尝试往往就停在这一步。这里替你旋转色相;当某种方案的色相数少于你要的色块数时,会改用明度分级而不是重复同一个颜色,所以从一对互补色生成五块,仍然是五个能用的颜色。每个色块都配有可读的标签,可以按你样式表使用的写法直接复制。

使用方法

  1. 选择或输入作为基准的颜色。
  2. 选择配色方案以及需要几个颜色。
  3. 复制单个数值,或一次复制整套配色。

隐私说明

本工具完全在你的浏览器中运行。输入的内容不会被上传、保存或分享,关闭标签页即随之消失。

常见问题

该从哪种方案开始?
想要安静、彼此关联就用邻近色;需要一个跳出来的强调色就用互补色;希望界面收敛、让内容当主角就用单色。
这些配色符合无障碍要求吗?
不会自动符合。配色讲的是和谐,不是对比度。上线前请用对比度检查工具逐一验证文字与背景的搭配。
我输入的颜色会被发送吗?
不会。调色板是在页面里根据你输入的颜色算出来的,不上传也不保存。