Colori per siti web: 40 combinazioni su pagine reali

Una buona combinazione di colori per un sito web usa uno sfondo tranquillo per gran parte della pagina, un testo scuro con un contrasto di almeno 4.5:1 e un solo accento del brand riservato a pulsanti e link. Ecco 40 combinazioni originali su layout reali, ognuna con modalità scura, punteggi di contrasto e codice CSS e Tailwind da copiare.

Qui sotto trovi 40 combinazioni di colori create per questa pagina, ognuna applicata a una piccola landing page con un hero, un pulsante e una scheda prezzi, così puoi giudicarla come la vedrebbe un visitatore e non come una fila di campioni. Ogni combinazione ha una versione chiara e una scura, rapporti di contrasto misurati e due formati pronti da copiare: semplici variabili CSS e un blocco Tailwind CSS v4 @theme block, plus a note on turning them into design tokens.

Come usare questa raccolta

Come scegliere i colori di un sito web

1. Parti dal colore del brand, non da una palette

Se l'attività ha già un colore nel logo, quello è l'accento. Costruisci tutto il resto intorno a lui: uno sfondo, un colore per il testo, una superficie più chiara per le schede, un colore attenuato per le righe secondarie e un colore per il testo che sta sopra l'accento. Scegliere prima una bella palette e poi forzarci dentro il logo è il modo in cui i siti finiscono con due blu in competizione.

Se non c'è ancora un colore del brand, sceglilo in base a ciò che l'attività vuole far provare per primo al visitatore. I blu e i verdi profondi trasmettono cura e solidità, i rossi e gli arancioni caldi energia e appetito, i toni terrosi attenuati naturalezza e calma. Sono convenzioni, non regole; un idraulico in verde acqua può distinguersi proprio perché la concorrenza è tutta blu.

2. Usa la proporzione 60-30-10 come punto di partenza

La regola 60-30-10 viene dall'interior design: circa il 60 per cento di una stanza è il colore dominante, il 30 per cento un colore secondario e il 10 per cento un accento. Su un sito web si traduce così:

Il punto è usare l'accento con moderazione. Se tutto è del colore d'accento, niente è una call to action. Considera i numeri come una verifica, non come una misura: se strizzi gli occhi davanti alla pagina e l'accento copre un quarto dello schermo, sta facendo troppo.

3. Controlla il contrasto prima di innamorarti

Le Web Content Accessibility Guidelines (WCAG 2.2) fissano le soglie di contrasto usate dalla maggior parte delle leggi e delle verifiche sull'accessibilità:

Ogni combinazione di questa pagina supera 4.5:1 per il testo, per il testo attenuato e per l'etichetta del pulsante sull'accento, sia nella versione chiara sia in quella scura. La regola per l'etichetta del pulsante è più severa di quanto le WCAG richiedano per le etichette grandi in grassetto, ma il testo dei pulsanti è spesso piccolo, quindi l'abbiamo tenuto allo stesso livello del testo.

Quota	Ruolo in una pagina web	Variabile in queste combinazioni
Circa 60%	Sfondo della pagina e grandi aree vuote	`--bg`
Circa 30%	Testo, schede, pannelli, footer, bordi	`--text`, `--surface`, `--muted`
Circa 10%	Pulsanti, link, stati attivi, un elemento evidenziato per schermata	`--accent`, `--on-accent`

Cosa	Minimo (AA)	Avanzato (AAA)	Criterio WCAG
Testo	4.5:1	7:1	1.4.3 e 1.4.6
Testo grande (almeno 18pt, o 14pt in grassetto)	3:1	4.5:1	1.4.3 e 1.4.6
Pulsanti, bordi dei campi, icone che veicolano un significato	3:1 rispetto a ciò che hanno accanto	Nessun livello AAA	1.4.11

I rapporti sono stati calcolati con la formula WCAG della luminanza relativa, non stimati a occhio. Se cambi un valore hex, ricontrollalo con il verificatore di contrasto dei colori. This is the same calculation in JavaScript:

4. Progetta la versione scura apposta

Invertire una palette chiara funziona di rado. Le versioni scure qui seguono quattro abitudini:

5. Provala su un layout reale

Colori che sembrano equilibrati come campioni possono risultare pesanti su una pagina intera, ed è per questo che ogni combinazione qui sotto è mostrata su un hero e una scheda prezzi. Prima di decidere, applica la combinazione alla tua homepage, guardala su un telefono all'aperto e verifica che il pulsante principale sia la prima cosa che l'occhio trova.

Tutte le 40 combinazioni a colpo d'occhio

Le colonne del contrasto mostrano chiaro / scuro. Fai clic su un nome per andare alla sua anteprima.

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

Tutte le 40 visibili

Combinazioni di colori per SaaS e tecnologia

I siti di prodotto hanno bisogno di un accento chiaro per l'azione principale e di neutri calmi per le schermate dense. Queste cinque tengono lo sfondo vicino al bianco e usano il colore su pulsanti e link.

Midnight Launch

MidnightPrezzi · Contatti

Pubblica note di rilascio che il tuo team legge davvero

Testo attenuato in #586eb6.

Inizia

Base

$19

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f7f8fc	#10121b
Superficie	#ffffff	#1a1b29
Testo	#141a2e	#ededf3
Attenuato	#586eb6	#81859c
Accento	#3b4fe0	#5869e5
Su accento	#ffffff	#ffffff
Contrasto
Testo	16.26:1 AAA	16.02:1 AAA
Attenuato	4.58:1 AA	5.13:1 AA
Pulsante	6.21:1 AA	4.60:1 AA

Variabili CSS

: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

SignalPrezzi · Contatti

Avvisi di uptime che svegliano la persona giusta

Testo attenuato in #357e70.

Inizia

Team

$29

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f4faf8	#101b19
Superficie	#ffffff	#1a2926
Testo	#0f2420	#edf3f2
Attenuato	#357e70	#7e9a95
Accento	#0e7c66	#55e7ca
Su accento	#ffffff	#101b19
Contrasto
Testo	15.37:1 AAA	15.68:1 AAA
Attenuato	4.55:1 AA	5.82:1 AA
Pulsante	5.13:1 AA	11.46:1 AAA

Variabili CSS

: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

GraphitePrezzi · Contatti

Fatture inviate prima che il caffè si raffreddi

Testo attenuato in #6e6e81.

Inizia

Singolo

$12

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f5f5f2	#1b1310
Superficie	#ffffff	#291d1a
Testo	#18181a	#f3eeed
Attenuato	#6e6e81	#9a857e
Accento	#c43d16	#e77655
Su accento	#ffffff	#1b1310
Contrasto
Testo	16.23:1 AAA	15.92:1 AAA
Attenuato	4.57:1 AA	5.26:1 AA
Pulsante	5.22:1 AA	6.21:1 AA

Variabili CSS

: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

CloudPrezzi · Contatti

Una sola casella per ogni domanda dei clienti

Testo attenuato in #7367b2.

Inizia

Crescita

$49

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f8f7fd	#13101b
Superficie	#ffffff	#1e1a29
Testo	#1e1a33	#eeedf3
Attenuato	#7367b2	#89819c
Accento	#6a3fd1	#8c6bdc
Su accento	#ffffff	#13101b
Contrasto
Testo	15.76:1 AAA	16.14:1 AAA
Attenuato	4.57:1 AA	5.09:1 AA
Pulsante	6.47:1 AA	4.70:1 AA

Variabili CSS

: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

DevPrezzi · Contatti

Anteprime di deploy per ogni pull request

Testo attenuato in #537768.

Inizia

Pro

$24

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f3f6f4	#101b18
Superficie	#ffffff	#1a2924
Testo	#101714	#edf3f1
Attenuato	#537768	#7e9a92
Accento	#13795b	#58e5bb
Su accento	#ffffff	#101b18
Contrasto
Testo	16.71:1 AAA	15.68:1 AAA
Attenuato	4.59:1 AA	5.81:1 AA
Pulsante	5.37:1 AA	11.19:1 AAA

Variabili CSS

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

Combinazioni di colori per finanza e studi legali

Banche, commercialisti e studi legali vengono giudicati sulla fiducia, quindi queste usano accenti profondi e poco saturi e pochissima decorazione. L'accento deve comunque funzionare come pulsante, ed è per questo che ognuno supera 4.5:1 con la sua etichetta.

Ledger Navy

LedgerPrezzi · Contatti

Contabilità per studi da cinque a cinquanta persone

Testo attenuato in #3a70c5.

Inizia

Chiusura mensile

$240

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f6f7f9	#10151b
Superficie	#ffffff	#1a2029
Testo	#0f1d33	#edeff3
Attenuato	#3a70c5	#7e8a9a
Accento	#1d4f91	#5e95df
Su accento	#ffffff	#10151b
Contrasto
Testo	15.75:1 AAA	15.93:1 AAA
Attenuato	4.55:1 AA	5.23:1 AA
Pulsante	8.14:1 AAA	5.97:1 AA

Variabili CSS

: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

VaultPrezzi · Contatti

Obiettivi di risparmio che avanzano da soli

Testo attenuato in #417b59.

Inizia

Plus

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f5f7f3	#101b15
Superficie	#ffffff	#1a2920
Testo	#13241a	#edf3ef
Attenuato	#417b59	#7e9a8a
Accento	#1f6b3e	#69d394
Su accento	#ffffff	#101b15
Contrasto
Testo	15.04:1 AAA	15.69:1 AAA
Attenuato	4.64:1 AA	5.78:1 AA
Pulsante	6.50:1 AA	9.54:1 AAA

Variabili CSS

: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

CounselPrezzi · Contatti

Consulenza di diritto del lavoro in parole semplici

Testo attenuato in #a65c45.

Inizia

Prima consulenza

$150

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#faf7f5	#1b1010
Superficie	#ffffff	#291a1a
Testo	#24140f	#f3eded
Attenuato	#a65c45	#9a7e7f
Accento	#8a2a2b	#d26a6b
Su accento	#ffffff	#1b1010
Contrasto
Testo	16.66:1 AAA	16.09:1 AAA
Attenuato	4.65:1 AA	5.02:1 AA
Pulsante	8.58:1 AAA	5.33:1 AA

Variabili CSS

: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

SteadyPrezzi · Contatti

Buste paga elaborate lo stesso giorno ogni mese

Testo attenuato in #59718d.

Inizia

Core

$39

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f4f6f8	#12161a
Superficie	#ffffff	#1c2127
Testo	#1a2129	#edf0f3
Attenuato	#59718d	#7e8d9a
Accento	#3e5f7d	#7da0bf
Su accento	#ffffff	#12161a
Contrasto
Testo	14.99:1 AAA	15.89:1 AAA
Attenuato	4.65:1 AA	5.33:1 AA
Pulsante	6.69:1 AA	6.62:1 AA

Variabili CSS

: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

BrassPrezzi · Contatti

Dichiarazioni dei redditi preparate e inviate entro aprile

Testo attenuato in #847048.

Inizia

Personale

$180

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#fbf9f4	#1b1810
Superficie	#ffffff	#29241a
Testo	#211c12	#f3f1ed
Attenuato	#847048	#9a917e
Accento	#8a6414	#e6b856
Su accento	#ffffff	#1b1810
Contrasto
Testo	16.10:1 AAA	15.71:1 AAA
Attenuato	4.54:1 AA	5.68:1 AA
Pulsante	5.37:1 AA	9.58:1 AAA

Variabili CSS

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

Combinazioni di colori per salute e benessere

Cliniche, terapeuti e studi vogliono trasmettere pulizia e tranquillità. Dominano blu e verdi freddi, con un'opzione calda color argilla per spa e studi di fisioterapia che vogliono sembrare meno clinici.

Clinic Aqua

ClinicPrezzi · Contatti

Appuntamenti in settimana con un medico di famiglia

Testo attenuato in #267c8b.

Inizia

Senza appuntamento

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f3f9fa	#10191b
Superficie	#ffffff	#1a2629
Testo	#0d2a2f	#edf2f3
Attenuato	#267c8b	#7e969a
Accento	#0b7285	#55d0e7
Su accento	#ffffff	#10191b
Contrasto
Testo	14.21:1 AAA	15.80:1 AAA
Attenuato	4.55:1 AA	5.71:1 AA
Pulsante	5.59:1 AA	9.82:1 AAA

Variabili CSS

: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

CalmPrezzi · Contatti

Lezioni di respirazione guidata, mattina e sera

Testo attenuato in #5a7a4d.

Inizia

Lezione singola

$15

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f6f8f3	#141a11
Superficie	#ffffff	#1f271b
Testo	#1c2618	#eff3ed
Attenuato	#5a7a4d	#889a7e
Accento	#4f7a3a	#92c17c
Su accento	#ffffff	#141a11
Contrasto
Testo	14.66:1 AAA	15.78:1 AAA
Attenuato	4.54:1 AA	5.88:1 AA
Pulsante	5.03:1 AA	8.55:1 AAA

Variabili CSS

: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

SoftPrezzi · Contatti

Sedute di counseling da una stanza tranquilla di casa

Testo attenuato in #7d65a8.

Inizia

Seduta singola

$90

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f9f7fc	#15101b
Superficie	#ffffff	#201a28
Testo	#251d33	#efedf3
Attenuato	#7d65a8	#8d819c
Accento	#7445b0	#9974c8
Su accento	#ffffff	#15101b
Contrasto
Testo	15.16:1 AAA	16.11:1 AAA
Attenuato	4.59:1 AA	5.13:1 AA
Pulsante	6.52:1 AA	5.07:1 AA

Variabili CSS

: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

DentalPrezzi · Contatti

Pulizie, controlli e orari serali

Testo attenuato in #3373bd.

Inizia

Visita nuovo paziente

$79

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f4f8fd	#10151b
Superficie	#ffffff	#1a2129
Testo	#0f2238	#edf0f3
Attenuato	#3373bd	#7e8c9a
Accento	#1769c2	#559be7
Su accento	#ffffff	#10151b
Contrasto
Testo	15.08:1 AAA	16.03:1 AAA
Attenuato	4.55:1 AA	5.33:1 AA
Pulsante	5.47:1 AA	6.31:1 AA

Variabili CSS

: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

StudioPrezzi · Contatti

Massaggi e fisioterapia sotto lo stesso tetto

Testo attenuato in #9e6042.

Inizia

60 minuti

$95

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#fbf6f2	#1b1410
Superficie	#ffffff	#291e1a
Testo	#2b1a12	#f3efed
Attenuato	#9e6042	#9a877e
Accento	#a4502a	#d78865
Su accento	#ffffff	#1b1410
Contrasto
Testo	15.54:1 AAA	15.93:1 AAA
Attenuato	4.65:1 AA	5.32:1 AA
Pulsante	5.59:1 AA	6.58:1 AA

Variabili CSS

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

Combinazioni di colori per ristorazione e ospitalità

Ristoranti e negozi alimentari possono permettersi accenti più caldi e vivaci, perché l'appetito risponde al calore. Gli sfondi sono leggermente color crema, così le foto del cibo non sembrano fredde sul bianco puro.

Tomato Table

TomatoPrezzi · Contatti

Pizza cotta nel forno a legna e una lunga tavolata per gli amici

Testo attenuato in #b35944.

Inizia

Menu famiglia

$58

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#fff8f3	#1b1210
Superficie	#ffffff	#291c1a
Testo	#2a1510	#f3eeed
Attenuato	#b35944	#9a837e
Accento	#c0381f	#e46e58
Su accento	#ffffff	#1b1210
Contrasto
Testo	16.46:1 AAA	16.01:1 AAA
Attenuato	4.51:1 AA	5.19:1 AA
Pulsante	5.49:1 AA	5.85:1 AA

Variabili CSS

: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

EspressoPrezzi · Contatti

Chicchi monorigine tostati ogni martedì

Testo attenuato in #916548.

Inizia

Sacchetto da 340 g

$18

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f8f3ee	#1b1510
Superficie	#fffdfa	#29201a
Testo	#241912	#f3efed
Attenuato	#916548	#9a897e
Accento	#7a4a2a	#cd956f
Su accento	#ffffff	#1b1510
Contrasto
Testo	15.58:1 AAA	15.83:1 AAA
Attenuato	4.58:1 AA	5.38:1 AA
Pulsante	7.39:1 AAA	7.00:1 AAA

Variabili CSS

: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

CitrusPrezzi · Contatti

Cassette di frutta consegnate il venerdì mattina

Testo attenuato in #82732f.

Inizia

Cassetta piccola

$32

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#fffbef	#1b1610
Superficie	#ffffff	#29211a
Testo	#24200d	#f3f0ed
Attenuato	#82732f	#9a8c7e
Accento	#b45a00	#e79e55
Su accento	#ffffff	#1b1610
Contrasto
Testo	15.77:1 AAA	15.83:1 AAA
Attenuato	4.57:1 AA	5.50:1 AA
Pulsante	4.77:1 AA	8.06:1 AAA

Variabili CSS

: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

BistroPrezzi · Contatti

Un menu breve che cambia con le stagioni

Testo attenuato in #6c743f.

Inizia

Menu degustazione

$65

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f7f6ee	#191b10
Superficie	#ffffff	#26291a
Testo	#1f2112	#f2f3ed
Attenuato	#6c743f	#959a7e
Accento	#5c6b1f	#bed369
Su accento	#ffffff	#191b10
Contrasto
Testo	15.08:1 AAA	15.61:1 AAA
Attenuato	4.60:1 AA	5.97:1 AA
Pulsante	5.87:1 AA	10.54:1 AAA

Variabili CSS

: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

BerryPrezzi · Contatti

Torte a strati da ordinare due giorni prima

Testo attenuato in #b74e6a.

Inizia

Torta da sei pollici

$42

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#fdf5f7	#1b1014
Superficie	#ffffff	#291a1f
Testo	#2c1219	#f3edef
Attenuato	#b74e6a	#9a7e89
Accento	#b0285a	#db618e
Su accento	#ffffff	#1b1014
Contrasto
Testo	16.21:1 AAA	16.07:1 AAA
Attenuato	4.54:1 AA	5.06:1 AA
Pulsante	6.37:1 AA	5.41:1 AA

Variabili CSS

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

Combinazioni di colori per creativi e portfolio

Portfolio e studi possono rischiare di più. Queste abbinano un testo quasi nero a un solo accento deciso, come farebbe un poster stampato, e lasciano ai lavori il compito di fornire il resto del colore.

Gallery Ink

GalleryPrezzi · Contatti

Identità di marca per negozi indipendenti

Testo attenuato in #816d6d.

Inizia

Kit di identità

$2,400

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#fafafa	#1b1110
Superficie	#ffffff	#291b1a
Testo	#111111	#f3eded
Attenuato	#816d6d	#9a817e
Accento	#e0301e	#e76355
Su accento	#ffffff	#1b1110
Contrasto
Testo	18.09:1 AAA	16.00:1 AAA
Attenuato	4.63:1 AA	5.13:1 AA
Pulsante	4.55:1 AA	5.57:1 AA

Variabili CSS

: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

PosterPrezzi · Contatti

Serigrafie in tirature da cinquanta

Testo attenuato in #7d6a6a.

Inizia

Stampa A2

$70

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f6f4ef	#10121b
Superficie	#ffffff	#1a1c29
Testo	#151515	#edeef3
Attenuato	#7d6a6a	#7e839a
Accento	#2340d8	#6077e6
Su accento	#ffffff	#10121b
Contrasto
Testo	16.61:1 AAA	16.12:1 AAA
Attenuato	4.61:1 AA	4.98:1 AA
Pulsante	7.51:1 AAA	4.69:1 AA

Variabili CSS

: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

NeonPrezzi · Contatti

Motion graphics per lanci musicali

Testo attenuato in #785ec7.

Inizia

Lyric video

$900

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f7f5ff	#1b1019
Superficie	#ffffff	#291a25
Testo	#160f2b	#f3edf1
Attenuato	#785ec7	#9a7e94
Accento	#c0129a	#e755c7
Su accento	#ffffff	#1b1019
Contrasto
Testo	17.11:1 AAA	16.03:1 AAA
Attenuato	4.61:1 AA	5.10:1 AA
Pulsante	5.53:1 AA	5.75:1 AA

Variabili CSS

: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

PaperPrezzi · Contatti

Mappe illustrate per città e sentieri

Testo attenuato in #7b6f5e.

Inizia

Mappa su misura

$650

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f9f6ef	#1b1210
Superficie	#fffdf8	#291d1a
Testo	#2a2620	#f3eeed
Attenuato	#7b6f5e	#9a847e
Accento	#b5462a	#da7a62
Su accento	#ffffff	#1b1210
Contrasto
Testo	13.93:1 AAA	16.01:1 AAA
Attenuato	4.55:1 AA	5.24:1 AA
Pulsante	5.42:1 AA	6.09:1 AA

Variabili CSS

: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

FilmPrezzi · Contatti

Brevi documentari per organizzazioni non profit

Testo attenuato in #45767d.

Inizia

Film di tre minuti

$3,200

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f2f6f6	#101b1a
Superficie	#ffffff	#1a2928
Testo	#142224	#edf3f2
Attenuato	#45767d	#7e9a98
Accento	#00756e	#55e7de
Su accento	#ffffff	#101b1a
Contrasto
Testo	15.02:1 AAA	15.67:1 AAA
Attenuato	4.66:1 AA	5.83:1 AA
Pulsante	5.57:1 AA	11.62:1 AAA

Variabili CSS

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

Combinazioni di colori per artigiani locali e servizi per la casa

Idraulici, conciatetti, elettricisti e giardinieri hanno bisogno di un pulsante per chiamare che si noti sullo schermo di un telefono alla luce del giorno. Ogni accento qui è un colore ad alta visibilità con un'etichetta che resta leggibile.

Hardhat Orange

HardhatPrezzi · Contatti

Ristrutturazioni di cucine e bagni, dall'inizio alla fine

Testo attenuato in #736f62.

Inizia

Sopralluogo

Gratis

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f8f6f2	#1b1410
Superficie	#ffffff	#291f1a
Testo	#1b1a17	#f3efed
Attenuato	#736f62	#9a897e
Accento	#c4520a	#e78e55
Su accento	#ffffff	#1b1410
Contrasto
Testo	16.12:1 AAA	15.93:1 AAA
Attenuato	4.66:1 AA	5.42:1 AA
Pulsante	4.61:1 AA	7.28:1 AAA

Variabili CSS

: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

PipelinePrezzi · Contatti

Tubo rotto? Un idraulico alla tua porta stasera

Testo attenuato in #3c71b1.

Inizia

Intervento

$89

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f3f6fa	#10161b
Superficie	#ffffff	#1a2129
Testo	#0f1c2c	#edf0f3
Attenuato	#3c71b1	#7e8c9a
Accento	#0b5cad	#559ee7
Su accento	#ffffff	#10161b
Contrasto
Testo	15.84:1 AAA	15.93:1 AAA
Attenuato	4.62:1 AA	5.30:1 AA
Pulsante	6.67:1 AA	6.45:1 AA

Variabili CSS

: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

RooflinePrezzi · Contatti

Riparazioni del tetto con le foto di ogni tegola

Testo attenuato in #7f6c6c.

Inizia

Ispezione

$120

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f5f5f5	#1b1110
Superficie	#ffffff	#291a1a
Testo	#1c1c1c	#f3eded
Attenuato	#7f6c6c	#9a807e
Accento	#b3261e	#e36059
Su accento	#ffffff	#1b1110
Contrasto
Testo	15.63:1 AAA	16.00:1 AAA
Attenuato	4.52:1 AA	5.08:1 AA
Pulsante	6.54:1 AA	5.36:1 AA

Variabili CSS

: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

FreshPrezzi · Contatti

Taglio dell'erba settimanale e pulizie di primavera

Testo attenuato in #4f7c47.

Inizia

Visita settimanale

$45

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f4f8f1	#121b10
Superficie	#ffffff	#1c291a
Testo	#152113	#eef3ed
Attenuato	#4f7c47	#839a7e
Accento	#2f7a1f	#79d864
Su accento	#ffffff	#121b10
Contrasto
Testo	15.53:1 AAA	15.70:1 AAA
Attenuato	4.54:1 AA	5.79:1 AA
Pulsante	5.35:1 AA	9.93:1 AAA

Variabili CSS

: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

SparkPrezzi · Contatti

Aggiornamento dei quadri elettrici e installazione di colonnine di ricarica

Testo attenuato in #737359.

Inizia

Installazione colonnina

$650

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#fbfaf2	#1b1610
Superficie	#ffffff	#29221a
Testo	#1a1a14	#f3f0ed
Attenuato	#737359	#9a8e7e
Accento	#a15c00	#e7a855
Su accento	#ffffff	#1b1610
Contrasto
Testo	16.69:1 AAA	15.83:1 AAA
Attenuato	4.64:1 AA	5.60:1 AA
Pulsante	5.19:1 AA	8.67:1 AAA

Variabili CSS

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

Combinazioni di colori per natura e outdoor

Brand outdoor, aziende agricole, tour operator e prodotti ecologici. Accenti terrosi su bianco sporco, con modalità scure che ricordano il crepuscolo più che un editor di codice.

Forest Trail

ForestPrezzi · Contatti

Escursioni guidate per piccoli gruppi

Testo attenuato in #4a7958.

Inizia

Mezza giornata

$55

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f3f6f2	#111a16
Superficie	#ffffff	#1a2822
Testo	#16241a	#edf3f0
Attenuato	#4a7958	#7e9a8e
Accento	#2d6a4f	#77c5a3
Su accento	#ffffff	#111a16
Contrasto
Testo	14.81:1 AAA	15.79:1 AAA
Attenuato	4.63:1 AA	5.83:1 AA
Pulsante	6.39:1 AA	8.71:1 AAA

Variabili CSS

: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

DesertPrezzi · Contatti

Tour nei canyon all'alba e al tramonto

Testo attenuato in #976646.

Inizia

Tour al tramonto

$75

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#fbf5ee	#1b1310
Superficie	#ffffff	#291d1a
Testo	#2b1d14	#f3eeed
Attenuato	#976646	#9a857e
Accento	#b04a28	#db8061
Su accento	#ffffff	#1b1310
Contrasto
Testo	15.05:1 AAA	15.92:1 AAA
Attenuato	4.51:1 AA	5.26:1 AA
Pulsante	5.45:1 AA	6.34:1 AA

Variabili CSS

: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

GlacierPrezzi · Contatti

Noleggio kayak a ore

Testo attenuato in #37749a.

Inizia

Due ore

$40

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f1f6f9	#10181b
Superficie	#ffffff	#1a2529
Testo	#10222d	#edf1f3
Attenuato	#37749a	#7e939a
Accento	#14708f	#55c2e7
Su accento	#ffffff	#10181b
Contrasto
Testo	14.97:1 AAA	15.81:1 AAA
Attenuato	4.67:1 AA	5.59:1 AA
Pulsante	5.61:1 AA	8.78:1 AAA

Variabili CSS

: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

MossPrezzi · Contatti

Giardini di piante autoctone che richiedono poca acqua

Testo attenuato in #68725a.

Inizia

Progetto del giardino

$300

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f4f5f0	#171912
Superficie	#ffffff	#23261c
Testo	#1f221b	#f1f3ed
Attenuato	#68725a	#909a7e
Accento	#5a6b3a	#a7bb81
Su accento	#ffffff	#171912
Contrasto
Testo	14.71:1 AAA	15.86:1 AAA
Attenuato	4.63:1 AA	6.00:1 AA
Pulsante	5.84:1 AA	8.50:1 AAA

Variabili CSS

: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

CoastalPrezzi · Contatti

Cottage sulla spiaggia a pochi passi dall'acqua

Testo attenuato in #5c727c.

Inizia

A notte

$210

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f9f6ef	#10181b
Superficie	#ffffff	#1a2529
Testo	#1d2427	#edf1f3
Attenuato	#5c727c	#7e939a
Accento	#1f6f8b	#61bcdc
Su accento	#ffffff	#10181b
Contrasto
Testo	14.59:1 AAA	15.81:1 AAA
Attenuato	4.68:1 AA	5.59:1 AA
Pulsante	5.67:1 AA	8.33:1 AAA

Variabili CSS

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

Combinazioni di colori per lusso e moda

Gioiellieri, boutique hotel e marchi di moda di solito vogliono sobrietà: uno sfondo tranquillo, un testo scuro e un solo accento ricco usato con parsimonia.

Noir Gold

NoirPrezzi · Contatti

Anelli incastonati a mano e realizzati su ordinazione

Testo attenuato in #7a6e62.

Inizia

Consulenza

Gratis

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f8f6f1	#1b1810
Superficie	#ffffff	#29241a
Testo	#141210	#f3f1ed
Attenuato	#7a6e62	#9a927e
Accento	#86651a	#e0b85d
Su accento	#ffffff	#1b1810
Contrasto
Testo	17.30:1 AAA	15.71:1 AAA
Attenuato	4.59:1 AA	5.73:1 AA
Pulsante	5.40:1 AA	9.44:1 AAA

Variabili CSS

: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

VelvetPrezzi · Contatti

Abiti da sera a noleggio per il weekend

Testo attenuato in #a5538e.

Inizia

Noleggio weekend

$120

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f9f5f8	#1b1019
Superficie	#ffffff	#291a26
Testo	#24121f	#f3edf2
Attenuato	#a5538e	#9a7e95
Accento	#6d2160	#d26ac0
Su accento	#ffffff	#1b1019
Contrasto
Testo	16.46:1 AAA	16.04:1 AAA
Attenuato	4.60:1 AA	5.10:1 AA
Pulsante	10.31:1 AAA	5.78:1 AA

Variabili CSS

: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

IvoryPrezzi · Contatti

Un hotel di dodici camere sopra il porto vecchio

Testo attenuato in #3e7c65.

Inizia

Camera sul giardino

$340

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f8f7f2	#101b18
Superficie	#ffffff	#1a2924
Testo	#10201a	#edf3f1
Attenuato	#3e7c65	#7e9a91
Accento	#0f5f46	#58e5b9
Su accento	#ffffff	#101b18
Contrasto
Testo	15.74:1 AAA	15.68:1 AAA
Attenuato	4.58:1 AA	5.80:1 AA
Pulsante	7.65:1 AAA	11.18:1 AAA

Variabili CSS

: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

RosePrezzi · Contatti

Modifiche agli abiti da sposa con due prove incluse

Testo attenuato in #a65b57.

Inizia

Pacchetto prove

$280

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#fcf6f5	#1b1012
Superficie	#ffffff	#281a1c
Testo	#2a1716	#f3eded
Attenuato	#a65b57	#9a7e82
Accento	#9c3d4a	#c9747f
Su accento	#ffffff	#1b1012
Contrasto
Testo	15.93:1 AAA	16.07:1 AAA
Attenuato	4.62:1 AA	5.03:1 AA
Pulsante	6.60:1 AA	5.57:1 AA

Variabili CSS

: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

OnyxPrezzi · Contatti

Orologi revisionati da un orologiaio certificato

Testo attenuato in #586db6.

Inizia

Revisione completa

$450

Scegli il piano

Colore	Chiaro	Scuro
Sfondo	#f5f6f8	#10131b
Superficie	#ffffff	#1a1d29
Testo	#0e1220	#edeef3
Attenuato	#586db6	#7e859a
Accento	#24409a	#627eda
Su accento	#ffffff	#10131b
Contrasto
Testo	17.25:1 AAA	16.03:1 AAA
Attenuato	4.54:1 AA	5.05:1 AA
Pulsante	9.23:1 AAA	4.88:1 AA

Variabili CSS

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

Usare i blocchi di codice

Semplici variabili CSS

Il blocco CSS definisce sei variabili su :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:

Se vuoi anche un interruttore manuale, copia i valori scuri in una seconda regola come :root[data-theme="dark"] { ... } and set that attribute from your toggle.

Tailwind CSS v4

In Tailwind v4, i valori del tema stanno nel CSS dentro un blocco @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:

Usi Tailwind v3? Metti invece gli stessi valori hex chiari sotto theme.extend.colors in tailwind.config.js instead. If you would rather generate a full 50 to 950 shade scale from one accent, the generatore di palette di colori Tailwind does that.

Design token

Per inserire una combinazione in uno strumento di design token, associa i sei ruoli a token nel formato JSON del Design Tokens Community Group, con un $type of color and the hex as $value, in a light and a dark group:

Gli strumenti che leggono questo formato, come Style Dictionary, possono trasformarlo in valori CSS, iOS o Android.

Errori comuni nella scelta dei colori

Strumenti per creare la tua

Domande frequenti

Qual è una buona combinazione di colori per un sito web?

Una combinazione con uno sfondo tranquillo che copre gran parte della pagina, un colore del testo scuro che raggiunge almeno 4.5:1 di contrasto con quello sfondo e un colore d'accento riservato a pulsanti e link. L'accento deve corrispondere al brand, e anche l'etichetta del pulsante sopra di esso deve raggiungere 4.5:1.

Quanti colori dovrebbe avere un sito web?

La maggior parte dei siti funziona con cinque o sei ruoli: lo sfondo, una superficie per le schede, il testo principale, il testo attenuato, un accento e il colore del testo usato sull'accento. Aggiungi rosso, ambra e verde solo per i messaggi di errore, avviso e conferma.

Che cos'è la regola 60-30-10 nel web design?

È una linea guida sulle proporzioni presa dall'interior design: circa il 60 per cento di colore dominante (lo sfondo della pagina), il 30 per cento di colore secondario (testo, schede e pannelli) e il 10 per cento di accento (pulsanti, link ed elementi evidenziati). Mantiene l'accento abbastanza raro da attirare l'attenzione.

Quale rapporto di contrasto richiedono le WCAG per il testo?

Il livello AA delle WCAG 2.2 richiede almeno 4.5:1 per il testo normale e 3:1 per il testo grande, cioè almeno 18 punti, o 14 punti in grassetto. Il livello AAA alza queste soglie a 7:1 e 4.5:1. Pulsanti, bordi dei campi e icone che veicolano un significato devono raggiungere 3:1 rispetto a ciò che li circonda.

Posso usare queste combinazioni di colori su un sito commerciale?

Sì. Abbiamo creato queste combinazioni per questa pagina e puoi usarle in qualsiasi progetto personale o commerciale, senza obbligo di citazione.

Come si crea una versione scura di una combinazione di colori?

Non limitarti a invertirla. Usa uno sfondo molto scuro tinto con il colore del brand, un testo bianco sporco e una versione più chiara dell'accento perché resti visibile. Poi ricontrolla il contrasto del testo e dell'etichetta del pulsante, che potrebbe dover passare dal bianco a un colore scuro.

Combinazioni di colori per siti web: 40 palette su layout di pagina reali

Come usare questa raccolta

Come scegliere i colori di un sito web

1. Parti dal colore del brand, non da una palette

2. Usa la proporzione 60-30-10 come punto di partenza

3. Controlla il contrasto prima di innamorarti

4. Progetta la versione scura apposta

5. Provala su un layout reale

Tutte le 40 combinazioni a colpo d'occhio

Combinazioni di colori per SaaS e tecnologia

Midnight Launch

Signal Mint

Graphite Volt

Cloud Iris

Dev Console

Combinazioni di colori per finanza e studi legali

Ledger Navy

Vault Green

Counsel Oxblood

Steady Slate

Brass Audit

Combinazioni di colori per salute e benessere

Clinic Aqua

Calm Sage

Soft Lavender

Dental Bright

Studio Clay

Combinazioni di colori per ristorazione e ospitalità

Tomato Table

Espresso Bar

Citrus Market

Bistro Olive

Berry Bakery

Combinazioni di colori per creativi e portfolio

Gallery Ink

Poster Cobalt

Neon Studio

Paper Sketch

Film Teal

Combinazioni di colori per artigiani locali e servizi per la casa

Hardhat Orange

Pipeline Blue

Roofline Charcoal

Fresh Lawn

Spark Electric

Combinazioni di colori per natura e outdoor

Forest Trail

Desert Dusk

Glacier Lake

Moss and Stone

Coastal Dune

Combinazioni di colori per lusso e moda

Noir Gold

Velvet Plum

Ivory Emerald

Rose Atelier

Onyx Sapphire

Usare i blocchi di codice

Semplici variabili CSS

Tailwind CSS v4

Design token

Errori comuni nella scelta dei colori

Strumenti per creare la tua

Domande frequenti

Qual è una buona combinazione di colori per un sito web?

Quanti colori dovrebbe avere un sito web?

Che cos'è la regola 60-30-10 nel web design?

Quale rapporto di contrasto richiedono le WCAG per il testo?

Posso usare queste combinazioni di colori su un sito commerciale?

Come si crea una versione scura di una combinazione di colori?

Correlati: Guide

Prodotto

Per chi è

Funzionalità

Risorse

Azienda