Website Color Schemes: 32 Palettes With Hex Codes (and What Converts)

By Umair Ali Sadaqat · Updated September 27, 2026 · Editorial policy

32 website color schemes with hex codes, taken from We.Inc template designs, plus how to build a scheme that converts: a calm base palette with one accent reserved for actions, examples by industry and accessibility checks.

No single color converts best. What matters is how much a button stands out against its page. The color schemes that convert are the ones with a calm, consistent base and one high-contrast accent reserved only for the actions you want people to take.

So instead of asking "which color?", ask "does my most important button look like nothing else on the page?" This guide shows how to build a scheme around that idea.

32 website color schemes from We.Inc template designs

These palettes are taken from the source of We.Inc's own template designs (the four most-used colors in each design's preview, excluding the plain greys of the preview frame). They are template designs, not customer sites, and we make no claim about how any of them convert. Copy a hex code into the hex color picker to see it and get RGB/HSL values, and check any text-on-background pair in the color contrast checker before you use it.

We.Inc template design	Style	Colors (hex)	Scheme
Atlas Builders	Construction / trades	`#101d2c` `#0b1521` `#f2a614` `#d18f0a`	Deep navy base, amber action color
Summit Trades	Trades	`#0e2436` `#e4671e` `#16222e` `#f6eeec`	Navy with safety orange
Ironpeak Roofing	Roofing	`#e4671e` `#0e2436` `#17415f` `#16222e`	Orange-led, navy structure
Ridgewater Plumbing	Plumbing	`#b08544` `#d8401f` `#f2ede3` `#c9a063`	Brass and red on warm cream
Sunward Solar	Solar	`#0b1f3a` `#f5a524` `#d98a0b` `#fff6e6`	Midnight blue and sun gold
Hookline Towing	Towing	`#0e0e0e` `#ffc400` `#f4f1ea` `#161616`	Black and high-visibility yellow
Redline Auto Group	Auto dealer	`#e3262e` `#0e0f11` `#eeeeee` `#17191c`	Racing red on near-black
Maple Street Motors	Auto repair	`#1f4d3a` `#1b1b1b` `#f2b134` `#e6efe9`	Forest green with mustard
Freshpile Carpet Cleaning	Cleaning	`#ffd23f` `#0d1b52` `#1d3fd8` `#dbe2ff`	Bright yellow on royal navy
Tideline Pressure Washing	Exterior cleaning	`#0b1b2b` `#3fd0c9` `#f3f6f5` `#020617`	Dark navy with aqua
Mowline Lawn Care	Lawn care	`#eef3e6` `#c6f24e` `#0f1410` `#1a2a17`	Pale green base, lime accent
Fairway Lawn Co.	Landscaping	`#f6f1e7` `#1d2b1f` `#e8c872` `#2f5d3a`	Cream, deep green, soft gold
Brightside Dental	Dental	`#10312e` `#3f605c` `#0e5f57` `#0a4841`	Calm teal-greens
Meadowpaw Veterinary	Veterinary	`#2f6e6a` `#e9f0ef` `#c9d7d4` `#f7f9f8`	Muted teal on pale mint
Vibrant Wellness	Wellness clinic	`#25382c` `#eef2e6` `#7c9a7e` `#3f6b4a`	Sage and forest
Kinfolk Home Care	Home care	`#0f3d2e` `#f4c542` `#fffdf6` `#0a2e22`	Pine green with warm yellow
Lumora	Healthcare	`#c8a97e` `#182c41` `#0b1220` `#0e1a26`	Midnight navy with sand gold
Sterling & Vance LLP	Law firm	`#8a93a2` `#b08a4f` `#0b0e14` `#f6eeec`	Slate, bronze and ink
Harborview Wealth Partners	Financial advice	`#102a43` `#b08d57` `#d9bf8f` `#faf8f4`	Navy and gold on ivory
Harborline Insurance Agency	Insurance	`#0f2742` `#5fd3c9` `#17a398` `#0b1e33`	Navy with teal
Larkfield Partners	Consulting	`#1f4d3f` `#f4f1ea` `#14181c` `#4a5560`	Bottle green on paper
Keystone Realty	Real estate	`#f6eeec` `#7a2e2a` `#59606b` `#e9f0ef`	Blush base with oxblood
Lucia Trattoria	Restaurant	`#e9c9a8` `#f7f1e6` `#efe6d4` `#23301f`	Warm sand with olive-black
Ember & Roast	Cafe / restaurant	`#ede6dc` `#c9642f` `#14100d` `#f6eeec`	Oat, burnt orange, espresso
Kilnhouse Coffee	Coffee shop	`#2b1d16` `#c65d3b` `#f3ebe0` `#fff8ef`	Roast brown and terracotta
Parcel No. 9 Wines	Winery	`#3a0a15` `#fbe9e3` `#b8324b` `#f4a7a0`	Claret with rose
Petalry Florist	Florist	`#3e1f2b` `#b4546c` `#fbf5f2` `#f3e3dd`	Plum and dusty pink
Hollow Oak Farm Shop	Farm shop	`#24301f` `#f6f1e4` `#5e7f3a` `#e3a33b`	Moss, cream and honey
Suds & Scruff	Pet grooming	`#3b1740` `#ffd84d` `#ff8fab` `#fff8e7`	Aubergine, yellow and pink
Datacore SaaS Hero	SaaS	`#7b39fc` `#a484d7` `#6a2ce0` `#f87b52`	Violet with coral
Mast Security	Security	`#1e2628` `#34e0a1` `#e7ede9` `#8d9a97`	Graphite with mint
Afterglow Sound	Events / music	`#efeaff` `#f472b6` `#ec4899` `#8b5cf6`	Lavender, pink and purple

A pattern you will see across them: most pair a dark or pale base with one saturated accent (amber, orange, yellow, lime or coral). That is the same "quiet base, one action color" structure described below.

Why contrast beats color psychology

Color psychology articles often claim blue means trust, red means urgency and green means growth. There is some truth in general associations, but they depend heavily on culture, industry and context. Red is a warning in one setting and a celebration in another. Green can mean "go," "eco" or "money."

What is well supported is the isolation effect, also known as the Von Restorff effect: an item that differs from its surroundings is more likely to be noticed and remembered. A button in the only orange on a blue-and-white page gets noticed. The same orange on a page full of orange does not.

That gives you two rules that hold across industries:

Pick an accent color that contrasts with your base palette.
Use it only for calls to action. Not for headings, icons or decorative shapes.

The 60-30-10 structure

Interior designers use a 60-30-10 split, and it translates well to websites:

Share	Role	Typical choice
~60%	Background and base	White, off-white, very light grey, or a deep dark for dark themes
~30%	Brand and structure	Primary brand color for headers, nav, section backgrounds
~10%	Accent / action	Buttons, key links, the one thing you want clicked

Add a dark text color (near-black or dark grey rather than pure black is common) and semantic colors: green for success, red for errors, amber for warnings. Keep those semantic colors away from your main buttons so a "Buy now" button is not confused with an error.

Building a scheme in five steps

1. Start from your brand color

If you have a logo, take its main color as the primary. If not, pick one that fits your category (see the table below) and that you like enough to live with.

2. Choose the accent by contrast, not by mood

Look at the color wheel. Complementary colors (opposite each other) create the strongest pop: blue and orange, purple and yellow, teal and coral. If your brand is blue, an orange or warm yellow accent will stand out far more than a second shade of blue.

3. Set the neutrals

Choose a background, a surface color for cards, a border grey and a text color. These do most of the work and should be quiet.

4. Check accessibility

Run every text and button combination through a contrast checker (WebAIM's is free). WCAG 2.2 level AA requires:

4.5:1 for normal body text,
3:1 for large text (roughly 24px regular or 18.66px bold and up),
3:1 for interface components such as button outlines and form field borders.

Low-contrast grey text on white is one of the most common readability problems on the web. If people struggle to read your offer, the button color hardly matters.

5. Test on real screens

Check your palette on a phone outdoors, on a cheap laptop screen and in dark mode if your site supports it. Colors that look refined on a designer's monitor can wash out elsewhere.

Palettes by industry

These are sensible starting points, not rules. Each uses a quiet base and a single contrasting accent.

Industry	Base and primary	Accent for actions	Why it works
Manufacturing / industrial	Navy, charcoal, steel grey	Safety orange or yellow	Serious and dependable, with a visible "Request a quote"
Healthcare / dental	White, soft blue or teal	Warm coral or green	Clean and calm, booking button stands out
Legal / finance	Deep navy or forest green, cream	Gold or bright blue	Traditional trust cues with a clear contact action
Restaurants / food	Warm neutrals, deep red or olive	Bright yellow or orange	Appetising, with an obvious "Order" or "Book"
SaaS / tech	White or near-black, indigo or blue	Vivid green, orange or pink	Crisp, with a high-contrast "Start free"
Beauty / wellness	Blush, sage, cream	Deep plum or black	Soft brand, confident booking button
Home services (plumbing, HVAC, roofing)	White, dark blue	Red or orange	Urgent-feeling call button for emergencies
Ecommerce / fashion	Mostly white and black	One brand accent	Lets product photos carry the color

For manufacturers specifically: buyers often land on a product or capabilities page and want a spec sheet or a quote. Make "Request a quote," "Download spec sheet" and the phone number the only accent-colored elements on those pages.

Worked example: fixing a page where nothing stands out

Imagine a landscaping company site with a green logo, green headings, green icons, a green hero background and a green "Get a free estimate" button. Everything is on-brand, and the button disappears.

The fix:

Keep the green, but move it to structure: the header, section dividers, icons.
Change headings to dark grey text.
Make the hero background a photo with a dark overlay, or off-white.
Change the button to a warm orange, which sits opposite green-blue on the wheel, with white text checked for contrast.
Use that orange nowhere else on the page.

Nothing about the brand changed, but the action is now the most visible thing on the screen.

How to test your colors properly

If you have enough traffic, run an A/B test on the button or accent color, but change one thing at a time and let it run long enough to be meaningful. Low-traffic sites often cannot reach a reliable result; for them, simpler checks work:

The squint test: blur your eyes or the screenshot. The call to action should still be the most obvious shape.
The five-second test: show the page to someone for five seconds, then ask what they were supposed to do.
Heatmaps and click data from your analytics tool to see whether people click the button or something else.

Common mistakes

Using the accent color for decoration, so it no longer signals "click here."
Too many colors fighting for attention.
Light grey text or placeholder text below 4.5:1 contrast.
Relying on color alone to show errors or state (add icons or text too; some visitors are color blind).
Copying a famous brand's palette without the brand recognition to back it up.

Quick checklist

[ ] One base, one primary, one accent
[ ] Accent used only on calls to action
[ ] All text meets 4.5:1 (3:1 for large text)
[ ] Buttons and form borders meet 3:1
[ ] Errors and success states use text or icons as well as color
[ ] Checked on mobile, outdoors and in dark mode

Color is one part of what makes a page convert; our breakdown of landing page examples that convert covers the rest. With We.Inc you can describe the look you want in chat, such as "navy and grey with an orange quote button," browse templates, and then fine-tune colors visually or in code.

Start free

Frequently asked questions

What color converts best for buttons?

No single color wins everywhere. The best button color is one that contrasts strongly with your page and is not used for anything else, so the eye goes straight to it.

How many colors should a website use?

A common approach is a neutral base (white or off-white and a dark text color), one primary brand color and one accent for calls to action, plus semantic colors for success and error messages. More than that usually weakens the visual hierarchy.

Does color psychology really affect conversions?

Color associations exist, but they vary by culture, industry and context, and many popular claims are overstated. What reliably affects conversions is contrast, readability and whether the action you want is visually obvious.

What colors work best for manufacturers and industrial companies?

Industrial buyers value clarity and trust. Navy, charcoal and steel greys with a single strong accent, often safety orange, yellow or a bright blue, suit the category. Make sure spec sheets, quote buttons and phone numbers use the accent so they are easy to find.

How do I check if my colors are accessible?

Use a contrast checker such as WebAIM's. WCAG 2.2 level AA asks for at least 4.5:1 contrast for normal text and 3:1 for large text and for key interface elements like button borders and form fields.

Website builders for the businesses in this article

restaurant website builder

Related guides and tools

Start building

How we research, test and update this page: our editorial policy. We.Inc is our own product.

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.

Product

AI Website Builder: Describe a site in plain English; it's live in minutes
White Label Platform: Your brand, your domain, your margin
Enterprise: SSO, custom SLAs, and dedicated support
Developer API: Embed site generation into your SaaS

Who It's For

For Agencies: Resell under your brand
For Freelancers: Your own branded builder
For Hosting Providers: Add a builder to your stack
For SaaS Platforms: Embed site creation via API
For Startups
For Financial Services
For Healthcare

Features

Resources

Company

View Sitemap