SiteBrite SVGsColor palette generator
Press Generate for a new set of website colors. Lock the ones you like and they stay while the rest change. Every palette keeps words easy to read, on the background, on buttons and on dark bands.
More colors
Worked out from the five above, for the quieter parts of a page. You can change these too.
Why these colors work
Words need a contrast of 4.5 to 1 to be easy to read (7 to 1 for your main text), and stars 3 to 1: the levels accessibility guidelines ask for. Small words in your accent color use a deeper or lighter shade of it where they need one (Accent words, in the exports).
Palette card
Start from a ready-made palette
Fresh every morning
Bread, pastries and coffee on Main Street
Open Tuesday to Sunday, 7 am to 3 pm.
See the menu Directions
Catering
Trays for 10 to 200 people, with a week’s notice.
Every picture on this site, its downloads and ZIP packs follow. You can change them back with the palettes on the pictures pages.
Free to use. Lifetime ($19, once) skips the wait before downloads and adds: No wait before the palette card, and every picture in these colors as ZIP packs.
Questions
How is this different from other palette generators?
Most give you five loose colors and leave you to work out which is the background and whether text reads on it. Here each color has a job on a website (background, main, accent, dark bands, text), and every palette is checked before you see it: text on the background, words on buttons, links, small labels in the accent and words on dark bands all pass the contrast levels accessibility guidelines ask for.
What does the lock do?
A locked color stays while the others change. Lock your brand’s main color, type its code in, and press Generate until the rest look right. If a locked color can’t work in its job (a dark color as the background, say), it’s moved just enough, and a line under the colors says so.
Can I start from my logo?
Yes. Choose “From your logo” and pick the file: its colors are read right here in your browser (nothing is uploaded), the main and accent are taken from it and locked, and the rest is worked out to go with them. You can paste color codes from another palette site the same way.
What does the color blindness check do?
About 1 in 12 men and 1 in 200 women see some colors differently. When your main and accent colors would look nearly the same to them (green and orange often do), a line says so. “See it as” shows the small website and the pictures the way they would see them.
How do I use the colors on my website?
Copy them as CSS variables, a Tailwind theme, JSON or plain codes, and paste them into your site’s styles or your website builder’s color settings. The link at the top of your browser opens these exact colors again, so you can share it with whoever builds your site.
More free tools
From the makers of these tools
SiteBrite websites come in colors like these, already checked
SiteBrite builds professional websites for small businesses: hours that are always right, your menu or prices, events, bookings and a Spanish version, in your colors. You change words and photos yourself. $7 a month.