颜色工具箱

配色方案、渐变、颜色转换、取色器、对比度与颜色名称一站式工具箱

免费使用打开即用颜色工具
快捷预设

实时预览

应用场景预览

品牌标题示例

这是一段示例正文,用于直观感受所选颜色作为界面背景时的可读性与氛围。

3.68:1与文字对比度偏弱(<4.5:1),建议调整亮度
颜色总数29
基础 HSLhsl(217, 91%, 60%)
色相217°

互补色色环上相对 180° 的两种颜色,对比强烈

类似色相邻约 30° 的颜色,自然和谐

三角色色环上等分 120° 的三种颜色,活泼均衡

分裂互补色基础色 + 互补色两侧各 30°,对比柔和不刺眼

四角色色环上等分 90° 的四种颜色,丰富饱满

矩形配色两组互补色组成的矩形,层次丰富

单色明度阶同一色相由暗到亮的明度梯度,适合统一色调

导出配色

:root {
  --color-base: #3B82F6;
  --color-complement: #F6AF3C;
  --color-analogous1: #3CE0F6;
  --color-analogous2: #523CF6;
  --color-triadic1: #F63C83;
  --color-triadic2: #83F63C;
}

包含基础色、互补色与类似/三角色,构成可直接用于项目的 6 色核心调色板。

工具介绍

颜色工具箱是一款免费在线的颜色工具集合,把设计师每天要做的六件颜色活儿放在一处:配色方案、渐变生成、格式转换、取色、WCAG 对比度检测与颜色名称查找。不用在工具之间来回跳,搭建和记录一套配色系统几分钟就完成。无需注册。

常见问题

颜色工具箱包含哪些功能?

配色方案、渐变生成、格式转换、取色器、对比度检测与颜色名称查找。

它和单个颜色工具有什么区别?

单个工具页各自专注一件事;工具箱把六件颜色活儿放在一键可达之处。

这个工具箱免费吗?

完全免费,无需注册。

相关工具