颜色工具箱
配色方案生成、单色明度阶、对比度检测与渐变生成一站式工具箱
Quick Presets
Live Preview
Usage Preview
Brand Heading Example
A sample paragraph to feel the readability and mood of the selected color as an interface background.
3.68:1Weak contrast with text (<4.5:1), consider adjusting lightness
Total Colors29
Base HSLhsl(217, 91%, 60%)
Hue217°
ComplementaryTwo colors 180 degrees apart, high contrast
AnalogousNeighbors about 30 degrees apart, naturally harmonious
TriadicThree colors 120 degrees apart, lively and balanced
Split-ComplementaryBase plus the two colors adjacent to its complement, softer contrast
TetradicFour colors 90 degrees apart, rich and full
RectangleTwo complementary pairs forming a rectangle, layered
Monochromatic ScaleOne hue from dark to light, ideal for a unified tone
Export Palette
:root {
--color-base: #3B82F6;
--color-complement: #F6AF3C;
--color-analogous1: #3CE0F6;
--color-analogous2: #523CF6;
--color-triadic1: #F63C83;
--color-triadic2: #83F63C;
}Includes the base, complement and analogous/triadic colors — a ready-to-use 6-color core palette.