ProToolBox

Five HEX swatches from one color

Choose a base color and a style. Copy a HEX list or CSS variables when you are happy. No signup—runs in your browser.

Palette generator

Pick one base color and a style. Get five HEX swatches you can paste into CSS or decks.

1 Pick base · 2 Choose style · 3 See swatches · 4 Copy HEX or CSS

Your palette

Try #2563EB or #26B. Swatches update when HEX is valid. Check readability in the contrast checker.

Swatches build here—nothing uploads.

Enter #RGB or #RRGGBB for stats and swatches below.

Five swatches appear here.

Use the picker or type HEX. Start with Shades & tints for a simple ramp.

Next: Check contrast · Build a gradient · Explore harmonies · All design tools · All tools

  • Runs in your browser—nothing uploads
  • Free, no account
  • We never see your colors

Bookmark this page if you often tweak brand colors.

Overview

One base color, five related HEX codes. Switch styles for shade/tint ramps, nearby hues, or triadic sets. Copy plain HEX or a :root variable block.

How it works

  1. Set the base with the picker or type #RGB / #RRGGBB.
  2. Pick a style—swatches update right away.
  3. Copy the HEX list or CSS variables; check contrast if you need to.

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

FAQ

  • Which style first? Shades & tints is the easiest ramp. Analogous or Triadic when you want more hue variety.
  • Account? No.
  • Phone or tablet? Picker, HEX field, and swatches work on small screens.
  • Real CSS? Paste the HEX list or variables into your stylesheet or tokens.

Same URL whenever you need a quick palette.

Tools in this category