Five-color scheme from one base

Choose a base HEX and a style—five coordinated swatches update live. Copy them as a comma list or CSS variables. No signup—runs in your browser.

Color scheme generator tool

One base HEX, one style—five swatches that stay in tune for UI, slides, or design tokens.

1 Set base · 2 Pick style · 3 Tap a swatch to copy one HEX · 4 Copy all as list or CSS

Your result

Try #2563EB or short #26B. Same math as the palette generator—this page is built for “scheme” handoffs.

Updates live as you edit.

Valid HEX + your style → five swatches below.

Next: Palette generator · HEX → RGB · Color mixer · All design tools · All tools

  • Runs in your browser—nothing uploads
  • Free, no account
  • Your colors stay in this tab

When to use it

Turn one anchor color into a small family for landing pages, dashboards, or decks.

  • Sketch a UI palette before you commit tokens
  • Paste five HEX codes into a doc or stylesheet
  • Switch styles when you need a ramp vs. more hue spread

Pair with contrast checks when text sits on these colors.

Bookmark for brand and UI work—open contrast or gradients in another tab when you need them.

Overview

Five related HEX codes from one base. Shades & tints keeps your hue and builds a ramp; Analogous and Triadic add neighbor or evenly spaced hues. Copy plain text or a :root variable block.

How it works

  1. Set base with the picker or type #RGB / #RRGGBB.
  2. Pick a style—swatches refresh right away (tap Regenerate swatches to re-run).
  3. Copy HEX results or CSS results; use contrast or gradients next if you need them.

Privacy: Swatches stay in your browser—we do not upload or store them.

FAQ

  • Which style first? Start with Shades & tints for a simple ramp; try Analogous or Triadic when you want more hue variety.
  • Account? No.
  • Phone? Picker, field, and swatches work on small screens.
  • Real CSS? Paste the HEX line or variables into your stylesheet or tokens.

Same URL whenever you need a quick five-color pass.