颜色工具箱

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

Free to useOpen and use right awayColor Tools

Base Color

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.

About this tool

Color Toolkit is a free online collection of the six color jobs designers do daily: palette schemes, gradient generation, format conversion, picking colors, checking WCAG contrast and looking up color names. Everything lives in one place, so building and documenting a color system takes minutes. No sign-up is needed.

Frequently asked questions

What does the Color Toolkit include?

Palette schemes, gradient generation, color conversion, a color picker, contrast checking and color name lookup.

How is it different from the single color tools?

The single-purpose pages focus on one job each; the toolkit keeps all six color jobs one click apart.

Is this toolkit free?

Yes, completely free with no sign-up.

颜色工具箱

👁️Live Preview

Brand Heading Example

🎯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