Color Palette Generator

Start from one color and generate everything around it: a tint-and-shade scale plus complementary, analogous and triadic color schemes. Click any swatch to copy its hex code.

palette-generator · runs locally
#0e7c86

Tints & shades

Complementary

Analogous

Triadic

What this color palette generator does

One color is a choice; a palette is a system. This generator takes a single base color and derives the rest mathematically in HSL color space: a seven-step scale of tints and shades for UI depth, plus the three classic wheel-based schemes — complementary for contrast, analogous for harmony, and triadic for balanced variety. Every swatch is a button; clicking copies its hex code to your clipboard.

Working in HSL rather than RGB is what keeps the results usable: hue and saturation stay fixed while only lightness or wheel position changes, so generated colors genuinely belong to the same family.

How to build a palette

  1. Pick your base color with the color picker (or paste a hex value into it).
  2. Scan the tint-and-shade scale for backgrounds, borders and text colors.
  3. Choose an accent from the complementary, analogous or triadic row.
  4. Click swatches to copy hex codes into your design tool or CSS.

From palette to product

A practical recipe: use the lightest tint as your page background, the darkest shade for body text, the base color for primary buttons and links, and one complementary or triadic color — sparingly — for highlights and badges. Two of your swatches also make an instant on-brand background in the CSS Gradient Generator.

Frequently asked questions

What are complementary, analogous and triadic color schemes?

They are relationships on the color wheel. Complementary colors sit 180° apart and give maximum contrast. Analogous colors sit 30° to either side and feel harmonious. Triadic schemes space three colors 120° apart for a balanced but vivid combination.

What are tints and shades?

Both keep the hue and change the lightness: tints move toward white, shades toward black. A tint-and-shade scale of one brand color gives you backgrounds, borders, text colors and hover states that all feel related — the backbone of most design systems.

How do I choose a base color?

Start from something fixed: a brand color, a dominant color in a key photo, or a color with the right temperature for the mood (cool blues and greens for calm and trust, warm reds and oranges for energy). The generator then builds the supporting cast around it.

How do I check my palette for accessibility?

Test text/background pairs against WCAG contrast ratios — 4.5:1 for normal text, 3:1 for large text. The dark end of the tint-and-shade scale on a light tint from the same scale usually passes comfortably.

CSS Gradient Generator

Design linear and radial gradients visually and copy the CSS code.

Open tool →

CSS Minifier

Minify CSS by stripping comments and whitespace. Shows size savings.

Open tool →

Email Signature Generator

Create a clean HTML email signature that works in Gmail and Outlook.

Open tool →