Superhero Technologies
Colors

Choosing colors for your site.

A little theory, a word on what colors mean to different people, and twelve palettes you can try on one live hero. They are the same twelve a client chooses from in their portal.

Skip to the palettes

A little color theory

You don't need a color wheel to choose well. Five ideas do most of the work.

Hue
Hue is what we mean by the name of a color: red, blue, green. It carries the first impression, which is why a brand is often remembered by one. It is also the least dependable part of a palette. About one man in twelve sees some hues differently, so a page should never say anything with hue alone.
Warm and cool
Reds, oranges and yellows feel warm and seem to come towards you. Blues, greens and violets feel cool and sit back. Most palettes that work pair the two, a cool ground with one warm accent or the other way round, so the eye knows where to go.
Value and saturation
Value is how light or dark a color is, and saturation is how strong. Text is readable because of value, not hue. Dark text on a light ground reads in any color, while two colors of the same value blur together however different they look. Strong color tires the eye over a large area, so keep it for small things.
60-30-10
This rule of thumb comes from interior design. About 60% of the page is the ground color, 30% a supporting one (cards, headings, the footer) and 10% the accent, which goes on the thing you want pressed. The hero below follows it. Treat it as a starting point, not a law.
Contrast is a floor
Contrast is a minimum to meet, not a matter of style. To meet WCAG AA, body text needs 4.5:1 against its background, and large text and the edges of buttons need 3:1. Every palette here has been measured, and its card shows the numbers. Ourelements ship with measured pairs too, so a palette that passes here still passes on a page.

What colors say, and to whom

Nobody is born knowing what a color means. We learn it, and it changes with place, faith and generation. Here are the six that come up most.

Red
Red means energy, appetite and urgency, which is why it sells food and marks a sale. It also means danger, and debt. In Chinese tradition it is luck and celebration, the color of New Year envelopes, and many Indian brides wear it. On a button, red says "now". On a whole page it can say "warning".
White
White is space, cleanliness and calm, and it is the ground of most websites. In Britain and the US it is the bride's color. In Chinese and many Hindu traditions it is the color of mourning. A white site rarely offends anyone, but a page with nothing else can feel clinical. That suits a dentist better than a bakery.
Green
Green is nature, health and "go". In the US it is also money. It has a special place in Islam, and it stands for Ireland. Political parties in many countries use it, so a bright green can read as a cause. Deep greens read as heritage, bright ones as eco.
Gold
Gold means reward, quality and celebration, from medals and festivals to wedding jewelry in many cultures. A touch of it says premium, and a lot of it says flashy. Gold text is also hard to read on a light ground, so on a website it belongs in shapes and lines, not in text.
Blue
Ask people their favorite color and blue comes top in surveys in many countries. Banks, insurers and software companies know this. That popularity is also blue's weakness, because a blue site can look like everyone else's. It is political too: blue means the Democrats in the US and the Conservatives in the UK.
Black
Black means authority and luxury, and it is the ink on every page. In fashion and jewelry it reads as premium. It is also a color of mourning in many places. A mostly black site feels like evening: good for a cocktail bar, heavy for a nursery.

None of this is a rule, and all of it depends on who is looking. The same green is a garden to one visitor and a political party to another. So before you choose, ask who your visitors are.

Twelve palettes, one hero

The same sample page, painted twelve ways. Choose a palette to see it take over. Every color in the sample is one of the palette's seven, and only where it can be read: a color too light to carry text becomes a fill behind it, and its card says so.

Garden design · Est. 2009

Gardens that grow into themselves.

We draw it, plant it and come back each season, so the garden you paid for is the garden you get, three summers on.

Book a visitSee our gardens
Five-star review

They listened, then they planted. It still looks like the drawing, only better.

Priya, a client in Harrogate
A sample page for a made-up garden designer. Showing Classic professional.

The twelve, up close

Two palettes in each of six directions. Press the heart on up to two, a first choice and an alternative. They travel with you to checkout, and your portal's brand guide opens with them ready for you to confirm.

Classic professional

Classic professional

Feels steady, confident, a little formal

  • Background: #f7f9fc
  • Surface: #eaecf0
  • Text: #1c2733
  • Quiet text: #5e666f
  • Primary: #1f3a5f
  • On primary: #f7f9fc
  • Accent: #c9a227

Measured contrast

  • Text 14.35:1 AA
  • Button 10.88:1 AA
  • Accent 2.29:1 Fails
  • Quiet text 5.52:1 AA

Its accent is too light for text or marks on the background; we use it as a fill behind its text color, and draw marks in its primary.

Navy is the color of uniforms, banks and courtrooms in the US and UK, so it reads as trust and authority, and can read as cold. Gold says quality; at Chinese New Year or an Indian wedding it says prosperity and celebration, so the accent may feel warmer to some visitors than you meant.

Pairs with

Slate and copper

Feels grounded, modern, quietly expert

  • Background: #f5f6f8
  • Surface: #ffffff
  • Text: #1e2530
  • Quiet text: #566070
  • Primary: #33475b
  • On primary: #ffffff
  • Accent: #a8552a

Measured contrast

  • Text 14.25:1 AA
  • Button 9.57:1 AA
  • Accent 4.85:1 AA
  • Quiet text 5.87:1 AA

Slate is roofs, suits and steel: neutral almost everywhere, which is its strength and its risk, because neutral can read as dull. Copper points to trades and workmanship, pans, pipes and stills, and warms the page without gold's sense of ceremony.

Warm & earthy

Warm & earthy

Feels warm, homey, rooted

  • Background: #faf6f0
  • Surface: #eeeae4
  • Text: #33302b
  • Quiet text: #6f6b66
  • Primary: #9c4a2f
  • On primary: #faf6f0
  • Accent: #e0a458

Measured contrast

  • Text 12.2:1 AA
  • Button 5.67:1 AA
  • Accent 2.02:1 Fails
  • Quiet text 4.91:1 AA

Its accent is too light for text or marks on the background; we use it as a fill behind its text color, and draw marks in its primary. On a surface its quiet text is too faint, so we set it in its text color there.

Terracotta and olive are the clay pots, roof tiles and groves of the Mediterranean, and to many visitors they mean food and hospitality. Olive also has a military edge in the US, and browns can look dated unless the photography is warm too.

Terracotta and sage

Feels sunlit, calm, made by hand

  • Background: #fbf5ee
  • Surface: #f3e9dc
  • Text: #2f2a25
  • Quiet text: #6b6157
  • Primary: #a3472a
  • On primary: #ffffff
  • Accent: #5f7a55

Measured contrast

  • Text 13.11:1 AA
  • Button 6.01:1 AA
  • Accent 4.4:1 AA large
  • Quiet text 5.58:1 AA

Sage has become the shorthand for calm in UK and US wellness and interiors, popular enough now to look generic on its own. In Mexico or Spain terracotta is simply what floors and roofs are made of, so it reads as home rather than as a trend.

Bold & modern

Bold & modern

Feels confident, electric, of the moment

  • Background: #ffffff
  • Surface: #f2f2f3
  • Text: #1f2937
  • Quiet text: #626973
  • Primary: #6d28d9
  • On primary: #ffffff
  • Accent: #f43f5e

Measured contrast

  • Text 14.67:1 AA
  • Button 7.1:1 AA
  • Accent 3.67:1 AA large
  • Quiet text 5.54:1 AA

Violet reads as creative and digital because so much software uses it. It has older meanings: in Catholic churches it marks Lent and Advent, a color of waiting and penitence, and in Thailand it is traditionally worn in mourning. The hot pink-red accent reads as urgent, so use it sparingly.

Pairs with

Ink and coral

Feels sharp, editorial, warm at the edges

  • Background: #ffffff
  • Surface: #f4f4f7
  • Text: #14172b
  • Quiet text: #5b5f75
  • Primary: #1b1f3b
  • On primary: #ffffff
  • Accent: #e04e39

Measured contrast

  • Text 17.68:1 AA
  • Button 16.08:1 AA
  • Accent 3.94:1 AA large
  • Quiet text 6.29:1 AA

Near-black ink with one coral note is the look of magazines and newer banks: assured, with a human touch. Red-orange also means stop, sale and error on most screens, so keep it to one action per view or it starts to read as an alert.

Fresh & natural

Fresh & natural

Feels fresh, healthy, out of doors

  • Background: #f6faf4
  • Surface: #e9eee8
  • Text: #24382a
  • Quiet text: #637267
  • Primary: #2f7d47
  • On primary: #f6faf4
  • Accent: #f4a259

Measured contrast

  • Text 11.88:1 AA
  • Button 4.8:1 AA
  • Accent 1.95:1 Fails
  • Quiet text 4.81:1 AA

Its accent is too light for text or marks on the background; we use it as a fill behind its text color, and draw marks in its primary. On a surface its quiet text is too faint, so we set it in its text color there.

Green says growth, health and go on most traffic lights, and money in the US, where the notes are green. In many Muslim communities green carries religious weight, and on packaging it implies environmental claims, so be ready to back them.

Pairs with

Forest and cream

Feels deep, established, quietly rural

  • Background: #faf6ea
  • Surface: #f0ead6
  • Text: #1f2d24
  • Quiet text: #5a6a5e
  • Primary: #1f4d36
  • On primary: #faf6ea
  • Accent: #a65f1c

Measured contrast

  • Text 13.32:1 AA
  • Button 8.94:1 AA
  • Accent 4.54:1 AA
  • Quiet text 5.31:1 AA

Dark green on cream is British racing green and the old railway liveries, so in the UK it reads as heritage and quality. Elsewhere it simply reads as woods and fields. The rust accent keeps it from looking like a bank.

Elegant neutrals

Elegant neutrals

Feels restrained, refined, lets the work speak

  • Background: #faf9f7
  • Surface: #eeedea
  • Text: #2b2926
  • Quiet text: #696765
  • Primary: #423e37
  • On primary: #faf9f7
  • Accent: #b08d57

Measured contrast

  • Text 13.78:1 AA
  • Button 10.1:1 AA
  • Accent 2.93:1 Fails
  • Quiet text 5.35:1 AA

Its accent is too light for text or marks on the background; we use it as a fill behind its text color, and draw marks in its primary.

Warm grays step back so photographs lead, which is why galleries and interior designers use them. Neutrals carry few cultural meanings of their own, but gray alone can feel somber or unfinished; the bronze warms it and hints at craft rather than luxury.

Stone and charcoal

Feels quiet, architectural, monochrome with warmth

  • Background: #f4f2ee
  • Surface: #e9e5de
  • Text: #24262a
  • Quiet text: #62605b
  • Primary: #2e3136
  • On primary: #f4f2ee
  • Accent: #8a6a4a

Measured contrast

  • Text 13.55:1 AA
  • Button 11.67:1 AA
  • Accent 4.42:1 AA large
  • Quiet text 5.61:1 AA

Near-monochrome reads as considered and premium in fashion and in Japanese and Scandinavian design. Black is worn for mourning in Britain and the US; white is, in China and in Hindu tradition. Here neither dominates: stone and a leather brown keep it warm.

Vibrant & playful

Vibrant & playful

Feels loud, happy, ready for a party

  • Background: #fffdf7
  • Surface: #f2f0ec
  • Text: #22223b
  • Quiet text: #646473
  • Primary: #e63946
  • On primary: #fffdf7
  • Accent: #ffb703

Measured contrast

  • Text 15.18:1 AA
  • Button 4.09:1 Fails
  • Accent 1.71:1 Fails
  • Quiet text 5.71:1 AA

Its primary cannot carry small text; we use it as an edge or behind large type. Its accent is too light for text or marks on the background; we use it as a fill behind its text color, and draw marks in its primary.

Red is luck and celebration at Chinese New Year and the color of the bride at a Hindu wedding; in most shops it means sale, and on forms it means error. With sunshine yellow it can recall fast food, which the steadier blue helps to offset.

Sunshine and teal

Feels sunny, relaxed, a day at the coast

  • Background: #fffaf0
  • Surface: #fff0c2
  • Text: #12343b
  • Quiet text: #4f6a70
  • Primary: #ffc529
  • On primary: #12343b
  • Accent: #0f766e

Measured contrast

  • Text 12.77:1 AA
  • Button 8.39:1 AA
  • Accent 5.26:1 AA
  • Quiet text 5.56:1 AA

Yellow is optimism and warmth to most visitors and also caution, from road signs to hazard tape, so a calm teal carries the text. Saffron-yellow is the robe of Buddhist monks in Thailand and Sri Lanka, worth knowing if your visitors include those communities.

Found your colors?

Pick a plan and bring your two palettes with you. We start your brand guide from them.

Your favorites

Nothing saved yet. Press the heart on any element, feature, style, flavor, palette or typeface pairing and it waits here for you.

Your favorites go with you to checkout, so we know what you want on your site.

Get Started

Your $150 SEO audit, free

We'll read up to ten pages of your site, see what your customers search for and who shows up instead. You'll see your score here in a minute or two, and the full plain-English report comes by email, so use an address you check.

We'll email your report either way.

How we use these: our privacy policy.

Any finding in this report that goes into a build with us does not add to the cost of the build. A person follows up after the report. More about the audit

Message us