Skip to content
PocketDesk
Your files are processed on your device, never uploaded

Color palette generator

  • On device

Result

Working

How to make a colour palette

  1. Type a base colour in the box, for example #2b55e0. HEX, rgb() and hsl() all work.
  2. Choose a palette: All, Shades and tints, a colour-wheel scheme, or Scale 50-900. Set the number of steps for shades and tints (3 to 12).
  3. Pick the value format you want: HEX, RGB or HSL.
  4. Click any swatch to copy its value. Use Copy for CSS custom properties, or Download CSV for a table of names, HEX, RGB and HSL values.

The address bar keeps your settings, so you can bookmark or share the page with the same palette.

How each palette is calculated

  • Shades mix the base with black in equal steps. Tints mix it with white in equal steps.
  • Complementary is the hue 180 degrees across the colour wheel. Analogous takes the neighbours at 30 and 60 degrees either side.
  • Triadic uses hues 120 and 240 degrees away. Split-complementary uses 150 and 210. Tetradic uses 60, 180 and 240.
  • Wheel schemes rotate the HSL hue and keep saturation and lightness.
  • Scale 50-900 keeps the OKLCH hue, sets lightness on a smooth line from 0.975 to 0.25 and lowers chroma near the ends, so light and dark steps stay inside what screens can show. The scale has ten stops: 50, 100, then 200 to 900.

A worked example

The default base #2b55e0 is hsl(226, 74%, 52%). Its complement adds 180 degrees: hue 46, with the same 74% and 52%. That gives #E0B62B, a warm gold that pairs well with the blue. The triadic partners sit at hues 346 and 106, and the split-complementary pair at 16 and 76. The 500 step of the scale is the base itself, step 50 is a very pale blue and step 900 a deep navy.

Tips

  • Check text contrast before you commit. Paste a swatch into the color converter to see WCAG results on white and black.
  • Use tints for backgrounds and shades for borders or hover states.
  • Need the exact colour from a design or photo? Use color picker from image and paste the result here.
  • Name tokens by step (--color-500) rather than by hue, so you can change the brand colour later.
  • Keep to one or two accent colours from a scheme. A triadic palette works best with one dominant colour.

Your colours are processed locally and never sent anywhere.

Questions

Which colour formats can I enter as the base?

HEX with 3 or 6 digits (#25e or #2b55e0), rgb() such as rgb(43 85 224), and hsl() such as hsl(226 74% 52%). Anything else shows an error asking for a valid colour.

What is the difference between a shade and a tint?

A shade mixes your colour with black, so it gets darker. A tint mixes it with white, so it gets lighter. Both keep the same hue.

How is the 50 to 900 scale built?

It uses OKLCH, where lightness matches what people see. Lightness falls evenly from about 97% at step 50 to 25% at step 900, the hue stays fixed and the colourfulness fades at the ends. Step 500 is your base when its lightness is mid-range.

How do I use the CSS variables?

Select Copy and paste the lines inside :root { } in your stylesheet. Each line is a custom property such as --color-500, which you read with var(--color-500).

Why do some colour-wheel schemes look dull?

Schemes rotate the hue and keep saturation and lightness, so a pale base gives pale partners. Pick the strongest colour as your base and use the tints for backgrounds.

Is my colour sent anywhere?

No. Every calculation runs in your browser.

More developer tools