A good website palette is smaller than most people expect. It is usually one brand colour, one accent, a set of neutrals and a few status colours.

Step 1: Pick one base colour

Start from something that already exists: a logo, a product photo, or a mood. You can type any HEX, rgb() or hsl() value into the generator, or drop in an image and let it pull the dominant colours out for you.

Step 2: Choose a harmony

Colour-wheel harmonies are shortcuts to colours that look related:

  • Analogous: neighbours on the wheel. Calm and cohesive.
  • Complementary: opposites. Strong contrast, good for one accent against a base.
  • Triadic: three evenly spaced hues. Lively, so use one dominant colour and keep the others small.
  • Split-complementary: a base plus the two neighbours of its opposite. Contrast with less tension.
  • Tetradic: four hues. Hard to balance, best with clear roles.
  • Monochromatic: one hue in different lightness values. Safe and elegant.

Step 3: Give each colour a job

A common rule of thumb is roughly 60 percent neutral background, 30 percent a secondary colour and 10 percent an accent for buttons and links. It is a guide, not a law, but it stops every colour from competing.

Step 4: Build a scale

The tool turns your first colour into a light-to-dark scale of nine steps. Use the lightest steps for backgrounds and borders, the middle for buttons and icons, and the darkest for text. Scales make it easy to create hover and disabled states without picking new colours.

Step 5: Check contrast

Before committing, test text and background pairs. Body text needs at least 4.5:1 against its background, and large text and interface parts need 3:1. See WCAG contrast explained for the rules. Bright accent colours often work as a button background with dark text, and fail as text on white.

Step 6: Export it

Copy the palette as CSS custom properties, JSON, or a plain list of HEX values and paste it into your stylesheet:

:root {
  --color-1: #2563eb;
  --color-2: #ebad25;
}

When pulling colours from a photo

The extracted colours are the most common ones, which are often dull backgrounds. Pick the one or two that carry the feeling of the image, and add neutrals yourself. The extraction runs entirely in your browser, and photos are never uploaded.