Website Color Schemes

A good website color scheme uses one calm background for most of the page, a dark text color with at least 4.5:1 contrast, and one brand accent kept for buttons and links. Here are 40 original schemes on live page layouts, each with a dark mode, contrast scores and copyable CSS and Tailwind code.

Below are 40 color schemes we made for this page, each one applied to a small landing page with a hero, a button and a pricing card, so you can judge it the way a visitor would see it instead of as a row of swatches. Every scheme has a light and a dark version, measured contrast ratios, and two copy-ready formats: plain CSS variables and a Tailwind CSS v4 @theme block, plus a note on turning them into design tokens.

How to use this collection

How to pick a website color scheme

1. Start from the brand color, not from a palette

If the business already has a logo color, that is the accent. Build everything else around it: a background, a text color, a lighter surface for cards, a muted text color for secondary lines, and a text color that sits on the accent. Picking a pretty palette first and then forcing the logo into it is how sites end up with two competing blues.

If there is no brand color yet, choose one by what the business needs a visitor to feel first. Deep blues and greens read as careful and established, warm reds and oranges read as energetic and appetizing, muted earth tones read as natural and calm. These are conventions, not rules; a plumber in teal can stand out precisely because the competition is all blue.

2. Use the 60-30-10 split as a starting point

The 60-30-10 rule comes from interior design: about 60 percent of a room is the dominant color, 30 percent a secondary color and 10 percent an accent. On a website it translates like this:

The point is restraint on the accent. If everything is the accent color, nothing is a call to action. Treat the numbers as a check, not a measurement: if you squint at your page and the accent covers a quarter of the screen, it is doing too much.

3. Check contrast before you fall in love

The Web Content Accessibility Guidelines (WCAG 2.2) set the contrast thresholds most accessibility laws and audits use:

Every scheme on this page passes 4.5:1 for body text, for muted text and for the button label on the accent, in both light and dark versions. The button label rule is stricter than WCAG requires for large bold labels, but button text is often small, so we held it to the body-text bar.

Share	Role on a web page	Variable in these schemes
About 60%	Page background and large empty areas	`--bg`
About 30%	Text, cards, panels, the footer, borders	`--text`, `--surface`, `--muted`
About 10%	Buttons, links, active states, one highlight per screen	`--accent`, `--on-accent`

What	Minimum (AA)	Enhanced (AAA)	WCAG criterion
Body text	4.5:1	7:1	1.4.3 and 1.4.6
Large text (at least 18pt, or 14pt bold)	3:1	4.5:1	1.4.3 and 1.4.6
Buttons, input borders, icons that carry meaning	3:1 against what is next to them	No AAA level	1.4.11

The ratios were computed with the WCAG relative luminance formula, not estimated by eye. If you change a hex value, re-check it with the color contrast checker. This is the same calculation in JavaScript:

4. Design the dark version on purpose

Inverting a light palette rarely works. The dark versions here follow four habits:

5. Test it on a real layout

Colors that look balanced as swatches can feel heavy on a full page, which is why each scheme below is shown on a hero and a pricing card. Before you commit, put your scheme on your own homepage, look at it on a phone outdoors, and check that the main button is the first thing your eye finds.

All 40 schemes at a glance

Scheme	Group	Accent	Text contrast	Button contrast
Midnight Launch	SaaS and tech	`#3b4fe0`	16.3 / 16.0	6.2 / 4.6
Signal Mint	SaaS and tech	`#0e7c66`	15.4 / 15.7	5.1 / 11.5
Graphite Volt	SaaS and tech	`#c43d16`	16.2 / 15.9	5.2 / 6.2
Cloud Iris	SaaS and tech	`#6a3fd1`	15.8 / 16.1	6.5 / 4.7
Dev Console	SaaS and tech	`#13795b`	16.7 / 15.7	5.4 / 11.2
Ledger Navy	Finance and legal	`#1d4f91`	15.8 / 15.9	8.1 / 6.0
Vault Green	Finance and legal	`#1f6b3e`	15.0 / 15.7	6.5 / 9.5
Counsel Oxblood	Finance and legal	`#8a2a2b`	16.7 / 16.1	8.6 / 5.3
Steady Slate	Finance and legal	`#3e5f7d`	15.0 / 15.9	6.7 / 6.6
Brass Audit	Finance and legal	`#8a6414`	16.1 / 15.7	5.4 / 9.6
Clinic Aqua	Health and wellness	`#0b7285`	14.2 / 15.8	5.6 / 9.8
Calm Sage	Health and wellness	`#4f7a3a`	14.7 / 15.8	5.0 / 8.6
Soft Lavender	Health and wellness	`#7445b0`	15.2 / 16.1	6.5 / 5.1
Dental Bright	Health and wellness	`#1769c2`	15.1 / 16.0	5.5 / 6.3
Studio Clay	Health and wellness	`#a4502a`	15.5 / 15.9	5.6 / 6.6
Tomato Table	Food and hospitality	`#c0381f`	16.5 / 16.0	5.5 / 5.8
Espresso Bar	Food and hospitality	`#7a4a2a`	15.6 / 15.8	7.4 / 7.0
Citrus Market	Food and hospitality	`#b45a00`	15.8 / 15.8	4.8 / 8.1
Bistro Olive	Food and hospitality	`#5c6b1f`	15.1 / 15.6	5.9 / 10.5
Berry Bakery	Food and hospitality	`#b0285a`	16.2 / 16.1	6.4 / 5.4
Gallery Ink	Creative and portfolio	`#e0301e`	18.1 / 16.0	4.5 / 5.6
Poster Cobalt	Creative and portfolio	`#2340d8`	16.6 / 16.1	7.5 / 4.7
Neon Studio	Creative and portfolio	`#c0129a`	17.1 / 16.0	5.5 / 5.8
Paper Sketch	Creative and portfolio	`#b5462a`	13.9 / 16.0	5.4 / 6.1
Film Teal	Creative and portfolio	`#00756e`	15.0 / 15.7	5.6 / 11.6
Hardhat Orange	Local trades and home services	`#c4520a`	16.1 / 15.9	4.6 / 7.3
Pipeline Blue	Local trades and home services	`#0b5cad`	15.8 / 15.9	6.7 / 6.5
Roofline Charcoal	Local trades and home services	`#b3261e`	15.6 / 16.0	6.5 / 5.4
Fresh Lawn	Local trades and home services	`#2f7a1f`	15.5 / 15.7	5.3 / 9.9
Spark Electric	Local trades and home services	`#a15c00`	16.7 / 15.8	5.2 / 8.7
Forest Trail	Nature and outdoors	`#2d6a4f`	14.8 / 15.8	6.4 / 8.7
Desert Dusk	Nature and outdoors	`#b04a28`	15.1 / 15.9	5.5 / 6.3
Glacier Lake	Nature and outdoors	`#14708f`	15.0 / 15.8	5.6 / 8.8
Moss and Stone	Nature and outdoors	`#5a6b3a`	14.7 / 15.9	5.8 / 8.5
Coastal Dune	Nature and outdoors	`#1f6f8b`	14.6 / 15.8	5.7 / 8.3
Noir Gold	Luxury and fashion	`#86651a`	17.3 / 15.7	5.4 / 9.4
Velvet Plum	Luxury and fashion	`#6d2160`	16.5 / 16.0	10.3 / 5.8
Ivory Emerald	Luxury and fashion	`#0f5f46`	15.7 / 15.7	7.7 / 11.2
Rose Atelier	Luxury and fashion	`#9c3d4a`	15.9 / 16.1	6.6 / 5.6
Onyx Sapphire	Luxury and fashion	`#24409a`	17.2 / 16.0	9.2 / 4.9

Showing all 40

SaaS and tech color schemes

Product sites need a clear accent for the main action and calm neutrals for dense screens. These five keep the background close to white and spend color on buttons and links.

Midnight Launch

MidnightPricing · Contact

Ship release notes your team actually reads

Muted copy in #586eb6.

Get started

Starter

$19

Choose plan

Color	Light	Dark
Background	#f7f8fc	#10121b
Surface	#ffffff	#1a1b29
Text	#141a2e	#ededf3
Muted	#586eb6	#81859c
Accent	#3b4fe0	#5869e5
On accent	#ffffff	#ffffff
Contrast
Text	16.26:1 AAA	16.02:1 AAA
Muted	4.58:1 AA	5.13:1 AA
Button	6.21:1 AA	4.60:1 AA

CSS variables

:root {
  --bg: #f7f8fc;
  --surface: #ffffff;
  --text: #141a2e;
  --muted: #586eb6;
  --accent: #3b4fe0;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10121b;
    --surface: #1a1b29;
    --text: #ededf3;
    --muted: #81859c;
    --accent: #5869e5;
    --on-accent: #ffffff;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Signal Mint

SignalPricing · Contact

Uptime alerts that wake the right person

Muted copy in #357e70.

Get started

Team

$29

Choose plan

Color	Light	Dark
Background	#f4faf8	#101b19
Surface	#ffffff	#1a2926
Text	#0f2420	#edf3f2
Muted	#357e70	#7e9a95
Accent	#0e7c66	#55e7ca
On accent	#ffffff	#101b19
Contrast
Text	15.37:1 AAA	15.68:1 AAA
Muted	4.55:1 AA	5.82:1 AA
Button	5.13:1 AA	11.46:1 AAA

CSS variables

:root {
  --bg: #f4faf8;
  --surface: #ffffff;
  --text: #0f2420;
  --muted: #357e70;
  --accent: #0e7c66;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b19;
    --surface: #1a2926;
    --text: #edf3f2;
    --muted: #7e9a95;
    --accent: #55e7ca;
    --on-accent: #101b19;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Graphite Volt

GraphitePricing · Contact

Invoices sent before the coffee cools

Muted copy in #6e6e81.

Get started

Solo

$12

Choose plan

Color	Light	Dark
Background	#f5f5f2	#1b1310
Surface	#ffffff	#291d1a
Text	#18181a	#f3eeed
Muted	#6e6e81	#9a857e
Accent	#c43d16	#e77655
On accent	#ffffff	#1b1310
Contrast
Text	16.23:1 AAA	15.92:1 AAA
Muted	4.57:1 AA	5.26:1 AA
Button	5.22:1 AA	6.21:1 AA

CSS variables

:root {
  --bg: #f5f5f2;
  --surface: #ffffff;
  --text: #18181a;
  --muted: #6e6e81;
  --accent: #c43d16;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1310;
    --surface: #291d1a;
    --text: #f3eeed;
    --muted: #9a857e;
    --accent: #e77655;
    --on-accent: #1b1310;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Cloud Iris

CloudPricing · Contact

One inbox for every customer question

Muted copy in #7367b2.

Get started

Growth

$49

Choose plan

Color	Light	Dark
Background	#f8f7fd	#13101b
Surface	#ffffff	#1e1a29
Text	#1e1a33	#eeedf3
Muted	#7367b2	#89819c
Accent	#6a3fd1	#8c6bdc
On accent	#ffffff	#13101b
Contrast
Text	15.76:1 AAA	16.14:1 AAA
Muted	4.57:1 AA	5.09:1 AA
Button	6.47:1 AA	4.70:1 AA

CSS variables

:root {
  --bg: #f8f7fd;
  --surface: #ffffff;
  --text: #1e1a33;
  --muted: #7367b2;
  --accent: #6a3fd1;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #13101b;
    --surface: #1e1a29;
    --text: #eeedf3;
    --muted: #89819c;
    --accent: #8c6bdc;
    --on-accent: #13101b;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Dev Console

DevPricing · Contact

Deploy previews for every pull request

Muted copy in #537768.

Get started

Pro

$24

Choose plan

Color	Light	Dark
Background	#f3f6f4	#101b18
Surface	#ffffff	#1a2924
Text	#101714	#edf3f1
Muted	#537768	#7e9a92
Accent	#13795b	#58e5bb
On accent	#ffffff	#101b18
Contrast
Text	16.71:1 AAA	15.68:1 AAA
Muted	4.59:1 AA	5.81:1 AA
Button	5.37:1 AA	11.19:1 AAA

CSS variables

:root {
  --bg: #f3f6f4;
  --surface: #ffffff;
  --text: #101714;
  --muted: #537768;
  --accent: #13795b;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b18;
    --surface: #1a2924;
    --text: #edf3f1;
    --muted: #7e9a92;
    --accent: #58e5bb;
    --on-accent: #101b18;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Finance and legal color schemes

Banks, accountants and law firms are judged on trust, so these use deep, low-saturation accents and very little decoration. The accent still has to work as a button, which is why each one passes 4.5:1 with its label.

Ledger Navy

LedgerPricing · Contact

Bookkeeping for firms of five to fifty

Muted copy in #3a70c5.

Get started

Monthly close

$240

Choose plan

Color	Light	Dark
Background	#f6f7f9	#10151b
Surface	#ffffff	#1a2029
Text	#0f1d33	#edeff3
Muted	#3a70c5	#7e8a9a
Accent	#1d4f91	#5e95df
On accent	#ffffff	#10151b
Contrast
Text	15.75:1 AAA	15.93:1 AAA
Muted	4.55:1 AA	5.23:1 AA
Button	8.14:1 AAA	5.97:1 AA

CSS variables

:root {
  --bg: #f6f7f9;
  --surface: #ffffff;
  --text: #0f1d33;
  --muted: #3a70c5;
  --accent: #1d4f91;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10151b;
    --surface: #1a2029;
    --text: #edeff3;
    --muted: #7e8a9a;
    --accent: #5e95df;
    --on-accent: #10151b;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Vault Green

VaultPricing · Contact

Savings goals that move on their own

Muted copy in #417b59.

Get started

Plus

Choose plan

Color	Light	Dark
Background	#f5f7f3	#101b15
Surface	#ffffff	#1a2920
Text	#13241a	#edf3ef
Muted	#417b59	#7e9a8a
Accent	#1f6b3e	#69d394
On accent	#ffffff	#101b15
Contrast
Text	15.04:1 AAA	15.69:1 AAA
Muted	4.64:1 AA	5.78:1 AA
Button	6.50:1 AA	9.54:1 AAA

CSS variables

:root {
  --bg: #f5f7f3;
  --surface: #ffffff;
  --text: #13241a;
  --muted: #417b59;
  --accent: #1f6b3e;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b15;
    --surface: #1a2920;
    --text: #edf3ef;
    --muted: #7e9a8a;
    --accent: #69d394;
    --on-accent: #101b15;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Counsel Oxblood

CounselPricing · Contact

Employment law advice in plain terms

Muted copy in #a65c45.

Get started

First consult

$150

Choose plan

Color	Light	Dark
Background	#faf7f5	#1b1010
Surface	#ffffff	#291a1a
Text	#24140f	#f3eded
Muted	#a65c45	#9a7e7f
Accent	#8a2a2b	#d26a6b
On accent	#ffffff	#1b1010
Contrast
Text	16.66:1 AAA	16.09:1 AAA
Muted	4.65:1 AA	5.02:1 AA
Button	8.58:1 AAA	5.33:1 AA

CSS variables

:root {
  --bg: #faf7f5;
  --surface: #ffffff;
  --text: #24140f;
  --muted: #a65c45;
  --accent: #8a2a2b;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1010;
    --surface: #291a1a;
    --text: #f3eded;
    --muted: #9a7e7f;
    --accent: #d26a6b;
    --on-accent: #1b1010;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Steady Slate

SteadyPricing · Contact

Payroll that runs on the same day each month

Muted copy in #59718d.

Get started

Core

$39

Choose plan

Color	Light	Dark
Background	#f4f6f8	#12161a
Surface	#ffffff	#1c2127
Text	#1a2129	#edf0f3
Muted	#59718d	#7e8d9a
Accent	#3e5f7d	#7da0bf
On accent	#ffffff	#12161a
Contrast
Text	14.99:1 AAA	15.89:1 AAA
Muted	4.65:1 AA	5.33:1 AA
Button	6.69:1 AA	6.62:1 AA

CSS variables

:root {
  --bg: #f4f6f8;
  --surface: #ffffff;
  --text: #1a2129;
  --muted: #59718d;
  --accent: #3e5f7d;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #12161a;
    --surface: #1c2127;
    --text: #edf0f3;
    --muted: #7e8d9a;
    --accent: #7da0bf;
    --on-accent: #12161a;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Brass Audit

BrassPricing · Contact

Tax returns prepared and filed by April

Muted copy in #847048.

Get started

Personal

$180

Choose plan

Color	Light	Dark
Background	#fbf9f4	#1b1810
Surface	#ffffff	#29241a
Text	#211c12	#f3f1ed
Muted	#847048	#9a917e
Accent	#8a6414	#e6b856
On accent	#ffffff	#1b1810
Contrast
Text	16.10:1 AAA	15.71:1 AAA
Muted	4.54:1 AA	5.68:1 AA
Button	5.37:1 AA	9.58:1 AAA

CSS variables

:root {
  --bg: #fbf9f4;
  --surface: #ffffff;
  --text: #211c12;
  --muted: #847048;
  --accent: #8a6414;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1810;
    --surface: #29241a;
    --text: #f3f1ed;
    --muted: #9a917e;
    --accent: #e6b856;
    --on-accent: #1b1810;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Health and wellness color schemes

Clinics, therapists and studios want to feel clean and reassuring. Cool blues and greens dominate, with one warm clay option for spas and physio practices that want to look less clinical.

Clinic Aqua

ClinicPricing · Contact

Same-week appointments with a family doctor

Muted copy in #267c8b.

Get started

Walk-in

Choose plan

Color	Light	Dark
Background	#f3f9fa	#10191b
Surface	#ffffff	#1a2629
Text	#0d2a2f	#edf2f3
Muted	#267c8b	#7e969a
Accent	#0b7285	#55d0e7
On accent	#ffffff	#10191b
Contrast
Text	14.21:1 AAA	15.80:1 AAA
Muted	4.55:1 AA	5.71:1 AA
Button	5.59:1 AA	9.82:1 AAA

CSS variables

:root {
  --bg: #f3f9fa;
  --surface: #ffffff;
  --text: #0d2a2f;
  --muted: #267c8b;
  --accent: #0b7285;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10191b;
    --surface: #1a2629;
    --text: #edf2f3;
    --muted: #7e969a;
    --accent: #55d0e7;
    --on-accent: #10191b;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Calm Sage

CalmPricing · Contact

Guided breathing classes, morning and evening

Muted copy in #5a7a4d.

Get started

Drop-in

$15

Choose plan

Color	Light	Dark
Background	#f6f8f3	#141a11
Surface	#ffffff	#1f271b
Text	#1c2618	#eff3ed
Muted	#5a7a4d	#889a7e
Accent	#4f7a3a	#92c17c
On accent	#ffffff	#141a11
Contrast
Text	14.66:1 AAA	15.78:1 AAA
Muted	4.54:1 AA	5.88:1 AA
Button	5.03:1 AA	8.55:1 AAA

CSS variables

:root {
  --bg: #f6f8f3;
  --surface: #ffffff;
  --text: #1c2618;
  --muted: #5a7a4d;
  --accent: #4f7a3a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #141a11;
    --surface: #1f271b;
    --text: #eff3ed;
    --muted: #889a7e;
    --accent: #92c17c;
    --on-accent: #141a11;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Soft Lavender

SoftPricing · Contact

Counseling sessions from a quiet room at home

Muted copy in #7d65a8.

Get started

Single session

$90

Choose plan

Color	Light	Dark
Background	#f9f7fc	#15101b
Surface	#ffffff	#201a28
Text	#251d33	#efedf3
Muted	#7d65a8	#8d819c
Accent	#7445b0	#9974c8
On accent	#ffffff	#15101b
Contrast
Text	15.16:1 AAA	16.11:1 AAA
Muted	4.59:1 AA	5.13:1 AA
Button	6.52:1 AA	5.07:1 AA

CSS variables

:root {
  --bg: #f9f7fc;
  --surface: #ffffff;
  --text: #251d33;
  --muted: #7d65a8;
  --accent: #7445b0;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #15101b;
    --surface: #201a28;
    --text: #efedf3;
    --muted: #8d819c;
    --accent: #9974c8;
    --on-accent: #15101b;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Dental Bright

DentalPricing · Contact

Cleanings, checkups and evening hours

Muted copy in #3373bd.

Get started

New patient exam

$79

Choose plan

Color	Light	Dark
Background	#f4f8fd	#10151b
Surface	#ffffff	#1a2129
Text	#0f2238	#edf0f3
Muted	#3373bd	#7e8c9a
Accent	#1769c2	#559be7
On accent	#ffffff	#10151b
Contrast
Text	15.08:1 AAA	16.03:1 AAA
Muted	4.55:1 AA	5.33:1 AA
Button	5.47:1 AA	6.31:1 AA

CSS variables

:root {
  --bg: #f4f8fd;
  --surface: #ffffff;
  --text: #0f2238;
  --muted: #3373bd;
  --accent: #1769c2;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10151b;
    --surface: #1a2129;
    --text: #edf0f3;
    --muted: #7e8c9a;
    --accent: #559be7;
    --on-accent: #10151b;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Studio Clay

StudioPricing · Contact

Massage and physio under one roof

Muted copy in #9e6042.

Get started

60 minutes

$95

Choose plan

Color	Light	Dark
Background	#fbf6f2	#1b1410
Surface	#ffffff	#291e1a
Text	#2b1a12	#f3efed
Muted	#9e6042	#9a877e
Accent	#a4502a	#d78865
On accent	#ffffff	#1b1410
Contrast
Text	15.54:1 AAA	15.93:1 AAA
Muted	4.65:1 AA	5.32:1 AA
Button	5.59:1 AA	6.58:1 AA

CSS variables

:root {
  --bg: #fbf6f2;
  --surface: #ffffff;
  --text: #2b1a12;
  --muted: #9e6042;
  --accent: #a4502a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1410;
    --surface: #291e1a;
    --text: #f3efed;
    --muted: #9a877e;
    --accent: #d78865;
    --on-accent: #1b1410;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Food and hospitality color schemes

Restaurants and food shops can afford warmer, louder accents because appetite responds to warmth. The backgrounds are slightly cream so photography of food does not look cold against pure white.

Tomato Table

TomatoPricing · Contact

Wood-fired pizza and a long table for friends

Muted copy in #b35944.

Get started

Family feast

$58

Choose plan

Color	Light	Dark
Background	#fff8f3	#1b1210
Surface	#ffffff	#291c1a
Text	#2a1510	#f3eeed
Muted	#b35944	#9a837e
Accent	#c0381f	#e46e58
On accent	#ffffff	#1b1210
Contrast
Text	16.46:1 AAA	16.01:1 AAA
Muted	4.51:1 AA	5.19:1 AA
Button	5.49:1 AA	5.85:1 AA

CSS variables

:root {
  --bg: #fff8f3;
  --surface: #ffffff;
  --text: #2a1510;
  --muted: #b35944;
  --accent: #c0381f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1210;
    --surface: #291c1a;
    --text: #f3eeed;
    --muted: #9a837e;
    --accent: #e46e58;
    --on-accent: #1b1210;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Espresso Bar

EspressoPricing · Contact

Single-origin beans roasted every Tuesday

Muted copy in #916548.

Get started

Bag of 340 g

$18

Choose plan

Color	Light	Dark
Background	#f8f3ee	#1b1510
Surface	#fffdfa	#29201a
Text	#241912	#f3efed
Muted	#916548	#9a897e
Accent	#7a4a2a	#cd956f
On accent	#ffffff	#1b1510
Contrast
Text	15.58:1 AAA	15.83:1 AAA
Muted	4.58:1 AA	5.38:1 AA
Button	7.39:1 AAA	7.00:1 AAA

CSS variables

:root {
  --bg: #f8f3ee;
  --surface: #fffdfa;
  --text: #241912;
  --muted: #916548;
  --accent: #7a4a2a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1510;
    --surface: #29201a;
    --text: #f3efed;
    --muted: #9a897e;
    --accent: #cd956f;
    --on-accent: #1b1510;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Citrus Market

CitrusPricing · Contact

Fruit boxes delivered on Friday mornings

Muted copy in #82732f.

Get started

Small box

$32

Choose plan

Color	Light	Dark
Background	#fffbef	#1b1610
Surface	#ffffff	#29211a
Text	#24200d	#f3f0ed
Muted	#82732f	#9a8c7e
Accent	#b45a00	#e79e55
On accent	#ffffff	#1b1610
Contrast
Text	15.77:1 AAA	15.83:1 AAA
Muted	4.57:1 AA	5.50:1 AA
Button	4.77:1 AA	8.06:1 AAA

CSS variables

:root {
  --bg: #fffbef;
  --surface: #ffffff;
  --text: #24200d;
  --muted: #82732f;
  --accent: #b45a00;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1610;
    --surface: #29211a;
    --text: #f3f0ed;
    --muted: #9a8c7e;
    --accent: #e79e55;
    --on-accent: #1b1610;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Bistro Olive

BistroPricing · Contact

A short menu that changes with the season

Muted copy in #6c743f.

Get started

Tasting menu

$65

Choose plan

Color	Light	Dark
Background	#f7f6ee	#191b10
Surface	#ffffff	#26291a
Text	#1f2112	#f2f3ed
Muted	#6c743f	#959a7e
Accent	#5c6b1f	#bed369
On accent	#ffffff	#191b10
Contrast
Text	15.08:1 AAA	15.61:1 AAA
Muted	4.60:1 AA	5.97:1 AA
Button	5.87:1 AA	10.54:1 AAA

CSS variables

:root {
  --bg: #f7f6ee;
  --surface: #ffffff;
  --text: #1f2112;
  --muted: #6c743f;
  --accent: #5c6b1f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #191b10;
    --surface: #26291a;
    --text: #f2f3ed;
    --muted: #959a7e;
    --accent: #bed369;
    --on-accent: #191b10;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Berry Bakery

BerryPricing · Contact

Layer cakes ordered two days ahead

Muted copy in #b74e6a.

Get started

Six-inch cake

$42

Choose plan

Color	Light	Dark
Background	#fdf5f7	#1b1014
Surface	#ffffff	#291a1f
Text	#2c1219	#f3edef
Muted	#b74e6a	#9a7e89
Accent	#b0285a	#db618e
On accent	#ffffff	#1b1014
Contrast
Text	16.21:1 AAA	16.07:1 AAA
Muted	4.54:1 AA	5.06:1 AA
Button	6.37:1 AA	5.41:1 AA

CSS variables

:root {
  --bg: #fdf5f7;
  --surface: #ffffff;
  --text: #2c1219;
  --muted: #b74e6a;
  --accent: #b0285a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1014;
    --surface: #291a1f;
    --text: #f3edef;
    --muted: #9a7e89;
    --accent: #db618e;
    --on-accent: #1b1014;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Creative and portfolio color schemes

Portfolios and studios can take more risk. These pair near-black text with one strong accent, the way a printed poster would, and leave the work itself to supply the rest of the color.

Gallery Ink

GalleryPricing · Contact

Brand identities for independent shops

Muted copy in #816d6d.

Get started

Identity kit

$2,400

Choose plan

Color	Light	Dark
Background	#fafafa	#1b1110
Surface	#ffffff	#291b1a
Text	#111111	#f3eded
Muted	#816d6d	#9a817e
Accent	#e0301e	#e76355
On accent	#ffffff	#1b1110
Contrast
Text	18.09:1 AAA	16.00:1 AAA
Muted	4.63:1 AA	5.13:1 AA
Button	4.55:1 AA	5.57:1 AA

CSS variables

:root {
  --bg: #fafafa;
  --surface: #ffffff;
  --text: #111111;
  --muted: #816d6d;
  --accent: #e0301e;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1110;
    --surface: #291b1a;
    --text: #f3eded;
    --muted: #9a817e;
    --accent: #e76355;
    --on-accent: #1b1110;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Poster Cobalt

PosterPricing · Contact

Screen prints in runs of fifty

Muted copy in #7d6a6a.

Get started

A2 print

$70

Choose plan

Color	Light	Dark
Background	#f6f4ef	#10121b
Surface	#ffffff	#1a1c29
Text	#151515	#edeef3
Muted	#7d6a6a	#7e839a
Accent	#2340d8	#6077e6
On accent	#ffffff	#10121b
Contrast
Text	16.61:1 AAA	16.12:1 AAA
Muted	4.61:1 AA	4.98:1 AA
Button	7.51:1 AAA	4.69:1 AA

CSS variables

:root {
  --bg: #f6f4ef;
  --surface: #ffffff;
  --text: #151515;
  --muted: #7d6a6a;
  --accent: #2340d8;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10121b;
    --surface: #1a1c29;
    --text: #edeef3;
    --muted: #7e839a;
    --accent: #6077e6;
    --on-accent: #10121b;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Neon Studio

NeonPricing · Contact

Motion graphics for music launches

Muted copy in #785ec7.

Get started

Lyric video

$900

Choose plan

Color	Light	Dark
Background	#f7f5ff	#1b1019
Surface	#ffffff	#291a25
Text	#160f2b	#f3edf1
Muted	#785ec7	#9a7e94
Accent	#c0129a	#e755c7
On accent	#ffffff	#1b1019
Contrast
Text	17.11:1 AAA	16.03:1 AAA
Muted	4.61:1 AA	5.10:1 AA
Button	5.53:1 AA	5.75:1 AA

CSS variables

:root {
  --bg: #f7f5ff;
  --surface: #ffffff;
  --text: #160f2b;
  --muted: #785ec7;
  --accent: #c0129a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1019;
    --surface: #291a25;
    --text: #f3edf1;
    --muted: #9a7e94;
    --accent: #e755c7;
    --on-accent: #1b1019;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Paper Sketch

PaperPricing · Contact

Illustrated maps for towns and trails

Muted copy in #7b6f5e.

Get started

Custom map

$650

Choose plan

Color	Light	Dark
Background	#f9f6ef	#1b1210
Surface	#fffdf8	#291d1a
Text	#2a2620	#f3eeed
Muted	#7b6f5e	#9a847e
Accent	#b5462a	#da7a62
On accent	#ffffff	#1b1210
Contrast
Text	13.93:1 AAA	16.01:1 AAA
Muted	4.55:1 AA	5.24:1 AA
Button	5.42:1 AA	6.09:1 AA

CSS variables

:root {
  --bg: #f9f6ef;
  --surface: #fffdf8;
  --text: #2a2620;
  --muted: #7b6f5e;
  --accent: #b5462a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1210;
    --surface: #291d1a;
    --text: #f3eeed;
    --muted: #9a847e;
    --accent: #da7a62;
    --on-accent: #1b1210;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Film Teal

FilmPricing · Contact

Short documentaries for nonprofits

Muted copy in #45767d.

Get started

Three-minute film

$3,200

Choose plan

Color	Light	Dark
Background	#f2f6f6	#101b1a
Surface	#ffffff	#1a2928
Text	#142224	#edf3f2
Muted	#45767d	#7e9a98
Accent	#00756e	#55e7de
On accent	#ffffff	#101b1a
Contrast
Text	15.02:1 AAA	15.67:1 AAA
Muted	4.66:1 AA	5.83:1 AA
Button	5.57:1 AA	11.62:1 AAA

CSS variables

:root {
  --bg: #f2f6f6;
  --surface: #ffffff;
  --text: #142224;
  --muted: #45767d;
  --accent: #00756e;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b1a;
    --surface: #1a2928;
    --text: #edf3f2;
    --muted: #7e9a98;
    --accent: #55e7de;
    --on-accent: #101b1a;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Local trades and home services color schemes

Plumbers, roofers, electricians and landscapers need a phone button that stands out on a phone screen in daylight. Each accent here is a high-visibility color with a label that stays readable.

Hardhat Orange

HardhatPricing · Contact

Kitchen and bath remodels, start to finish

Muted copy in #736f62.

Get started

Site visit

Free

Choose plan

Color	Light	Dark
Background	#f8f6f2	#1b1410
Surface	#ffffff	#291f1a
Text	#1b1a17	#f3efed
Muted	#736f62	#9a897e
Accent	#c4520a	#e78e55
On accent	#ffffff	#1b1410
Contrast
Text	16.12:1 AAA	15.93:1 AAA
Muted	4.66:1 AA	5.42:1 AA
Button	4.61:1 AA	7.28:1 AAA

CSS variables

:root {
  --bg: #f8f6f2;
  --surface: #ffffff;
  --text: #1b1a17;
  --muted: #736f62;
  --accent: #c4520a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1410;
    --surface: #291f1a;
    --text: #f3efed;
    --muted: #9a897e;
    --accent: #e78e55;
    --on-accent: #1b1410;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Pipeline Blue

PipelinePricing · Contact

Burst pipe? A plumber at your door tonight

Muted copy in #3c71b1.

Get started

Call-out

$89

Choose plan

Color	Light	Dark
Background	#f3f6fa	#10161b
Surface	#ffffff	#1a2129
Text	#0f1c2c	#edf0f3
Muted	#3c71b1	#7e8c9a
Accent	#0b5cad	#559ee7
On accent	#ffffff	#10161b
Contrast
Text	15.84:1 AAA	15.93:1 AAA
Muted	4.62:1 AA	5.30:1 AA
Button	6.67:1 AA	6.45:1 AA

CSS variables

:root {
  --bg: #f3f6fa;
  --surface: #ffffff;
  --text: #0f1c2c;
  --muted: #3c71b1;
  --accent: #0b5cad;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10161b;
    --surface: #1a2129;
    --text: #edf0f3;
    --muted: #7e8c9a;
    --accent: #559ee7;
    --on-accent: #10161b;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Roofline Charcoal

RooflinePricing · Contact

Roof repairs with photos of every shingle

Muted copy in #7f6c6c.

Get started

Inspection

$120

Choose plan

Color	Light	Dark
Background	#f5f5f5	#1b1110
Surface	#ffffff	#291a1a
Text	#1c1c1c	#f3eded
Muted	#7f6c6c	#9a807e
Accent	#b3261e	#e36059
On accent	#ffffff	#1b1110
Contrast
Text	15.63:1 AAA	16.00:1 AAA
Muted	4.52:1 AA	5.08:1 AA
Button	6.54:1 AA	5.36:1 AA

CSS variables

:root {
  --bg: #f5f5f5;
  --surface: #ffffff;
  --text: #1c1c1c;
  --muted: #7f6c6c;
  --accent: #b3261e;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1110;
    --surface: #291a1a;
    --text: #f3eded;
    --muted: #9a807e;
    --accent: #e36059;
    --on-accent: #1b1110;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Fresh Lawn

FreshPricing · Contact

Weekly mowing and spring cleanups

Muted copy in #4f7c47.

Get started

Weekly visit

$45

Choose plan

Color	Light	Dark
Background	#f4f8f1	#121b10
Surface	#ffffff	#1c291a
Text	#152113	#eef3ed
Muted	#4f7c47	#839a7e
Accent	#2f7a1f	#79d864
On accent	#ffffff	#121b10
Contrast
Text	15.53:1 AAA	15.70:1 AAA
Muted	4.54:1 AA	5.79:1 AA
Button	5.35:1 AA	9.93:1 AAA

CSS variables

:root {
  --bg: #f4f8f1;
  --surface: #ffffff;
  --text: #152113;
  --muted: #4f7c47;
  --accent: #2f7a1f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #121b10;
    --surface: #1c291a;
    --text: #eef3ed;
    --muted: #839a7e;
    --accent: #79d864;
    --on-accent: #121b10;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Spark Electric

SparkPricing · Contact

Panel upgrades and EV charger installs

Muted copy in #737359.

Get started

Charger install

$650

Choose plan

Color	Light	Dark
Background	#fbfaf2	#1b1610
Surface	#ffffff	#29221a
Text	#1a1a14	#f3f0ed
Muted	#737359	#9a8e7e
Accent	#a15c00	#e7a855
On accent	#ffffff	#1b1610
Contrast
Text	16.69:1 AAA	15.83:1 AAA
Muted	4.64:1 AA	5.60:1 AA
Button	5.19:1 AA	8.67:1 AAA

CSS variables

:root {
  --bg: #fbfaf2;
  --surface: #ffffff;
  --text: #1a1a14;
  --muted: #737359;
  --accent: #a15c00;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1610;
    --surface: #29221a;
    --text: #f3f0ed;
    --muted: #9a8e7e;
    --accent: #e7a855;
    --on-accent: #1b1610;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Nature and outdoors color schemes

Outdoor brands, farms, tour operators and eco products. Earthy accents on off-white, with dark modes that feel like dusk rather than a code editor.

Forest Trail

ForestPricing · Contact

Guided hikes for small groups

Muted copy in #4a7958.

Get started

Half day

$55

Choose plan

Color	Light	Dark
Background	#f3f6f2	#111a16
Surface	#ffffff	#1a2822
Text	#16241a	#edf3f0
Muted	#4a7958	#7e9a8e
Accent	#2d6a4f	#77c5a3
On accent	#ffffff	#111a16
Contrast
Text	14.81:1 AAA	15.79:1 AAA
Muted	4.63:1 AA	5.83:1 AA
Button	6.39:1 AA	8.71:1 AAA

CSS variables

:root {
  --bg: #f3f6f2;
  --surface: #ffffff;
  --text: #16241a;
  --muted: #4a7958;
  --accent: #2d6a4f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #111a16;
    --surface: #1a2822;
    --text: #edf3f0;
    --muted: #7e9a8e;
    --accent: #77c5a3;
    --on-accent: #111a16;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Desert Dusk

DesertPricing · Contact

Canyon tours at sunrise and sunset

Muted copy in #976646.

Get started

Sunset tour

$75

Choose plan

Color	Light	Dark
Background	#fbf5ee	#1b1310
Surface	#ffffff	#291d1a
Text	#2b1d14	#f3eeed
Muted	#976646	#9a857e
Accent	#b04a28	#db8061
On accent	#ffffff	#1b1310
Contrast
Text	15.05:1 AAA	15.92:1 AAA
Muted	4.51:1 AA	5.26:1 AA
Button	5.45:1 AA	6.34:1 AA

CSS variables

:root {
  --bg: #fbf5ee;
  --surface: #ffffff;
  --text: #2b1d14;
  --muted: #976646;
  --accent: #b04a28;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1310;
    --surface: #291d1a;
    --text: #f3eeed;
    --muted: #9a857e;
    --accent: #db8061;
    --on-accent: #1b1310;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Glacier Lake

GlacierPricing · Contact

Kayak rentals by the hour

Muted copy in #37749a.

Get started

Two hours

$40

Choose plan

Color	Light	Dark
Background	#f1f6f9	#10181b
Surface	#ffffff	#1a2529
Text	#10222d	#edf1f3
Muted	#37749a	#7e939a
Accent	#14708f	#55c2e7
On accent	#ffffff	#10181b
Contrast
Text	14.97:1 AAA	15.81:1 AAA
Muted	4.67:1 AA	5.59:1 AA
Button	5.61:1 AA	8.78:1 AAA

CSS variables

:root {
  --bg: #f1f6f9;
  --surface: #ffffff;
  --text: #10222d;
  --muted: #37749a;
  --accent: #14708f;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10181b;
    --surface: #1a2529;
    --text: #edf1f3;
    --muted: #7e939a;
    --accent: #55c2e7;
    --on-accent: #10181b;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Moss and Stone

MossPricing · Contact

Native plant gardens that need little water

Muted copy in #68725a.

Get started

Garden plan

$300

Choose plan

Color	Light	Dark
Background	#f4f5f0	#171912
Surface	#ffffff	#23261c
Text	#1f221b	#f1f3ed
Muted	#68725a	#909a7e
Accent	#5a6b3a	#a7bb81
On accent	#ffffff	#171912
Contrast
Text	14.71:1 AAA	15.86:1 AAA
Muted	4.63:1 AA	6.00:1 AA
Button	5.84:1 AA	8.50:1 AAA

CSS variables

:root {
  --bg: #f4f5f0;
  --surface: #ffffff;
  --text: #1f221b;
  --muted: #68725a;
  --accent: #5a6b3a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #171912;
    --surface: #23261c;
    --text: #f1f3ed;
    --muted: #909a7e;
    --accent: #a7bb81;
    --on-accent: #171912;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Coastal Dune

CoastalPricing · Contact

Beach cottages a short walk from the water

Muted copy in #5c727c.

Get started

Per night

$210

Choose plan

Color	Light	Dark
Background	#f9f6ef	#10181b
Surface	#ffffff	#1a2529
Text	#1d2427	#edf1f3
Muted	#5c727c	#7e939a
Accent	#1f6f8b	#61bcdc
On accent	#ffffff	#10181b
Contrast
Text	14.59:1 AAA	15.81:1 AAA
Muted	4.68:1 AA	5.59:1 AA
Button	5.67:1 AA	8.33:1 AAA

CSS variables

:root {
  --bg: #f9f6ef;
  --surface: #ffffff;
  --text: #1d2427;
  --muted: #5c727c;
  --accent: #1f6f8b;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10181b;
    --surface: #1a2529;
    --text: #edf1f3;
    --muted: #7e939a;
    --accent: #61bcdc;
    --on-accent: #10181b;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Luxury and fashion color schemes

Jewelers, boutique hotels and fashion labels usually want restraint: a quiet background, dark text and one rich accent used sparingly.

Noir Gold

NoirPricing · Contact

Hand-set rings made to order

Muted copy in #7a6e62.

Get started

Consultation

Free

Choose plan

Color	Light	Dark
Background	#f8f6f1	#1b1810
Surface	#ffffff	#29241a
Text	#141210	#f3f1ed
Muted	#7a6e62	#9a927e
Accent	#86651a	#e0b85d
On accent	#ffffff	#1b1810
Contrast
Text	17.30:1 AAA	15.71:1 AAA
Muted	4.59:1 AA	5.73:1 AA
Button	5.40:1 AA	9.44:1 AAA

CSS variables

:root {
  --bg: #f8f6f1;
  --surface: #ffffff;
  --text: #141210;
  --muted: #7a6e62;
  --accent: #86651a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1810;
    --surface: #29241a;
    --text: #f3f1ed;
    --muted: #9a927e;
    --accent: #e0b85d;
    --on-accent: #1b1810;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Velvet Plum

VelvetPricing · Contact

Evening wear rented for the weekend

Muted copy in #a5538e.

Get started

Weekend rental

$120

Choose plan

Color	Light	Dark
Background	#f9f5f8	#1b1019
Surface	#ffffff	#291a26
Text	#24121f	#f3edf2
Muted	#a5538e	#9a7e95
Accent	#6d2160	#d26ac0
On accent	#ffffff	#1b1019
Contrast
Text	16.46:1 AAA	16.04:1 AAA
Muted	4.60:1 AA	5.10:1 AA
Button	10.31:1 AAA	5.78:1 AA

CSS variables

:root {
  --bg: #f9f5f8;
  --surface: #ffffff;
  --text: #24121f;
  --muted: #a5538e;
  --accent: #6d2160;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1019;
    --surface: #291a26;
    --text: #f3edf2;
    --muted: #9a7e95;
    --accent: #d26ac0;
    --on-accent: #1b1019;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Ivory Emerald

IvoryPricing · Contact

A twelve-room hotel above the old harbor

Muted copy in #3e7c65.

Get started

Garden room

$340

Choose plan

Color	Light	Dark
Background	#f8f7f2	#101b18
Surface	#ffffff	#1a2924
Text	#10201a	#edf3f1
Muted	#3e7c65	#7e9a91
Accent	#0f5f46	#58e5b9
On accent	#ffffff	#101b18
Contrast
Text	15.74:1 AAA	15.68:1 AAA
Muted	4.58:1 AA	5.80:1 AA
Button	7.65:1 AAA	11.18:1 AAA

CSS variables

:root {
  --bg: #f8f7f2;
  --surface: #ffffff;
  --text: #10201a;
  --muted: #3e7c65;
  --accent: #0f5f46;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #101b18;
    --surface: #1a2924;
    --text: #edf3f1;
    --muted: #7e9a91;
    --accent: #58e5b9;
    --on-accent: #101b18;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Rose Atelier

RosePricing · Contact

Bridal alterations with two fittings included

Muted copy in #a65b57.

Get started

Fitting package

$280

Choose plan

Color	Light	Dark
Background	#fcf6f5	#1b1012
Surface	#ffffff	#281a1c
Text	#2a1716	#f3eded
Muted	#a65b57	#9a7e82
Accent	#9c3d4a	#c9747f
On accent	#ffffff	#1b1012
Contrast
Text	15.93:1 AAA	16.07:1 AAA
Muted	4.62:1 AA	5.03:1 AA
Button	6.60:1 AA	5.57:1 AA

CSS variables

:root {
  --bg: #fcf6f5;
  --surface: #ffffff;
  --text: #2a1716;
  --muted: #a65b57;
  --accent: #9c3d4a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #1b1012;
    --surface: #281a1c;
    --text: #f3eded;
    --muted: #9a7e82;
    --accent: #c9747f;
    --on-accent: #1b1012;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Onyx Sapphire

OnyxPricing · Contact

Watches serviced by a certified maker

Muted copy in #586db6.

Get started

Full service

$450

Choose plan

Color	Light	Dark
Background	#f5f6f8	#10131b
Surface	#ffffff	#1a1d29
Text	#0e1220	#edeef3
Muted	#586db6	#7e859a
Accent	#24409a	#627eda
On accent	#ffffff	#10131b
Contrast
Text	17.25:1 AAA	16.03:1 AAA
Muted	4.54:1 AA	5.05:1 AA
Button	9.23:1 AAA	4.88:1 AA

CSS variables

:root {
  --bg: #f5f6f8;
  --surface: #ffffff;
  --text: #0e1220;
  --muted: #586db6;
  --accent: #24409a;
  --on-accent: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root {
    --bg: #10131b;
    --surface: #1a1d29;
    --text: #edeef3;
    --muted: #7e859a;
    --accent: #627eda;
    --on-accent: #10131b;
  }
}

Tailwind v4

/* paste after the CSS variables */
@theme inline {
  --color-bg: var(--bg);
  --color-surface: var(--surface);
  --color-text: var(--text);
  --color-muted: var(--muted);
  --color-accent: var(--accent);
  --color-on-accent: var(--on-accent);
}

Using the code blocks

Plain CSS variables

The CSS block defines six variables on :root and redefines them inside @media (prefers-color-scheme: dark), so the page follows the visitor's system setting with no JavaScript. Use them anywhere:

If you also want a manual switch, copy the dark values into a second rule such as :root[data-theme="dark"] { ... } and set that attribute from your toggle.

Tailwind CSS v4

In Tailwind v4, theme values live in CSS inside an @theme block, and any variable named --color-* becomes a color utility, so --color-accent gives you bg-accent, text-accent and border-accent. The Tailwind block for each scheme maps those names onto the CSS variables above it with @theme inline, the option Tailwind documents for theme values that reference other variables. Paste the CSS variables first, then the @theme block, after @import "tailwindcss";. Dark mode keeps working because the utilities point at the same variables the media query changes:

Using Tailwind v3? Put the same light hex values under theme.extend.colors in tailwind.config.js instead. If you would rather generate a full 50 to 950 shade scale from one accent, the Tailwind color palette generator does that.

Design tokens

To feed a scheme into a design-token tool, map the six roles to tokens in the Design Tokens Community Group JSON format, with a $type of color and the hex as $value, in a light and a dark group:

Tools that read this format, such as Style Dictionary, can turn it into CSS, iOS or Android values.

Common color scheme mistakes

Tools for building your own

Frequently asked questions

What is a good color scheme for a website?

One with a calm background that covers most of the page, a dark text color that reaches at least 4.5:1 contrast with it, and one accent color reserved for buttons and links. The accent should match the brand, and the button label on it should also pass 4.5:1.

How many colors should a website have?

Most sites work with five or six roles: background, surface for cards, main text, muted text, an accent, and the text color used on the accent. Add red, amber and green only for error, warning and success messages.

What is the 60-30-10 rule in web design?

It is a proportion guide borrowed from interior design: roughly 60 percent dominant color (the page background), 30 percent secondary color (text, cards and panels) and 10 percent accent (buttons, links and highlights). It keeps the accent rare enough to draw attention.

What contrast ratio does WCAG require for text?

WCAG 2.2 level AA requires at least 4.5:1 for normal text and 3:1 for large text, meaning at least 18 point or 14 point bold. Level AAA raises those to 7:1 and 4.5:1. Buttons, input borders and meaningful icons need 3:1 against their surroundings.

Can I use these color schemes on a commercial site?

Yes. We made these palettes for this page and you can use them on any personal or commercial project without credit.

How do I make a dark mode version of a color scheme?

Do not just invert it. Use a very dark background tinted with the brand hue, an off-white text color, and a lighter version of the accent so it stays visible. Then re-check contrast for text and for the button label, which may need to switch from white to dark.

Website Color Schemes: 40 Palettes Shown on Real Page Layouts | How-to Guide

How to use this collection

How to pick a website color scheme

1. Start from the brand color, not from a palette

2. Use the 60-30-10 split as a starting point

3. Check contrast before you fall in love

4. Design the dark version on purpose

5. Test it on a real layout

All 40 schemes at a glance

SaaS and tech color schemes

Midnight Launch

Signal Mint

Graphite Volt

Cloud Iris

Dev Console

Finance and legal color schemes

Ledger Navy

Vault Green

Counsel Oxblood

Steady Slate

Brass Audit

Health and wellness color schemes

Clinic Aqua

Calm Sage

Soft Lavender

Dental Bright

Studio Clay

Food and hospitality color schemes

Tomato Table

Espresso Bar

Citrus Market

Bistro Olive

Berry Bakery

Creative and portfolio color schemes

Gallery Ink

Poster Cobalt

Neon Studio

Paper Sketch

Film Teal

Local trades and home services color schemes

Hardhat Orange

Pipeline Blue

Roofline Charcoal

Fresh Lawn

Spark Electric

Nature and outdoors color schemes

Forest Trail

Desert Dusk

Glacier Lake

Moss and Stone

Coastal Dune

Luxury and fashion color schemes

Noir Gold

Velvet Plum

Ivory Emerald

Rose Atelier

Onyx Sapphire

Using the code blocks

Plain CSS variables

Tailwind CSS v4

Design tokens

Common color scheme mistakes

Tools for building your own

Frequently asked questions

What is a good color scheme for a website?

How many colors should a website have?

What is the 60-30-10 rule in web design?

What contrast ratio does WCAG require for text?

Can I use these color schemes on a commercial site?

How do I make a dark mode version of a color scheme?

More in Guides

Website builders for the businesses in this article

Related guides and tools

Start building

Product

Who It's For

Features

Resources

Company