Kleurenschema's voor websites: 40 paletten op echte layouts

Een goed kleurenschema voor een website gebruikt één rustige achtergrond voor het grootste deel van de pagina, een donkere tekstkleur met minstens 4.5:1 contrast en één merkaccent voor knoppen en links. Hier vindt u 40 originele schema's op live paginalayouts, elk met een dark mode, contrastscores en kopieerbare CSS- en Tailwind-code.

Hieronder staan 40 kleurenschema's die we voor deze pagina hebben gemaakt. Elk schema is toegepast op een kleine landingspagina met een hero, een knop en een prijskaart, zodat u het beoordeelt zoals een bezoeker het zou zien en niet als een rij kleurstaaltjes. Elk schema heeft een lichte en een donkere versie, gemeten contrastverhoudingen en twee formaten om direct te kopiëren: gewone CSS-variabelen en een Tailwind CSS v4 @theme-blok, plus een toelichting om ze om te zetten in design tokens.

Zo gebruikt u deze collectie

Zo kiest u een kleurenschema voor uw website

1. Begin bij de merkkleur, niet bij een palet

Heeft het bedrijf al een logokleur, dan is dat het accent. Bouw al het andere eromheen: een achtergrond, een tekstkleur, een lichter oppervlak voor kaarten, een gedempte tekstkleur voor bijzaken en een tekstkleur die op het accent staat. Eerst een mooi palet kiezen en het logo er dan in proppen, zo eindigen sites met twee concurrerende blauwtinten.

Is er nog geen merkkleur, kies er dan een op basis van wat een bezoeker als eerste moet voelen. Diepblauw en diepgroen komen zorgvuldig en gevestigd over, warm rood en oranje energiek en smakelijk, gedempte aardetinten natuurlijk en rustig. Dit zijn conventies, geen regels; een loodgieter in petrol kan juist opvallen omdat de concurrentie allemaal blauw is.

2. Gebruik de 60-30-10-verdeling als vertrekpunt

De 60-30-10-regel komt uit de interieurarchitectuur: ongeveer 60 procent van een ruimte is de dominante kleur, 30 procent een secundaire kleur en 10 procent een accent. Op een website ziet dat er zo uit:

AandeelRol op een webpaginaVariabele in deze schema's
Ongeveer 60%Pagina-achtergrond en grote lege vlakken--bg
Ongeveer 30%Tekst, kaarten, panelen, de footer, randen--text, --surface, --muted
Ongeveer 10%Knoppen, links, actieve statussen, één highlight per scherm--accent, --on-accent

Het gaat om terughoudendheid met het accent. Als alles de accentkleur heeft, is niets een call-to-action. Zie de getallen als controle, niet als meting: als u met half dichtgeknepen ogen naar uw pagina kijkt en het accent een kwart van het scherm beslaat, doet het te veel.

3. Controleer het contrast voordat u verliefd wordt

De Web Content Accessibility Guidelines (WCAG 2.2) bepalen de contrastdrempels die de meeste toegankelijkheidswetten en audits hanteren:

WatMinimum (AA)Verhoogd (AAA)WCAG-criterium
Lopende tekst4.5:17:11.4.3 en 1.4.6
Grote tekst (minstens 18pt, of 14pt vet)3:14.5:11.4.3 en 1.4.6
Knoppen, invoerranden, iconen die betekenis dragen3:1 ten opzichte van wat ernaast staatGeen AAA-niveau1.4.11

Elk schema op deze pagina haalt 4.5:1 voor lopende tekst, voor gedempte tekst en voor het knoplabel op het accent, in zowel de lichte als de donkere versie. De eis voor het knoplabel is strenger dan WCAG vraagt voor grote vette labels, maar knoptekst is vaak klein, dus we hebben de lat van lopende tekst aangehouden.

De verhoudingen zijn berekend met de WCAG-formule voor relatieve luminantie, niet op het oog geschat. Wijzigt u een hexwaarde, controleer die dan opnieuw met de kleurcontrastchecker. Dit is dezelfde berekening in JavaScript:

// WCAG 2.x contrast ratio between two hex colors
function luminance(hex) {
  const [r, g, b] = [0, 2, 4].map((i) => {
    const c = parseInt(hex.replace("#", "").slice(i, i + 2), 16) / 255;
    return c <= 0.04045 ? c / 12.92 : ((c + 0.055) / 1.055) ** 2.4;
  });
  return 0.2126 * r + 0.7152 * g + 0.0722 * b;
}

function contrast(a, b) {
  const [hi, lo] = [luminance(a), luminance(b)].sort((x, y) => y - x);
  return (hi + 0.05) / (lo + 0.05);
}

contrast("#141a2e", "#f7f8fc"); // 16.26, AAA

4. Ontwerp de donkere versie bewust

Een licht palet omkeren werkt zelden. De donkere versies hier volgen vier gewoonten:

5. Test het op een echte layout

Kleuren die als staaltjes in balans lijken, kunnen op een volle pagina zwaar aanvoelen. Daarom staat elk schema hieronder op een hero en een prijskaart. Zet uw schema voordat u beslist op uw eigen homepage, bekijk het buiten op een telefoon en controleer of de hoofdknop het eerste is wat uw oog vindt.

Alle 40 schema's in één oogopslag

De contrastkolommen tonen licht / donker. Klik op een naam om naar het voorbeeld te springen.

SchemaGroepAccentTekstcontrastKnopcontrast
Midnight LaunchSaaS en tech#3b4fe016.3 / 16.06.2 / 4.6
Signal MintSaaS en tech#0e7c6615.4 / 15.75.1 / 11.5
Graphite VoltSaaS en tech#c43d1616.2 / 15.95.2 / 6.2
Cloud IrisSaaS en tech#6a3fd115.8 / 16.16.5 / 4.7
Dev ConsoleSaaS en tech#13795b16.7 / 15.75.4 / 11.2
Ledger NavyFinanciën en juridisch#1d4f9115.8 / 15.98.1 / 6.0
Vault GreenFinanciën en juridisch#1f6b3e15.0 / 15.76.5 / 9.5
Counsel OxbloodFinanciën en juridisch#8a2a2b16.7 / 16.18.6 / 5.3
Steady SlateFinanciën en juridisch#3e5f7d15.0 / 15.96.7 / 6.6
Brass AuditFinanciën en juridisch#8a641416.1 / 15.75.4 / 9.6
Clinic AquaGezondheid en welzijn#0b728514.2 / 15.85.6 / 9.8
Calm SageGezondheid en welzijn#4f7a3a14.7 / 15.85.0 / 8.6
Soft LavenderGezondheid en welzijn#7445b015.2 / 16.16.5 / 5.1
Dental BrightGezondheid en welzijn#1769c215.1 / 16.05.5 / 6.3
Studio ClayGezondheid en welzijn#a4502a15.5 / 15.95.6 / 6.6
Tomato TableEten en horeca#c0381f16.5 / 16.05.5 / 5.8
Espresso BarEten en horeca#7a4a2a15.6 / 15.87.4 / 7.0
Citrus MarketEten en horeca#b45a0015.8 / 15.84.8 / 8.1
Bistro OliveEten en horeca#5c6b1f15.1 / 15.65.9 / 10.5
Berry BakeryEten en horeca#b0285a16.2 / 16.16.4 / 5.4
Gallery InkCreatief en portfolio#e0301e18.1 / 16.04.5 / 5.6
Poster CobaltCreatief en portfolio#2340d816.6 / 16.17.5 / 4.7
Neon StudioCreatief en portfolio#c0129a17.1 / 16.05.5 / 5.8
Paper SketchCreatief en portfolio#b5462a13.9 / 16.05.4 / 6.1
Film TealCreatief en portfolio#00756e15.0 / 15.75.6 / 11.6
Hardhat OrangeLokale vakmensen en diensten aan huis#c4520a16.1 / 15.94.6 / 7.3
Pipeline BlueLokale vakmensen en diensten aan huis#0b5cad15.8 / 15.96.7 / 6.5
Roofline CharcoalLokale vakmensen en diensten aan huis#b3261e15.6 / 16.06.5 / 5.4
Fresh LawnLokale vakmensen en diensten aan huis#2f7a1f15.5 / 15.75.3 / 9.9
Spark ElectricLokale vakmensen en diensten aan huis#a15c0016.7 / 15.85.2 / 8.7
Forest TrailNatuur en buitenleven#2d6a4f14.8 / 15.86.4 / 8.7
Desert DuskNatuur en buitenleven#b04a2815.1 / 15.95.5 / 6.3
Glacier LakeNatuur en buitenleven#14708f15.0 / 15.85.6 / 8.8
Moss and StoneNatuur en buitenleven#5a6b3a14.7 / 15.95.8 / 8.5
Coastal DuneNatuur en buitenleven#1f6f8b14.6 / 15.85.7 / 8.3
Noir GoldLuxe en mode#86651a17.3 / 15.75.4 / 9.4
Velvet PlumLuxe en mode#6d216016.5 / 16.010.3 / 5.8
Ivory EmeraldLuxe en mode#0f5f4615.7 / 15.77.7 / 11.2
Rose AtelierLuxe en mode#9c3d4a15.9 / 16.16.6 / 5.6
Onyx SapphireLuxe en mode#24409a17.2 / 16.09.2 / 4.9
Alle 40 zichtbaar

Kleurenschema's voor SaaS en tech

Productsites hebben een duidelijk accent nodig voor de hoofdactie en rustige neutrale tinten voor drukke schermen. Deze vijf houden de achtergrond dicht bij wit en besteden kleur aan knoppen en links.

Midnight Launch

MidnightPrijzen · Contact

Releasenotes die uw team echt leest

Gedempte tekst in #586eb6.

Aan de slag

Starter

$19

Kies abonnement
KleurLichtDonker
Achtergrond#f7f8fc#10121b
Oppervlak#ffffff#1a1b29
Tekst#141a2e#ededf3
Gedempt#586eb6#81859c
Accent#3b4fe0#5869e5
Op accent#ffffff#ffffff
Contrast
Tekst16.26:1 AAA16.02:1 AAA
Gedempt4.58:1 AA5.13:1 AA
Knop6.21:1 AA4.60:1 AA

CSS-variabelen 

: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

SignalPrijzen · Contact

Uptime-meldingen die de juiste persoon wekken

Gedempte tekst in #357e70.

Aan de slag

Team

$29

Kies abonnement
KleurLichtDonker
Achtergrond#f4faf8#101b19
Oppervlak#ffffff#1a2926
Tekst#0f2420#edf3f2
Gedempt#357e70#7e9a95
Accent#0e7c66#55e7ca
Op accent#ffffff#101b19
Contrast
Tekst15.37:1 AAA15.68:1 AAA
Gedempt4.55:1 AA5.82:1 AA
Knop5.13:1 AA11.46:1 AAA

CSS-variabelen 

: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

GraphitePrijzen · Contact

Facturen verstuurd voordat de koffie afkoelt

Gedempte tekst in #6e6e81.

Aan de slag

Solo

$12

Kies abonnement
KleurLichtDonker
Achtergrond#f5f5f2#1b1310
Oppervlak#ffffff#291d1a
Tekst#18181a#f3eeed
Gedempt#6e6e81#9a857e
Accent#c43d16#e77655
Op accent#ffffff#1b1310
Contrast
Tekst16.23:1 AAA15.92:1 AAA
Gedempt4.57:1 AA5.26:1 AA
Knop5.22:1 AA6.21:1 AA

CSS-variabelen 

: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

CloudPrijzen · Contact

Eén inbox voor elke klantvraag

Gedempte tekst in #7367b2.

Aan de slag

Groei

$49

Kies abonnement
KleurLichtDonker
Achtergrond#f8f7fd#13101b
Oppervlak#ffffff#1e1a29
Tekst#1e1a33#eeedf3
Gedempt#7367b2#89819c
Accent#6a3fd1#8c6bdc
Op accent#ffffff#13101b
Contrast
Tekst15.76:1 AAA16.14:1 AAA
Gedempt4.57:1 AA5.09:1 AA
Knop6.47:1 AA4.70:1 AA

CSS-variabelen 

: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

DevPrijzen · Contact

Deploy-previews voor elke pull request

Gedempte tekst in #537768.

Aan de slag

Pro

$24

Kies abonnement
KleurLichtDonker
Achtergrond#f3f6f4#101b18
Oppervlak#ffffff#1a2924
Tekst#101714#edf3f1
Gedempt#537768#7e9a92
Accent#13795b#58e5bb
Op accent#ffffff#101b18
Contrast
Tekst16.71:1 AAA15.68:1 AAA
Gedempt4.59:1 AA5.81:1 AA
Knop5.37:1 AA11.19:1 AAA

CSS-variabelen 

: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);
}

Kleurenschema's voor financiën en juridisch

Banken, accountants en advocatenkantoren worden beoordeeld op vertrouwen, dus deze schema's gebruiken diepe, weinig verzadigde accenten en heel weinig versiering. Het accent moet nog steeds als knop werken, en daarom haalt elk accent 4.5:1 met zijn label.

Ledger Navy

LedgerPrijzen · Contact

Boekhouding voor kantoren van vijf tot vijftig mensen

Gedempte tekst in #3a70c5.

Aan de slag

Maandafsluiting

$240

Kies abonnement
KleurLichtDonker
Achtergrond#f6f7f9#10151b
Oppervlak#ffffff#1a2029
Tekst#0f1d33#edeff3
Gedempt#3a70c5#7e8a9a
Accent#1d4f91#5e95df
Op accent#ffffff#10151b
Contrast
Tekst15.75:1 AAA15.93:1 AAA
Gedempt4.55:1 AA5.23:1 AA
Knop8.14:1 AAA5.97:1 AA

CSS-variabelen 

: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

VaultPrijzen · Contact

Spaardoelen die vanzelf groeien

Gedempte tekst in #417b59.

Aan de slag

Plus

$6

Kies abonnement
KleurLichtDonker
Achtergrond#f5f7f3#101b15
Oppervlak#ffffff#1a2920
Tekst#13241a#edf3ef
Gedempt#417b59#7e9a8a
Accent#1f6b3e#69d394
Op accent#ffffff#101b15
Contrast
Tekst15.04:1 AAA15.69:1 AAA
Gedempt4.64:1 AA5.78:1 AA
Knop6.50:1 AA9.54:1 AAA

CSS-variabelen 

: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

CounselPrijzen · Contact

Arbeidsrechtelijk advies in gewone taal

Gedempte tekst in #a65c45.

Aan de slag

Eerste consult

$150

Kies abonnement
KleurLichtDonker
Achtergrond#faf7f5#1b1010
Oppervlak#ffffff#291a1a
Tekst#24140f#f3eded
Gedempt#a65c45#9a7e7f
Accent#8a2a2b#d26a6b
Op accent#ffffff#1b1010
Contrast
Tekst16.66:1 AAA16.09:1 AAA
Gedempt4.65:1 AA5.02:1 AA
Knop8.58:1 AAA5.33:1 AA

CSS-variabelen 

: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

SteadyPrijzen · Contact

Salarisadministratie die elke maand op dezelfde dag draait

Gedempte tekst in #59718d.

Aan de slag

Core

$39

Kies abonnement
KleurLichtDonker
Achtergrond#f4f6f8#12161a
Oppervlak#ffffff#1c2127
Tekst#1a2129#edf0f3
Gedempt#59718d#7e8d9a
Accent#3e5f7d#7da0bf
Op accent#ffffff#12161a
Contrast
Tekst14.99:1 AAA15.89:1 AAA
Gedempt4.65:1 AA5.33:1 AA
Knop6.69:1 AA6.62:1 AA

CSS-variabelen 

: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

BrassPrijzen · Contact

Belastingaangiftes voorbereid en ingediend vóór april

Gedempte tekst in #847048.

Aan de slag

Persoonlijk

$180

Kies abonnement
KleurLichtDonker
Achtergrond#fbf9f4#1b1810
Oppervlak#ffffff#29241a
Tekst#211c12#f3f1ed
Gedempt#847048#9a917e
Accent#8a6414#e6b856
Op accent#ffffff#1b1810
Contrast
Tekst16.10:1 AAA15.71:1 AAA
Gedempt4.54:1 AA5.68:1 AA
Knop5.37:1 AA9.58:1 AAA

CSS-variabelen 

: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);
}

Kleurenschema's voor gezondheid en welzijn

Klinieken, therapeuten en studio's willen schoon en geruststellend overkomen. Koele blauw- en groentinten overheersen, met één warme kleioptie voor spa's en fysiotherapiepraktijken die minder klinisch willen ogen.

Clinic Aqua

ClinicPrijzen · Contact

Afspraken bij de huisarts in dezelfde week

Gedempte tekst in #267c8b.

Aan de slag

Zonder afspraak

$0

Kies abonnement
KleurLichtDonker
Achtergrond#f3f9fa#10191b
Oppervlak#ffffff#1a2629
Tekst#0d2a2f#edf2f3
Gedempt#267c8b#7e969a
Accent#0b7285#55d0e7
Op accent#ffffff#10191b
Contrast
Tekst14.21:1 AAA15.80:1 AAA
Gedempt4.55:1 AA5.71:1 AA
Knop5.59:1 AA9.82:1 AAA

CSS-variabelen 

: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

CalmPrijzen · Contact

Begeleide ademhalingslessen, 's ochtends en 's avonds

Gedempte tekst in #5a7a4d.

Aan de slag

Losse les

$15

Kies abonnement
KleurLichtDonker
Achtergrond#f6f8f3#141a11
Oppervlak#ffffff#1f271b
Tekst#1c2618#eff3ed
Gedempt#5a7a4d#889a7e
Accent#4f7a3a#92c17c
Op accent#ffffff#141a11
Contrast
Tekst14.66:1 AAA15.78:1 AAA
Gedempt4.54:1 AA5.88:1 AA
Knop5.03:1 AA8.55:1 AAA

CSS-variabelen 

: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

SoftPrijzen · Contact

Gesprekken met een counselor vanuit een rustige kamer thuis

Gedempte tekst in #7d65a8.

Aan de slag

Losse sessie

$90

Kies abonnement
KleurLichtDonker
Achtergrond#f9f7fc#15101b
Oppervlak#ffffff#201a28
Tekst#251d33#efedf3
Gedempt#7d65a8#8d819c
Accent#7445b0#9974c8
Op accent#ffffff#15101b
Contrast
Tekst15.16:1 AAA16.11:1 AAA
Gedempt4.59:1 AA5.13:1 AA
Knop6.52:1 AA5.07:1 AA

CSS-variabelen 

: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

DentalPrijzen · Contact

Gebitsreinigingen, controles en avondspreekuur

Gedempte tekst in #3373bd.

Aan de slag

Intake nieuwe patiënt

$79

Kies abonnement
KleurLichtDonker
Achtergrond#f4f8fd#10151b
Oppervlak#ffffff#1a2129
Tekst#0f2238#edf0f3
Gedempt#3373bd#7e8c9a
Accent#1769c2#559be7
Op accent#ffffff#10151b
Contrast
Tekst15.08:1 AAA16.03:1 AAA
Gedempt4.55:1 AA5.33:1 AA
Knop5.47:1 AA6.31:1 AA

CSS-variabelen 

: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

StudioPrijzen · Contact

Massage en fysiotherapie onder één dak

Gedempte tekst in #9e6042.

Aan de slag

60 minuten

$95

Kies abonnement
KleurLichtDonker
Achtergrond#fbf6f2#1b1410
Oppervlak#ffffff#291e1a
Tekst#2b1a12#f3efed
Gedempt#9e6042#9a877e
Accent#a4502a#d78865
Op accent#ffffff#1b1410
Contrast
Tekst15.54:1 AAA15.93:1 AAA
Gedempt4.65:1 AA5.32:1 AA
Knop5.59:1 AA6.58:1 AA

CSS-variabelen 

: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);
}

Kleurenschema's voor eten en horeca

Restaurants en voedingswinkels kunnen warmere, luidere accenten aan, omdat eetlust op warmte reageert. De achtergronden zijn licht crème, zodat foto's van eten niet koud ogen tegen puur wit.

Tomato Table

TomatoPrijzen · Contact

Pizza uit de houtoven en een lange tafel voor vrienden

Gedempte tekst in #b35944.

Aan de slag

Familiefeestmaal

$58

Kies abonnement
KleurLichtDonker
Achtergrond#fff8f3#1b1210
Oppervlak#ffffff#291c1a
Tekst#2a1510#f3eeed
Gedempt#b35944#9a837e
Accent#c0381f#e46e58
Op accent#ffffff#1b1210
Contrast
Tekst16.46:1 AAA16.01:1 AAA
Gedempt4.51:1 AA5.19:1 AA
Knop5.49:1 AA5.85:1 AA

CSS-variabelen 

: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

EspressoPrijzen · Contact

Single-origin bonen, elke dinsdag gebrand

Gedempte tekst in #916548.

Aan de slag

Zak van 340 g

$18

Kies abonnement
KleurLichtDonker
Achtergrond#f8f3ee#1b1510
Oppervlak#fffdfa#29201a
Tekst#241912#f3efed
Gedempt#916548#9a897e
Accent#7a4a2a#cd956f
Op accent#ffffff#1b1510
Contrast
Tekst15.58:1 AAA15.83:1 AAA
Gedempt4.58:1 AA5.38:1 AA
Knop7.39:1 AAA7.00:1 AAA

CSS-variabelen 

: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

CitrusPrijzen · Contact

Fruitboxen bezorgd op vrijdagochtend

Gedempte tekst in #82732f.

Aan de slag

Kleine box

$32

Kies abonnement
KleurLichtDonker
Achtergrond#fffbef#1b1610
Oppervlak#ffffff#29211a
Tekst#24200d#f3f0ed
Gedempt#82732f#9a8c7e
Accent#b45a00#e79e55
Op accent#ffffff#1b1610
Contrast
Tekst15.77:1 AAA15.83:1 AAA
Gedempt4.57:1 AA5.50:1 AA
Knop4.77:1 AA8.06:1 AAA

CSS-variabelen 

: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

BistroPrijzen · Contact

Een korte kaart die met de seizoenen meegaat

Gedempte tekst in #6c743f.

Aan de slag

Proefmenu

$65

Kies abonnement
KleurLichtDonker
Achtergrond#f7f6ee#191b10
Oppervlak#ffffff#26291a
Tekst#1f2112#f2f3ed
Gedempt#6c743f#959a7e
Accent#5c6b1f#bed369
Op accent#ffffff#191b10
Contrast
Tekst15.08:1 AAA15.61:1 AAA
Gedempt4.60:1 AA5.97:1 AA
Knop5.87:1 AA10.54:1 AAA

CSS-variabelen 

: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

BerryPrijzen · Contact

Taarten in laagjes, twee dagen vooruit besteld

Gedempte tekst in #b74e6a.

Aan de slag

Taart van zes inch

$42

Kies abonnement
KleurLichtDonker
Achtergrond#fdf5f7#1b1014
Oppervlak#ffffff#291a1f
Tekst#2c1219#f3edef
Gedempt#b74e6a#9a7e89
Accent#b0285a#db618e
Op accent#ffffff#1b1014
Contrast
Tekst16.21:1 AAA16.07:1 AAA
Gedempt4.54:1 AA5.06:1 AA
Knop6.37:1 AA5.41:1 AA

CSS-variabelen 

: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);
}

Kleurenschema's voor creatief werk en portfolio's

Portfolio's en studio's kunnen meer risico nemen. Deze combineren bijna zwarte tekst met één sterk accent, zoals een gedrukte poster, en laten het werk zelf de rest van de kleur leveren.

Poster Cobalt

PosterPrijzen · Contact

Zeefdrukken in oplagen van vijftig

Gedempte tekst in #7d6a6a.

Aan de slag

A2-print

$70

Kies abonnement
KleurLichtDonker
Achtergrond#f6f4ef#10121b
Oppervlak#ffffff#1a1c29
Tekst#151515#edeef3
Gedempt#7d6a6a#7e839a
Accent#2340d8#6077e6
Op accent#ffffff#10121b
Contrast
Tekst16.61:1 AAA16.12:1 AAA
Gedempt4.61:1 AA4.98:1 AA
Knop7.51:1 AAA4.69:1 AA

CSS-variabelen 

: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

NeonPrijzen · Contact

Motion graphics voor muzieklanceringen

Gedempte tekst in #785ec7.

Aan de slag

Lyricvideo

$900

Kies abonnement
KleurLichtDonker
Achtergrond#f7f5ff#1b1019
Oppervlak#ffffff#291a25
Tekst#160f2b#f3edf1
Gedempt#785ec7#9a7e94
Accent#c0129a#e755c7
Op accent#ffffff#1b1019
Contrast
Tekst17.11:1 AAA16.03:1 AAA
Gedempt4.61:1 AA5.10:1 AA
Knop5.53:1 AA5.75:1 AA

CSS-variabelen 

: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

PaperPrijzen · Contact

Geïllustreerde kaarten van dorpen en wandelroutes

Gedempte tekst in #7b6f5e.

Aan de slag

Kaart op maat

$650

Kies abonnement
KleurLichtDonker
Achtergrond#f9f6ef#1b1210
Oppervlak#fffdf8#291d1a
Tekst#2a2620#f3eeed
Gedempt#7b6f5e#9a847e
Accent#b5462a#da7a62
Op accent#ffffff#1b1210
Contrast
Tekst13.93:1 AAA16.01:1 AAA
Gedempt4.55:1 AA5.24:1 AA
Knop5.42:1 AA6.09:1 AA

CSS-variabelen 

: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

FilmPrijzen · Contact

Korte documentaires voor goede doelen

Gedempte tekst in #45767d.

Aan de slag

Film van drie minuten

$3,200

Kies abonnement
KleurLichtDonker
Achtergrond#f2f6f6#101b1a
Oppervlak#ffffff#1a2928
Tekst#142224#edf3f2
Gedempt#45767d#7e9a98
Accent#00756e#55e7de
Op accent#ffffff#101b1a
Contrast
Tekst15.02:1 AAA15.67:1 AAA
Gedempt4.66:1 AA5.83:1 AA
Knop5.57:1 AA11.62:1 AAA

CSS-variabelen 

: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);
}

Kleurenschema's voor lokale vakmensen en diensten aan huis

Loodgieters, dakdekkers, elektriciens en hoveniers hebben een belknop nodig die bij daglicht opvalt op een telefoonscherm. Elk accent hier is een goed zichtbare kleur met een label dat leesbaar blijft.

Hardhat Orange

HardhatPrijzen · Contact

Keuken- en badkamerverbouwingen, van begin tot eind

Gedempte tekst in #736f62.

Aan de slag

Bezoek ter plaatse

Gratis

Kies abonnement
KleurLichtDonker
Achtergrond#f8f6f2#1b1410
Oppervlak#ffffff#291f1a
Tekst#1b1a17#f3efed
Gedempt#736f62#9a897e
Accent#c4520a#e78e55
Op accent#ffffff#1b1410
Contrast
Tekst16.12:1 AAA15.93:1 AAA
Gedempt4.66:1 AA5.42:1 AA
Knop4.61:1 AA7.28:1 AAA

CSS-variabelen 

: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

PipelinePrijzen · Contact

Gesprongen leiding? Vanavond nog een loodgieter aan de deur

Gedempte tekst in #3c71b1.

Aan de slag

Voorrijden

$89

Kies abonnement
KleurLichtDonker
Achtergrond#f3f6fa#10161b
Oppervlak#ffffff#1a2129
Tekst#0f1c2c#edf0f3
Gedempt#3c71b1#7e8c9a
Accent#0b5cad#559ee7
Op accent#ffffff#10161b
Contrast
Tekst15.84:1 AAA15.93:1 AAA
Gedempt4.62:1 AA5.30:1 AA
Knop6.67:1 AA6.45:1 AA

CSS-variabelen 

: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

RooflinePrijzen · Contact

Dakreparaties met foto's van elke dakpan

Gedempte tekst in #7f6c6c.

Aan de slag

Inspectie

$120

Kies abonnement
KleurLichtDonker
Achtergrond#f5f5f5#1b1110
Oppervlak#ffffff#291a1a
Tekst#1c1c1c#f3eded
Gedempt#7f6c6c#9a807e
Accent#b3261e#e36059
Op accent#ffffff#1b1110
Contrast
Tekst15.63:1 AAA16.00:1 AAA
Gedempt4.52:1 AA5.08:1 AA
Knop6.54:1 AA5.36:1 AA

CSS-variabelen 

: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

FreshPrijzen · Contact

Wekelijks maaien en voorjaarsopruiming

Gedempte tekst in #4f7c47.

Aan de slag

Wekelijks bezoek

$45

Kies abonnement
KleurLichtDonker
Achtergrond#f4f8f1#121b10
Oppervlak#ffffff#1c291a
Tekst#152113#eef3ed
Gedempt#4f7c47#839a7e
Accent#2f7a1f#79d864
Op accent#ffffff#121b10
Contrast
Tekst15.53:1 AAA15.70:1 AAA
Gedempt4.54:1 AA5.79:1 AA
Knop5.35:1 AA9.93:1 AAA

CSS-variabelen 

: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

SparkPrijzen · Contact

Meterkastupgrades en installatie van laadpalen

Gedempte tekst in #737359.

Aan de slag

Laadpaal installeren

$650

Kies abonnement
KleurLichtDonker
Achtergrond#fbfaf2#1b1610
Oppervlak#ffffff#29221a
Tekst#1a1a14#f3f0ed
Gedempt#737359#9a8e7e
Accent#a15c00#e7a855
Op accent#ffffff#1b1610
Contrast
Tekst16.69:1 AAA15.83:1 AAA
Gedempt4.64:1 AA5.60:1 AA
Knop5.19:1 AA8.67:1 AAA

CSS-variabelen 

: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);
}

Kleurenschema's voor natuur en buitenleven

Outdoormerken, boerderijen, touroperators en ecoproducten. Aardse accenten op gebroken wit, met dark modes die aanvoelen als schemering in plaats van een code-editor.

Forest Trail

ForestPrijzen · Contact

Begeleide wandeltochten voor kleine groepen

Gedempte tekst in #4a7958.

Aan de slag

Halve dag

$55

Kies abonnement
KleurLichtDonker
Achtergrond#f3f6f2#111a16
Oppervlak#ffffff#1a2822
Tekst#16241a#edf3f0
Gedempt#4a7958#7e9a8e
Accent#2d6a4f#77c5a3
Op accent#ffffff#111a16
Contrast
Tekst14.81:1 AAA15.79:1 AAA
Gedempt4.63:1 AA5.83:1 AA
Knop6.39:1 AA8.71:1 AAA

CSS-variabelen 

: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

DesertPrijzen · Contact

Canyontochten bij zonsopgang en zonsondergang

Gedempte tekst in #976646.

Aan de slag

Zonsondergangtocht

$75

Kies abonnement
KleurLichtDonker
Achtergrond#fbf5ee#1b1310
Oppervlak#ffffff#291d1a
Tekst#2b1d14#f3eeed
Gedempt#976646#9a857e
Accent#b04a28#db8061
Op accent#ffffff#1b1310
Contrast
Tekst15.05:1 AAA15.92:1 AAA
Gedempt4.51:1 AA5.26:1 AA
Knop5.45:1 AA6.34:1 AA

CSS-variabelen 

: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

GlacierPrijzen · Contact

Kajakverhuur per uur

Gedempte tekst in #37749a.

Aan de slag

Twee uur

$40

Kies abonnement
KleurLichtDonker
Achtergrond#f1f6f9#10181b
Oppervlak#ffffff#1a2529
Tekst#10222d#edf1f3
Gedempt#37749a#7e939a
Accent#14708f#55c2e7
Op accent#ffffff#10181b
Contrast
Tekst14.97:1 AAA15.81:1 AAA
Gedempt4.67:1 AA5.59:1 AA
Knop5.61:1 AA8.78:1 AAA

CSS-variabelen 

: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

MossPrijzen · Contact

Tuinen met inheemse planten die weinig water nodig hebben

Gedempte tekst in #68725a.

Aan de slag

Tuinplan

$300

Kies abonnement
KleurLichtDonker
Achtergrond#f4f5f0#171912
Oppervlak#ffffff#23261c
Tekst#1f221b#f1f3ed
Gedempt#68725a#909a7e
Accent#5a6b3a#a7bb81
Op accent#ffffff#171912
Contrast
Tekst14.71:1 AAA15.86:1 AAA
Gedempt4.63:1 AA6.00:1 AA
Knop5.84:1 AA8.50:1 AAA

CSS-variabelen 

: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

CoastalPrijzen · Contact

Strandhuisjes op een paar minuten lopen van het water

Gedempte tekst in #5c727c.

Aan de slag

Per nacht

$210

Kies abonnement
KleurLichtDonker
Achtergrond#f9f6ef#10181b
Oppervlak#ffffff#1a2529
Tekst#1d2427#edf1f3
Gedempt#5c727c#7e939a
Accent#1f6f8b#61bcdc
Op accent#ffffff#10181b
Contrast
Tekst14.59:1 AAA15.81:1 AAA
Gedempt4.68:1 AA5.59:1 AA
Knop5.67:1 AA8.33:1 AAA

CSS-variabelen 

: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);
}

Kleurenschema's voor luxe en mode

Juweliers, boetiekhotels en modelabels willen meestal terughoudendheid: een rustige achtergrond, donkere tekst en één rijk accent dat spaarzaam wordt gebruikt.

Noir Gold

NoirPrijzen · Contact

Met de hand gezette ringen op bestelling

Gedempte tekst in #7a6e62.

Aan de slag

Consult

Gratis

Kies abonnement
KleurLichtDonker
Achtergrond#f8f6f1#1b1810
Oppervlak#ffffff#29241a
Tekst#141210#f3f1ed
Gedempt#7a6e62#9a927e
Accent#86651a#e0b85d
Op accent#ffffff#1b1810
Contrast
Tekst17.30:1 AAA15.71:1 AAA
Gedempt4.59:1 AA5.73:1 AA
Knop5.40:1 AA9.44:1 AAA

CSS-variabelen 

: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

VelvetPrijzen · Contact

Avondkleding gehuurd voor het weekend

Gedempte tekst in #a5538e.

Aan de slag

Weekendhuur

$120

Kies abonnement
KleurLichtDonker
Achtergrond#f9f5f8#1b1019
Oppervlak#ffffff#291a26
Tekst#24121f#f3edf2
Gedempt#a5538e#9a7e95
Accent#6d2160#d26ac0
Op accent#ffffff#1b1019
Contrast
Tekst16.46:1 AAA16.04:1 AAA
Gedempt4.60:1 AA5.10:1 AA
Knop10.31:1 AAA5.78:1 AA

CSS-variabelen 

: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

IvoryPrijzen · Contact

Een hotel met twaalf kamers boven de oude haven

Gedempte tekst in #3e7c65.

Aan de slag

Tuinkamer

$340

Kies abonnement
KleurLichtDonker
Achtergrond#f8f7f2#101b18
Oppervlak#ffffff#1a2924
Tekst#10201a#edf3f1
Gedempt#3e7c65#7e9a91
Accent#0f5f46#58e5b9
Op accent#ffffff#101b18
Contrast
Tekst15.74:1 AAA15.68:1 AAA
Gedempt4.58:1 AA5.80:1 AA
Knop7.65:1 AAA11.18:1 AAA

CSS-variabelen 

: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

RosePrijzen · Contact

Bruidsjurkaanpassingen met twee pasbeurten inbegrepen

Gedempte tekst in #a65b57.

Aan de slag

Paspakket

$280

Kies abonnement
KleurLichtDonker
Achtergrond#fcf6f5#1b1012
Oppervlak#ffffff#281a1c
Tekst#2a1716#f3eded
Gedempt#a65b57#9a7e82
Accent#9c3d4a#c9747f
Op accent#ffffff#1b1012
Contrast
Tekst15.93:1 AAA16.07:1 AAA
Gedempt4.62:1 AA5.03:1 AA
Knop6.60:1 AA5.57:1 AA

CSS-variabelen 

: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

OnyxPrijzen · Contact

Horloges onderhouden door een gecertificeerde horlogemaker

Gedempte tekst in #586db6.

Aan de slag

Volledige beurt

$450

Kies abonnement
KleurLichtDonker
Achtergrond#f5f6f8#10131b
Oppervlak#ffffff#1a1d29
Tekst#0e1220#edeef3
Gedempt#586db6#7e859a
Accent#24409a#627eda
Op accent#ffffff#10131b
Contrast
Tekst17.25:1 AAA16.03:1 AAA
Gedempt4.54:1 AA5.05:1 AA
Knop9.23:1 AAA4.88:1 AA

CSS-variabelen 

: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);
}

De codeblokken gebruiken

Gewone CSS-variabelen

Het CSS-blok definieert zes variabelen op :root en definieert ze opnieuw binnen @media (prefers-color-scheme: dark), zodat de pagina de systeeminstelling van de bezoeker volgt zonder JavaScript. Gebruik ze overal:

body { background: var(--bg); color: var(--text); }
.card { background: var(--surface); }
.small { color: var(--muted); }
.button { background: var(--accent); color: var(--on-accent); }

Wilt u ook een handmatige schakelaar, kopieer de donkere waarden dan naar een tweede regel zoals :root[data-theme="dark"] { ... } en zet dat attribuut vanuit uw schakelaar.

Tailwind CSS v4

In Tailwind v4 staan themawaarden in CSS binnen een @theme-blok, en elke variabele met de naam --color-* wordt een kleur-utility, dus --color-accent geeft u bg-accent, text-accent en border-accent. Het Tailwind-blok van elk schema koppelt die namen aan de CSS-variabelen erboven met @theme inline, de optie die Tailwind documenteert voor themawaarden die naar andere variabelen verwijzen. Plak eerst de CSS-variabelen en daarna het @theme-blok, na @import "tailwindcss";. Dark mode blijft werken, omdat de utilities naar dezelfde variabelen wijzen die de media query verandert:

<section class="bg-bg text-text">
  <div class="bg-surface rounded-xl p-6">
    <p class="text-muted">Starter plan</p>
    <a class="bg-accent text-on-accent rounded-lg px-4 py-2">Get started</a>
  </div>
</section>

Gebruikt u Tailwind v3? Zet dan dezelfde lichte hexwaarden onder theme.extend.colors in tailwind.config.js. Wilt u liever een volledige tintenschaal van 50 tot 950 uit één accent genereren, dan doet de Tailwind-kleurenpaletgenerator dat.

Design tokens

Om een schema in een design-tokentool in te voeren, koppelt u de zes rollen aan tokens in het JSON-formaat van de Design Tokens Community Group, met een $type van color en de hexwaarde als $value, in een light- en een dark-groep:

{
  "color": {
    "light": { "accent": { "$type": "color", "$value": "#3b4fe0" } },
    "dark":  { "accent": { "$type": "color", "$value": "#5869e5" } }
  }
}

Tools die dit formaat lezen, zoals Style Dictionary, kunnen het omzetten in CSS-, iOS- of Android-waarden.

Veelgemaakte fouten met kleurenschema's

Tools om uw eigen schema te bouwen

Zoekt u layouts om uw schema op te proberen, bekijk dan de hero-secties en prijscomponenten, en combineer de kleuren met letters uit de beste lettertypen voor websites.

Veelgestelde vragen

Wat is een goed kleurenschema voor een website?

Een schema met een rustige achtergrond die het grootste deel van de pagina beslaat, een donkere tekstkleur die daarmee minstens 4.5:1 contrast haalt, en één accentkleur die u bewaart voor knoppen en links. Het accent moet bij het merk passen, en het knoplabel erop moet ook 4.5:1 halen.

Hoeveel kleuren moet een website hebben?

De meeste sites werken met vijf of zes rollen: achtergrond, oppervlak voor kaarten, hoofdtekst, gedempte tekst, een accent en de tekstkleur op het accent. Voeg rood, oranjegeel en groen alleen toe voor fout-, waarschuwings- en succesmeldingen.

Wat is de 60-30-10-regel in webdesign?

Het is een verhoudingsrichtlijn uit de interieurarchitectuur: ongeveer 60 procent dominante kleur (de pagina-achtergrond), 30 procent secundaire kleur (tekst, kaarten en panelen) en 10 procent accent (knoppen, links en highlights). Zo blijft het accent zeldzaam genoeg om de aandacht te trekken.

Welke contrastverhouding vereist WCAG voor tekst?

WCAG 2.2 niveau AA vereist minstens 4.5:1 voor normale tekst en 3:1 voor grote tekst, dat wil zeggen minstens 18 punt of 14 punt vet. Niveau AAA verhoogt dat naar 7:1 en 4.5:1. Knoppen, invoerranden en betekenisvolle iconen hebben 3:1 nodig ten opzichte van hun omgeving.

Mag ik deze kleurenschema's op een commerciële site gebruiken?

Ja. We hebben deze paletten voor deze pagina gemaakt en u mag ze zonder bronvermelding gebruiken in elk persoonlijk of commercieel project.

Hoe maak ik een dark mode-versie van een kleurenschema?

Keer het niet gewoon om. Gebruik een heel donkere achtergrond getint met de merkkleur, een gebroken witte tekstkleur en een lichtere versie van het accent, zodat het zichtbaar blijft. Controleer daarna opnieuw het contrast van de tekst en van het knoplabel, dat mogelijk van wit naar donker moet.

Voorbeelden

Lichte of donkere voorbeelden

Licht

Donker

Filter op sfeer

Alle

SaaS

Financiën

Gezondheid

Eten

Creatief

Vakmensen

Natuur

Luxe

Gratis beginnen · Geen creditcard nodig

Gerelateerd: Gidsen

Product

Voor wie

Functies

Bronnen

Bedrijf

Sitemap