Colour palette generator
Start from one colour or a photo. You get a scale of shades from 50 to 950, colours that go with it, a contrast check for every swatch, and code to paste into CSS or Tailwind.
Free, no sign-up. Runs in your browser. Nothing you type or upload is sent to us or stored.
Give your page these colours
A Liite page comes with six themes, from sunset to midnight. Pick the one closest to your palette and your link-in-bio page is ready in a few minutes.
How to use it
- Pick a base colour, type its hex code, or drop in a photo to pull colours from it.
- Choose a harmony to see colours that go with your base.
- Check the contrast labels, then copy the palette as hex, CSS variables, Tailwind or JSON.
Shades that look even
The scale is built in OKLCH, a colour space where equal steps in lightness look equal to the eye. Mixing a colour with white or black in plain RGB tends to make the light end washed out and the dark end muddy. Here every step keeps your colour's hue, and the strength of the colour eases off a little at the very light and very dark ends, the way hand-tuned design system palettes do.
The steps follow the 50 to 950 naming that Tailwind and many design systems use. 500 is close to a typical brand colour, 50 to 200 work for backgrounds and tints, and 700 to 950 for text and dark surfaces.
Colours that go together
Complementary pairs your colour with the one opposite it on the colour wheel, for strong contrast. Analogous picks its neighbours for a calm, related set. Triadic and split complementary spread three colours around the wheel for more variety, and monochrome stays with one hue at different lightness.
The hues are turned in OKLCH too, so the matching colours come out about as bright as your base rather than one of them glaring.
Contrast you can read
Each swatch shows its WCAG contrast ratio against white and against near-black text. AA needs 4.5:1 for normal text and 3:1 for large text; AAA needs 7:1. Use the labels to choose which shades can carry text and which are better as backgrounds.
Palettes from photos
Drop in a product photo, a logo or a picture of your shop front and the tool finds its main colours. The image is read on your device and never uploaded. Click any colour it finds to use it as the base.
Questions
Can I share a palette?
Yes. The page address updates as you pick a colour, for example liite.co/tools/color-palette-generator?color=1f7a3d. Send that link and it opens with the same base colour.
Which format should I copy for Tailwind?
Tailwind CSS v4 reads colours from an @theme block, which is what the Tailwind option gives you. Paste it into your main CSS file and classes like bg-primary-500 work straight away.
Why do some of my shades look less saturated?
Screens can't show every colour at every lightness. When a shade would fall outside what an sRGB screen can display, the tool lowers its saturation just enough to fit, keeping its lightness and hue.
Is my photo uploaded?
No. The photo is shrunk and read in your browser to find its colours. Nothing is sent to us.
What does AA large mean?
The colour pair reaches 3:1, which WCAG allows for large text (about 24px, or 19px bold) and for icons, but not for body text.