颜色工具箱
配色方案生成、单色明度阶、对比度检测与渐变生成一站式工具箱
快捷预设
实时预览
应用场景预览
品牌标题示例
这是一段示例正文,用于直观感受所选颜色作为界面背景时的可读性与氛围。
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 色核心调色板。