Pick how you want people to feel about your business, or start from colors you already use, and this free tool builds a six color brand palette around it. You see it on a sample website, check that every pairing is readable, and copy the codes straight into your site or your designer’s inbox.
No sign up, no email address. If you start from a photo, it stays in your browser and never reaches our server.
Your palette
Lock the colors you like, then generate another to change the rest. Change any color with its picker or hex code.
On a website
This headline is in your headline color
Body text sits in your body color on your background. Read a few lines of it and ask whether it feels like your business.
Your secondary color carries a section like this one
First service
A short line about what you do.
Second service
A short line about what you do.
Third service
A short line about what you do.
Readability check
Normal text needs a contrast ratio of at least 4.5:1 to meet WCAG AA. Large text needs 3:1.
| Sample | Pairing | Ratio | Result |
|---|
Personality
Could suit
Examples, not rules. Any business can wear any color well.
Color families
Lighter and darker steps of your three main colors, for hover states, borders, and backgrounds. Select any step to copy its hex code.
Want this palette working on your website? Book a 15 minute call and we will talk it through.
How the six colors work together
Most brands need more than a logo color. A website uses six jobs’ worth of color, and when one color tries to do two jobs, something gets hard to read.
- PrimaryYour signature color. It sets the tone in the header, the logo, and the main buttons.
- SecondaryA companion that supports the primary in section backgrounds, icons, and borders.
- AccentThe color that gets clicked. Save it for calls to action and the one thing on a page you want noticed.
- BackgroundA very light tint of your primary, so the page feels like yours without anyone noticing why.
- HeadlineA near black made from your primary, for headings that read crisply.
- Body textA slightly softer dark for paragraphs, still well above the readability floor.
Why start with a feeling instead of your industry
If every plumber picks blue because plumbers pick blue, every plumber looks the same. The better question is how you want a customer to feel when they land on your site: reassured, excited, looked after, impressed. Two businesses in the same field can answer that very differently, and that difference is part of what makes a brand worth remembering.
The feeling you pick steers the colors the tool suggests. Your own colors always come first, though. The feeling only fills in what you leave blank.
Why some buttons get dark text
White text looks clean on a dark button, but on a bright yellow, lime, mint, or orange it can almost disappear. The tool measures both white and dark text against every fill and uses whichever reads better, using the same contrast ratio the Web Content Accessibility Guidelines use. Normal text needs at least 4.5 to 1.
We live with this ourselves. Our own brand green measures about 2 to 1 against white, so on our pages it appears as a fill and an accent, and the words sit in our blue. A color can be perfect for your brand and still be the wrong color for small text. The readability check shows you which is which.
Questions people ask
Will the tool change the colors I enter?
No. A color you type, pick from a photo, or edit in the results stays exactly as you set it. Only the colors the tool suggests are adjusted, and only far enough to keep text on and against them readable. If one of your own colors fails a readability check, the tool tells you instead of quietly changing it.
Is my photo uploaded anywhere?
No. The photo is read by your browser on your own device, and the colors are picked from it there. Nothing is sent to Digital Maestro or anyone else.
Can I use the palette for my business?
Yes. The palette is yours to use on your website, print, social media, or anywhere else. Copy the hex codes, or copy the CSS variables if you or your developer are setting up a site.
How do I use the CSS variables on a WordPress site?
Most modern WordPress themes let you set global colors in the theme settings, and that is the best place for them, since every page then follows. If your theme does not, the CSS variables can go in the site’s Additional CSS, and your developer can point the theme’s styles at them.
Can I come back to a palette later?
Yes. The page address updates as you build, so bookmark it or use Copy link to this palette and the same six colors open again.
Is a color palette enough for a brand?
It is a strong start. A full brand also covers your fonts, your logo, your photos, and the way you write. If you want help pulling all of that together on a website that brings in work, that is what we do.
Want these colors working on a website?
Digital Maestro builds and cares for websites for small businesses, with a palette that reads well on every screen. Tell us about your business in a quick call and we will tell you honestly what would help.