颜色工具箱

配色方案生成、单色明度阶、对比度检测与渐变生成一站式工具箱

快捷预设

实时预览

应用场景预览

品牌标题示例

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

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 色核心调色板。

相关工具