toolkit

Color Tools

Runs in browser

Pick colors, build palettes, and ensure accessible contrast

#4f46e5

Scheme

#488fe5

RGB: 72, 143, 229

HSL: 213, 75%, 59%

#4f46e5

RGB: 79, 70, 229

HSL: 243, 75%, 59%

#9e48e5

RGB: 158, 72, 229

HSL: 273, 75%, 59%

#e548dd

RGB: 229, 72, 221

HSL: 303, 75%, 59%

#48dde5

RGB: 72, 221, 229

HSL: 183, 75%, 59%

How to Use

Generate color harmonies from a base color.

You will see:

  • Generated Palette (Analogous, etc.)
  • Lockable Colors
  • Export options (JSON/CSS)

About Color Palette Generation

Color palettes are coordinated sets of colors that work together harmoniously. A well-designed palette creates visual consistency across your application and reinforces brand identity.

Color Harmony Types

  • Monochromatic: Variations of one hue
  • Analogous: Adjacent colors on the wheel
  • Complementary: Opposite colors for contrast
  • Triadic: Three evenly spaced colors
  • Split-complementary: Base + two adjacent to its complement

Building a Design System Palette

  • Primary: Main brand color
  • Secondary: Supporting accent color
  • Neutral: Grays for text and backgrounds
  • Semantic: Success (green), warning (yellow), error (red)

💡 Pro Tips

  • Generate 9-11 shades per color (50-950 scale)
  • Test palettes for accessibility contrast
  • Use CSS custom properties for easy theming
  • Consider how colors look in dark mode

Further Reading