📌 Overview

Generate a harmonious color palette from a base color — tints, shades, complementary and analogous colors, with copy-ready hex codes.

🌈 Color Palette Generator

Generate a harmonious color palette from a base color — tints, shades, complementary and analogous colors, with copy-ready hex codes.

Base color

Shades per row

🔒 All processing happens in your browser. No data is uploaded to any server.

What harmonies does it produce?

It shows lighter tints and darker shades of your base, plus the complementary (opposite) color and two analogous neighbors on the color wheel.

Are the colors accessible together?

Not automatically — pair them with the Color Contrast Checker if you need text/background combinations to meet WCAG.

Can I use these in CSS?

Yes — every swatch shows a hex code you can paste straight into CSS or design tools.

Which harmonized colors are generated?

It shows the base color's tint (lighter) and shade (darker), plus the complement (opposite on the wheel) and two analogous colors.

Are these pairings readable?

Not guaranteed. For text/background combos that meet accessibility standards, use the color contrast checker together.

🎨

Theme colors.

🖌️

Quick schemes.

📐

Mock palettes.

To generate harmonized colors from a base, common approaches are:

Tint: mix with white to lighten.

Shade: mix with black to darken.

Complement: 180 degrees across the wheel.

Analogous: within about 30 degrees on the wheel.

Adjusting lightness/saturation in HSL space is more intuitive than editing RGB directly, so this tool generates steps in HSL.

Click a swatch to copy its hex, ready for CSS or design files.