Skip to main content
InstantTools
More in Forge (4)
MORE IN Forge
Color Palette Gen…
Active
CSS Gradient Gene…
PX to REM & Color…
Regex Tester
View all Forge tools →
Forge · Color

Color Palette Generator

Pick a hue, forge a system. Tonal scale from 50 → 950, harmony palettes, CSS custom properties. Every swatch is copy-ready.

How to use Color Palette Generator

  1. Click the large swatch to open your system color picker, or type or paste a 3- or 6-digit hex code into Base color (hex). The # is optional.
  2. Check the H, S, L, and RGB readout under the field to see how the tool reads your color.
  3. Click any swatch in Tonal scale to copy its hex code.
  4. Scroll to Harmony palettes for complementary, analogous, triad, split complementary, and tetrad sets. Click a swatch to copy it.
  5. Press Copy CSS tokens to copy the 11 --color-brand-* lines, or copy the full :root block shown under CSS tokens.
01 · Real-world fits

Common use cases

  • Building a 50 to 950 brand scale for a Tailwind theme or a design tokens file from a single logo color
  • Picking button states from one scale: 500 or 600 for the fill, one step darker for hover, 50 or 100 for a tinted background
  • Finding a complementary accent so a call-to-action stands apart from the brand color
  • Getting a triad or tetrad set for chart series or category tags
  • Sending a teammate the page URL, which carries the base color, so they see the same palette
02 · The honest pitch

Why Color Palette Generator?

The scale sets lightness to fixed stops, from 97% at step 50 down to 8% at step 950, at your color's hue. Every scale you make has the same light-to-dark rhythm, so a blue 700 and a red 700 sit at the same lightness. The output is named on the 50 to 950 steps Tailwind uses and comes out as CSS custom properties you can paste as is. All of the color math runs in your browser.

03 · Edge cases

Frequently asked questions

Your hex is converted to HSL. The hue is kept, saturation is clamped to between 10% and 90%, and lightness is set to a fixed value per step: 50 = 97%, 100 = 93%, 200 = 85%, 300 = 75%, 400 = 65%, 500 = 55%, 600 = 45%, 700 = 35%, 800 = 25%, 900 = 15%, 950 = 8%. Your color's own lightness is not used, so your exact hex is usually not one of the 11 swatches. Pick the closest step as your brand step, or keep your original hex next to the scale.