Colour Palette Creator

Generate harmonious color palettes - complementary, analogous, triadic, monochromatic.

Configurazione

Colore base

#58A6FF

Regola armonica

Formato export

Tinte del colore base

Palette - analogous

#57FFB0rgb(87, 255, 176)hsl(152, 100%, 67%)
#57F9FFrgb(87, 249, 255)hsl(182, 100%, 67%)
#57A5FFrgb(87, 165, 255)hsl(212, 100%, 67%)
#5C57FFrgb(92, 87, 255)hsl(242, 100%, 67%)
#B057FFrgb(176, 87, 255)hsl(272, 100%, 67%)

Codice Export

:root {
  --color-1: #57ffb0;
  --color-2: #57f9ff;
  --color-3: #57a5ff;
  --color-4: #5c57ff;
  --color-5: #b057ff;
}

Contrast Checker WCAG

on
1:1Fail
on
2:1Fail
on
3.8:1AA Large
on
2.9:1Fail
on
2:1Fail
All Tools

Come utilizzare Color Palette Generator

Choose your base color

Select a color with the color picker, type directly the hex code, or click "random palette" to generate a balanced base color with brightness and saturation.

Select Harmonic Rule

Choose between complementary, analogous, triadic, split-complementary, tetradic, or monochromatic: each rule applies a different hue rotation scheme on the color wheel.

Check WCAG Contrast

The panel "Contrast Checker" automatically shows the contrast ratio between color pairs in the palette, with WCAG levels reached (AAA, AA, AA Large or Fail).

Export ready-to-use code

Choose your export format (CSS custom properties, SCSS variables or configure Tailwind) and copy the generated code directly into your project.

Suggerimenti

  • Choose monochromatic or complementary color schemes for text interfaces - they are simpler to make accessible than triadic or tetradic colors with too many contrasting tones.
  • Always check the contrast checker before using two colors from the palette together for text on background: an aesthetically pleasing color is not automatically readable.

Domande frequenti

What's the difference between available harmonic rules?

Use complementary colors opposite by 180 degrees for maximum contrast. Analogous uses adjacent colors (within 60 degrees) for a harmonious look. Triadic and tetradic color schemes distribute colors at 120 or 90 degrees for vibrant yet balanced palettes. Monochromatic varies only in lightness while maintaining the same tone.

What do the AAA, AA, and AA Large levels mean in the contrast checker?

Accessibility text limits: AAA requires a contrast ratio of at least 7:1 (normal text), AA requires at least 4.5:1, AA Large applies to large text (18pt+) with a threshold of 3:1. "Fail" indicates insufficient readability contrast.

What are the purposes of the basic color tones?

The section "Base Color Tints" generates a brightness scale (from 10% to 80%) of the same color, useful for creating hover, disabled, background or border variations while maintaining chromatic consistency with the main color.

Can I use Tailwind CSS export directly in my project?

Yes, the Tailwind format generates a ready-to-paste block in the theme.extend.colors section of tailwind.config.js, with automatic names like palette-1, palette-2, etc. that you can rename according to your design system's convention.