Color Palette Generator

Generate harmonious color palettes from a base color. Create complementary, analogous, triadic, tetradic, and monochromatic schemes with hex/RGB/HSL codes.

Base color (HEX)

Color harmony

Generated Palette

Base

hsl(217, 91%, 60%)

#3C83F6

Complement

hsl(37, 91%, 60%)

#F6AF3C

CSS Variables

:root {
  --color-1: #3C83F6;
  --color-2: #F6AF3C;
}

How to Use Color Palette Generator

1Enter a base color using the color picker or hex input.
2Choose a harmony type: complementary, analogous, triadic, etc.
3See the generated palette with all color codes.
4Copy individual colors or the full palette as CSS variables.

Zenovay

Privacy-first analytics for your website

Understand your visitors without invasive tracking. GDPR compliant, lightweight, and powerful.

Explore Zenovay

CSS Box Shadow GeneratorDesign CSS box shadows with visual controls. Adjust offset, blur, spread, and color.

CSS Border Radius GeneratorCreate custom border radius values with visual controls. Link or unlink corners for quick adjustment.

CSS Flexbox PlaygroundLearn and generate CSS Flexbox layouts visually. Adjust direction, alignment, wrapping, and gap in real time.

Frequently Asked Questions

What is color harmony?▾

Color harmony is the aesthetically pleasing combination of colors based on their positions on the color wheel. The main harmony types: Complementary (opposite colors, high contrast — e.g. blue + orange), Analogous (adjacent colors, harmonious — e.g. blue, blue-green, green), Triadic (3 colors equally spaced at 120° — e.g. red, yellow, blue), Tetradic/Square (4 colors at 90° apart), Split-complementary (base + two colors adjacent to its complement). Monochromatic uses tints and shades of one hue.

How do complementary colors work?▾

Complementary colors are directly opposite on the color wheel (180° apart). Examples: red + green, blue + orange, yellow + purple. When placed side by side, they create maximum contrast and vibration — each makes the other appear more vivid. Too much complementary pairing is overwhelming; use one as dominant (70%) and the other as accent (30%). Analogous colors (15-30° apart) are easier to combine but less dynamic.

What is the 60-30-10 color rule?▾

The 60-30-10 rule is a design principle for balanced color use: 60% dominant color (usually neutral or brand color), 30% secondary color (complements the dominant), 10% accent color (for emphasis, calls-to-action, highlights). This creates visual hierarchy and prevents any single color from overwhelming the design. Example: 60% white, 30% navy blue, 10% bright orange. The ratio ensures the eye moves naturally through the composition.

What are tints, shades, and tones?▾

Tint: a color mixed with white — increases lightness. Shade: a color mixed with black — decreases lightness. Tone: a color mixed with gray — reduces saturation. In HSL: tints increase L toward 100%, shades decrease L toward 0%, tones decrease S toward 0%. Design systems (Tailwind, Material, Radix) use a scale of 10 tints/shades (50-950) for each base color. This creates consistent visual weight across UI elements.

How do I choose colors for accessibility?▾

WCAG 2.1 requires a contrast ratio of at least 4.5:1 for normal text and 3:1 for large text (18pt/14pt bold) against its background. Contrast ratio = (L1 + 0.05) / (L2 + 0.05) where L is relative luminance. Tools: check each color pair. Dark mode consideration: a color legible on white may not be on black — always test both. Avoid relying on color alone for meaning (red=error, green=success) — also use icons or text labels.

Image Tools