Press the space bar to get a new five-color palette, lock the colors you like and keep shuffling the rest. Start from your own brand color or a photo, pick a harmony, check every pair against WCAG contrast rules, see the palette on a sample website, and export it as CSS variables, Tailwind config, JSON, a hex list or a PNG.
Start with jobs, not colors. A typical site needs a page background, a slightly different surface for cards and sections, a text color, one accent for buttons and links, and a muted color for borders and secondary text. Five swatches map neatly onto those five jobs, which is why this tool works in fives. The website preview assigns roles automatically (lightest to background, darkest to text, most colorful to accent) and you can change any of them.
Then decide how loud the brand should feel. A law firm or clinic usually reads better with a monochrome or analogous palette and one restrained accent. A cafe, kids' brand or event page can carry a complementary or triadic palette, as long as the bright colors stay on small areas like buttons, badges and illustrations. A useful rule of thumb is that the background and surface take most of the screen, text a modest share, and the accent only a small one. If the accent starts to cover large panels, the page tends to feel noisy.
The CSS export gives you custom properties named by step, for example --color-100 through --color-500. Define them once on :root and reference them with var(--color-300) wherever you need the color. Many teams then add a second layer of role names on top, such as --brand: var(--color-300) and --text: var(--color-500), so a later palette change only touches the first layer.
Keep text colors and background colors as pairs you have checked. If the contrast table shows a pair at AA or AAA, it is safe for body text; a pair marked AA large is fine for headings and big buttons only. For hover states, darken or lighten the same hue a few steps rather than introducing a new color, which keeps the palette coherent.
For Tailwind CSS version 3, paste the colors block into theme.extend.colors in tailwind.config.js. You can then write classes like bg-palette-100, text-palette-500 and border-palette-200. Extending keeps Tailwind's built-in colors available alongside yours.
Tailwind version 4 moves configuration into CSS. The export also includes an @theme block with --color-palette-100 and the rest; put it in your main stylesheet after the Tailwind import and the same utility classes appear. If you need a full 50 to 950 scale for one brand color, the Tailwind color palette generator on this site builds that from a single hex value.
Yes. It is free with no signup and no limit. Everything runs in your browser; nothing about your palette or your photo is sent to We.Inc.
The tool picks a starting hue (from a locked color, your base color, or at random), then places the other four colors using the harmony you chose. Analogous uses hues 20 and 40 degrees either side, complementary adds the hue 180 degrees away, triadic uses hues 120 degrees apart, and monochrome keeps one hue. Lightness runs from very light to very dark so every palette has a usable background and text color.
They are WCAG 2 contrast levels. AA needs 4.5:1 for normal text and 3:1 for large text (about 24px, or 19px bold). AAA needs 7:1 for normal text. For example, pure black on white is 21:1 and passes everything, while mid grey #777777 on white is about 4.48:1, just under AA for body text.
No. The image is drawn onto a small canvas inside your browser and its pixels are grouped into five main colors there. The file never leaves your device.
The colors are stored in the part of the address after the # sign, which browsers do not send to servers. Copy the link with the Share button or from the address bar and anyone who opens it sees the same five colors.
No. It tells you which color pairs are readable. Accessibility also depends on which pairs you actually use for text, font size, focus outlines, and not relying on color alone to carry meaning. Check the real pages once they are built.
Related: Tailwind color palette generator, Accessible color palette generator, Color palette from image, Color contrast checker, Font pairing tool.
Start for free or see all free tools. We.Inc is free to start, with no card needed. AI building is on paid plans from $20 a month.
We.Inc is an AI-powered website builder you can resell under your own brand. Launch a branded client dashboard, bill on Stripe Connect, and deliver AI-generated websites in minutes. White-label plans start at $99 a month for 25 client sites, with a 7-day free trial and no per-site fees.