Palettes de couleurs pour site web : 40 combinaisons sur de vraies mises en page
Accueil Une bonne palette de couleurs pour site web utilise un fond calme sur la majeure partie de la page, une couleur de texte foncée avec un contraste d'au moins 4.5:1 et un seul accent de marque réservé aux boutons et aux liens. Voici 40 palettes originales sur de vraies mises en page, chacune avec un mode sombre, des scores de contraste et du code CSS et Tailwind à copier.
Mis à jour le 13 octobre 2026
Voici 40 palettes de couleurs créées pour cette page, chacune appliquée à une petite landing page avec un hero, un bouton et une carte de tarifs, pour que vous puissiez la juger comme un visiteur la verrait, et non comme une simple rangée de pastilles. Chaque palette existe en version claire et sombre, avec des ratios de contraste mesurés et deux formats prêts à copier : des variables CSS simples et un bloc Tailwind CSS v4 @theme block, plus a note on turning them into design tokens.
Comment utiliser cette collection
Parcourez par ambiance ou par secteur. The schemes are grouped into eight sets: SaaS and tech, finance and legal, health and wellness, food and hospitality, creative and portfolio, local trades, nature and outdoors, and luxury.Recherchez. Type a word such as "blue", "bakery" or "luxury" into the search box to narrow the list.Passez du clair au sombre. The controls above the scheme list repaint every mini page in its dark version and can show one mood at a time. The dark hex values are also printed under each preview, so nothing depends on the toggle.Copiez. Each scheme has a Copy link above each code block. Paste the CSS variables into any stylesheet. In a Tailwind v4 project, add the @theme block right after them.
Comment choisir les couleurs d'un site web
1. Partez de la couleur de la marque, pas d'une palette
Si l'entreprise a déjà une couleur de logo, c'est elle l'accent. Construisez tout le reste autour : un fond, une couleur de texte, une surface plus claire pour les cartes, une couleur de texte atténuée pour les lignes secondaires et une couleur de texte posée sur l'accent. Choisir d'abord une jolie palette puis y caser le logo de force, c'est ainsi que des sites se retrouvent avec deux bleus qui se concurrencent.
S'il n'y a pas encore de couleur de marque, choisissez-la selon ce que l'entreprise veut faire ressentir d'abord au visiteur. Les bleus et verts profonds évoquent le sérieux et la solidité, les rouges et oranges chauds l'énergie et l'appétit, les tons terreux atténués le naturel et le calme. Ce sont des conventions, pas des règles : un plombier en bleu canard peut se démarquer justement parce que tous ses concurrents sont en bleu.
2. Prenez la répartition 60-30-10 comme point de départ
La règle 60-30-10 vient de la décoration intérieure : environ 60 % d'une pièce est dans la couleur dominante, 30 % dans une couleur secondaire et 10 % dans une couleur d'accent. Sur un site web, cela donne ceci :
Part Rôle sur une page web Variable dans ces palettes
Environ 60% Fond de page et grandes zones vides --bgEnviron 30% Texte, cartes, panneaux, pied de page, bordures --text, --surface, --mutedEnviron 10% Boutons, liens, états actifs, un seul élément mis en avant par écran --accent, --on-accent
L'essentiel est de rester sobre avec l'accent. Si tout est dans la couleur d'accent, plus rien n'est un appel à l'action. Voyez ces chiffres comme un repère, pas comme une mesure : si, en plissant les yeux devant votre page, l'accent couvre un quart de l'écran, il en fait trop.
3. Vérifiez le contraste avant de tomber amoureux
Les règles pour l'accessibilité des contenus web (WCAG 2.2) fixent les seuils de contraste utilisés par la plupart des lois et des audits d'accessibilité :
Élément Minimum (AA) Renforcé (AAA) Critère WCAG
Texte courant 4.5:1 7:1 1.4.3 et 1.4.6 Grand texte (au moins 18pt, ou 14pt en gras) 3:1 4.5:1 1.4.3 et 1.4.6 Boutons, bordures de champs, icônes porteuses de sens 3:1 par rapport à ce qui les entoure Pas de niveau AAA 1.4.11
Chaque palette de cette page atteint 4.5:1 pour le texte courant, pour le texte atténué et pour le libellé du bouton sur l'accent, en version claire comme en version sombre. Pour les libellés de bouton, c'est plus strict que ce qu'exigent les WCAG pour les grands libellés en gras, mais le texte des boutons est souvent petit, donc nous l'avons soumis au même seuil que le texte courant.
Les ratios ont été calculés avec la formule de luminance relative des WCAG, pas estimés à l'œil. Si vous modifiez une valeur hexadécimale, revérifiez-la avec le vérificateur de contraste des couleurs . This is the same calculation 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, AAA4. Concevez la version sombre délibérément
Inverser une palette claire fonctionne rarement. Les versions sombres présentées ici suivent quatre principes :
Teinté, pas noir pur. Each dark background is a very dark shade of the accent hue, which keeps the brand feeling and is softer on the eyes than #000000.Texte blanc cassé. Text is a near-white with a hint of the same hue, so it does not glare.Accent plus clair. A dark accent that works on white disappears on a dark background, so each dark accent is a lighter version of the same hue.Le libellé du bouton peut s'inverser. When the accent gets light, dark text on it reads better than white. Several schemes switch --on-accent to the background color in dark mode for that reason.
5. Testez-la sur une vraie mise en page
Des couleurs qui semblent équilibrées en pastilles peuvent paraître lourdes sur une page entière, c'est pourquoi chaque palette ci-dessous est montrée sur un hero et une carte de tarifs. Avant de vous décider, appliquez votre palette à votre propre page d'accueil, regardez-la sur un téléphone en extérieur et vérifiez que le bouton principal est la première chose que votre œil repère.
Les 40 palettes en un coup d'œil
Les colonnes de contraste indiquent clair / sombre. Cliquez sur un nom pour aller à son aperçu.
Palette Groupe Accent Contraste du texte Contraste du bouton Midnight Launch SaaS et tech #3b4fe016.3 / 16.0 6.2 / 4.6 Signal Mint SaaS et tech #0e7c6615.4 / 15.7 5.1 / 11.5 Graphite Volt SaaS et tech #c43d1616.2 / 15.9 5.2 / 6.2 Cloud Iris SaaS et tech #6a3fd115.8 / 16.1 6.5 / 4.7 Dev Console SaaS et tech #13795b16.7 / 15.7 5.4 / 11.2 Ledger Navy Finance et juridique #1d4f9115.8 / 15.9 8.1 / 6.0 Vault Green Finance et juridique #1f6b3e15.0 / 15.7 6.5 / 9.5 Counsel Oxblood Finance et juridique #8a2a2b16.7 / 16.1 8.6 / 5.3 Steady Slate Finance et juridique #3e5f7d15.0 / 15.9 6.7 / 6.6 Brass Audit Finance et juridique #8a641416.1 / 15.7 5.4 / 9.6 Clinic Aqua Santé et bien-être #0b728514.2 / 15.8 5.6 / 9.8 Calm Sage Santé et bien-être #4f7a3a14.7 / 15.8 5.0 / 8.6 Soft Lavender Santé et bien-être #7445b015.2 / 16.1 6.5 / 5.1 Dental Bright Santé et bien-être #1769c215.1 / 16.0 5.5 / 6.3 Studio Clay Santé et bien-être #a4502a15.5 / 15.9 5.6 / 6.6 Tomato Table Restauration et hôtellerie #c0381f16.5 / 16.0 5.5 / 5.8 Espresso Bar Restauration et hôtellerie #7a4a2a15.6 / 15.8 7.4 / 7.0 Citrus Market Restauration et hôtellerie #b45a0015.8 / 15.8 4.8 / 8.1 Bistro Olive Restauration et hôtellerie #5c6b1f15.1 / 15.6 5.9 / 10.5 Berry Bakery Restauration et hôtellerie #b0285a16.2 / 16.1 6.4 / 5.4 Gallery Ink Création et portfolio #e0301e18.1 / 16.0 4.5 / 5.6 Poster Cobalt Création et portfolio #2340d816.6 / 16.1 7.5 / 4.7 Neon Studio Création et portfolio #c0129a17.1 / 16.0 5.5 / 5.8 Paper Sketch Création et portfolio #b5462a13.9 / 16.0 5.4 / 6.1 Film Teal Création et portfolio #00756e15.0 / 15.7 5.6 / 11.6 Hardhat Orange Artisans locaux et services à domicile #c4520a16.1 / 15.9 4.6 / 7.3 Pipeline Blue Artisans locaux et services à domicile #0b5cad15.8 / 15.9 6.7 / 6.5 Roofline Charcoal Artisans locaux et services à domicile #b3261e15.6 / 16.0 6.5 / 5.4 Fresh Lawn Artisans locaux et services à domicile #2f7a1f15.5 / 15.7 5.3 / 9.9 Spark Electric Artisans locaux et services à domicile #a15c0016.7 / 15.8 5.2 / 8.7 Forest Trail Nature et plein air #2d6a4f14.8 / 15.8 6.4 / 8.7 Desert Dusk Nature et plein air #b04a2815.1 / 15.9 5.5 / 6.3 Glacier Lake Nature et plein air #14708f15.0 / 15.8 5.6 / 8.8 Moss and Stone Nature et plein air #5a6b3a14.7 / 15.9 5.8 / 8.5 Coastal Dune Nature et plein air #1f6f8b14.6 / 15.8 5.7 / 8.3 Noir Gold Luxe et mode #86651a17.3 / 15.7 5.4 / 9.4 Velvet Plum Luxe et mode #6d216016.5 / 16.0 10.3 / 5.8 Ivory Emerald Luxe et mode #0f5f4615.7 / 15.7 7.7 / 11.2 Rose Atelier Luxe et mode #9c3d4a15.9 / 16.1 6.6 / 5.6 Onyx Sapphire Luxe et mode #24409a17.2 / 16.0 9.2 / 4.9
Affichage des 40
Palettes de couleurs SaaS et tech
Les sites de produits ont besoin d'un accent net pour l'action principale et de neutres apaisants pour les écrans chargés. Ces cinq palettes gardent un fond proche du blanc et réservent la couleur aux boutons et aux liens.
Midnight Launch
Midnight Tarifs · Contact
Des notes de version que votre équipe lit vraiment
Texte atténué en #586eb6.
Commencer Débutant
$19
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 16.26:1 AAA 16.02:1 AAA Atténué 4.58:1 AA 5.13:1 AA Bouton 6.21:1 AA 4.60:1 AA
Variables CSS Copier
: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 Copier
/* 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
Signal Tarifs · Contact
Des alertes de disponibilité qui réveillent la bonne personne
Texte atténué en #357e70.
Commencer Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 15.37:1 AAA 15.68:1 AAA Atténué 4.55:1 AA 5.82:1 AA Bouton 5.13:1 AA 11.46:1 AAA
Variables CSS Copier
: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 Copier
/* 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
Graphite Tarifs · Contact
Des factures envoyées avant que le café refroidisse
Texte atténué en #6e6e81.
Commencer Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 16.23:1 AAA 15.92:1 AAA Atténué 4.57:1 AA 5.26:1 AA Bouton 5.22:1 AA 6.21:1 AA
Variables CSS Copier
: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 Copier
/* 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
Cloud Tarifs · Contact
Une seule boîte de réception pour toutes les questions clients
Texte atténué en #7367b2.
Commencer Croissance
$49
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 15.76:1 AAA 16.14:1 AAA Atténué 4.57:1 AA 5.09:1 AA Bouton 6.47:1 AA 4.70:1 AA
Variables CSS Copier
: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 Copier
/* 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
Dev Tarifs · Contact
Des aperçus de déploiement pour chaque pull request
Texte atténué en #537768.
Commencer Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 16.71:1 AAA 15.68:1 AAA Atténué 4.59:1 AA 5.81:1 AA Bouton 5.37:1 AA 11.19:1 AAA
Variables CSS Copier
: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 Copier
/* 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);
}
Palettes de couleurs finance et juridique
Les banques, les comptables et les cabinets d'avocats sont jugés sur la confiance, donc ces palettes utilisent des accents profonds et peu saturés, avec très peu de décoration. L'accent doit tout de même fonctionner comme bouton, c'est pourquoi chacun atteint 4.5:1 avec son libellé.
Ledger Navy
Ledger Tarifs · Contact
La comptabilité des entreprises de cinq à cinquante personnes
Texte atténué en #3a70c5.
Commencer Clôture mensuelle
$240
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 15.75:1 AAA 15.93:1 AAA Atténué 4.55:1 AA 5.23:1 AA Bouton 8.14:1 AAA 5.97:1 AA
Variables CSS Copier
: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 Copier
/* 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
Vault Tarifs · Contact
Des objectifs d'épargne qui avancent tout seuls
Texte atténué en #417b59.
Commencer Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 15.04:1 AAA 15.69:1 AAA Atténué 4.64:1 AA 5.78:1 AA Bouton 6.50:1 AA 9.54:1 AAA
Variables CSS Copier
: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 Copier
/* 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
Counsel Tarifs · Contact
Des conseils en droit du travail, en termes simples
Texte atténué en #a65c45.
Commencer Première consultation
$150
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 16.66:1 AAA 16.09:1 AAA Atténué 4.65:1 AA 5.02:1 AA Bouton 8.58:1 AAA 5.33:1 AA
Variables CSS Copier
: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 Copier
/* 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
Steady Tarifs · Contact
Une paie versée le même jour chaque mois
Texte atténué en #59718d.
Commencer Essentiel
$39
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 14.99:1 AAA 15.89:1 AAA Atténué 4.65:1 AA 5.33:1 AA Bouton 6.69:1 AA 6.62:1 AA
Variables CSS Copier
: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 Copier
/* 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
Brass Tarifs · Contact
Déclarations d'impôts préparées et déposées avant avril
Texte atténué en #847048.
Commencer Particulier
$180
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 16.10:1 AAA 15.71:1 AAA Atténué 4.54:1 AA 5.68:1 AA Bouton 5.37:1 AA 9.58:1 AAA
Variables CSS Copier
: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 Copier
/* 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);
}
Palettes de couleurs santé et bien-être
Les cliniques, les thérapeutes et les studios veulent paraître nets et rassurants. Les bleus et verts froids dominent, avec une option chaude couleur argile pour les spas et cabinets de kinésithérapie qui veulent paraître moins médicaux.
Clinic Aqua
Clinic Tarifs · Contact
Des rendez-vous dans la semaine avec un médecin de famille
Texte atténué en #267c8b.
Commencer Sans rendez-vous
$0
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 14.21:1 AAA 15.80:1 AAA Atténué 4.55:1 AA 5.71:1 AA Bouton 5.59:1 AA 9.82:1 AAA
Variables CSS Copier
: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 Copier
/* 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
Calm Tarifs · Contact
Des cours de respiration guidée, matin et soir
Texte atténué en #5a7a4d.
Commencer Séance libre
$15
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 14.66:1 AAA 15.78:1 AAA Atténué 4.54:1 AA 5.88:1 AA Bouton 5.03:1 AA 8.55:1 AAA
Variables CSS Copier
: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 Copier
/* 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
Soft Tarifs · Contact
Des séances de thérapie depuis une pièce calme chez vous
Texte atténué en #7d65a8.
Commencer Séance unique
$90
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 15.16:1 AAA 16.11:1 AAA Atténué 4.59:1 AA 5.13:1 AA Bouton 6.52:1 AA 5.07:1 AA
Variables CSS Copier
: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 Copier
/* 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
Dental Tarifs · Contact
Détartrages, contrôles et horaires en soirée
Texte atténué en #3373bd.
Commencer Examen nouveau patient
$79
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 15.08:1 AAA 16.03:1 AAA Atténué 4.55:1 AA 5.33:1 AA Bouton 5.47:1 AA 6.31:1 AA
Variables CSS Copier
: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 Copier
/* 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
Studio Tarifs · Contact
Massage et kiné sous le même toit
Texte atténué en #9e6042.
Commencer 60 minutes
$95
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 15.54:1 AAA 15.93:1 AAA Atténué 4.65:1 AA 5.32:1 AA Bouton 5.59:1 AA 6.58:1 AA
Variables CSS Copier
: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 Copier
/* 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);
}
Palettes de couleurs restauration et hôtellerie
Les restaurants et commerces alimentaires peuvent se permettre des accents plus chauds et plus vifs, car l'appétit réagit à la chaleur. Les fonds sont légèrement crème pour que les photos de plats ne paraissent pas froides sur un blanc pur.
Tomato Table
Tomato Tarifs · Contact
Pizza au feu de bois et grande tablée entre amis
Texte atténué en #b35944.
Commencer Festin en famille
$58
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 16.46:1 AAA 16.01:1 AAA Atténué 4.51:1 AA 5.19:1 AA Bouton 5.49:1 AA 5.85:1 AA
Variables CSS Copier
: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 Copier
/* 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
Espresso Tarifs · Contact
Grains d'origine unique torréfiés chaque mardi
Texte atténué en #916548.
Commencer Sachet de 340 g
$18
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 15.58:1 AAA 15.83:1 AAA Atténué 4.58:1 AA 5.38:1 AA Bouton 7.39:1 AAA 7.00:1 AAA
Variables CSS Copier
: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 Copier
/* 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
Citrus Tarifs · Contact
Paniers de fruits livrés le vendredi matin
Texte atténué en #82732f.
Commencer Petit panier
$32
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 15.77:1 AAA 15.83:1 AAA Atténué 4.57:1 AA 5.50:1 AA Bouton 4.77:1 AA 8.06:1 AAA
Variables CSS Copier
: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 Copier
/* 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
Bistro Tarifs · Contact
Une carte courte qui change au fil des saisons
Texte atténué en #6c743f.
Commencer Menu dégustation
$65
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 15.08:1 AAA 15.61:1 AAA Atténué 4.60:1 AA 5.97:1 AA Bouton 5.87:1 AA 10.54:1 AAA
Variables CSS Copier
: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 Copier
/* 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
Berry Tarifs · Contact
Gâteaux à étages commandés deux jours à l'avance
Texte atténué en #b74e6a.
Commencer Gâteau de six pouces
$42
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 16.21:1 AAA 16.07:1 AAA Atténué 4.54:1 AA 5.06:1 AA Bouton 6.37:1 AA 5.41:1 AA
Variables CSS Copier
: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 Copier
/* 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);
}
Palettes de couleurs création et portfolio
Les portfolios et les studios peuvent prendre plus de risques. Ces palettes associent un texte presque noir à un seul accent fort, comme une affiche imprimée, et laissent les réalisations apporter le reste de la couleur.
Gallery Ink
Gallery Tarifs · Contact
Des identités de marque pour les commerces indépendants
Texte atténué en #816d6d.
Commencer Kit d'identité
$2,400
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 18.09:1 AAA 16.00:1 AAA Atténué 4.63:1 AA 5.13:1 AA Bouton 4.55:1 AA 5.57:1 AA
Variables CSS Copier
: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 Copier
/* 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
Poster Tarifs · Contact
Sérigraphies en tirages de cinquante
Texte atténué en #7d6a6a.
Commencer Tirage A2
$70
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 16.61:1 AAA 16.12:1 AAA Atténué 4.61:1 AA 4.98:1 AA Bouton 7.51:1 AAA 4.69:1 AA
Variables CSS Copier
: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 Copier
/* 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
Neon Tarifs · Contact
Du motion design pour les sorties musicales
Texte atténué en #785ec7.
Commencer Lyric video
$900
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 17.11:1 AAA 16.03:1 AAA Atténué 4.61:1 AA 5.10:1 AA Bouton 5.53:1 AA 5.75:1 AA
Variables CSS Copier
: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 Copier
/* 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
Paper Tarifs · Contact
Des cartes illustrées pour les villes et les sentiers
Texte atténué en #7b6f5e.
Commencer Carte sur mesure
$650
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 13.93:1 AAA 16.01:1 AAA Atténué 4.55:1 AA 5.24:1 AA Bouton 5.42:1 AA 6.09:1 AA
Variables CSS Copier
: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 Copier
/* 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
Film Tarifs · Contact
Des courts documentaires pour les associations
Texte atténué en #45767d.
Commencer Film de trois minutes
$3,200
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 15.02:1 AAA 15.67:1 AAA Atténué 4.66:1 AA 5.83:1 AA Bouton 5.57:1 AA 11.62:1 AAA
Variables CSS Copier
: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 Copier
/* 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);
}
Palettes de couleurs artisans locaux et services à domicile
Les plombiers, couvreurs, électriciens et paysagistes ont besoin d'un bouton d'appel qui ressort sur un écran de téléphone en plein jour. Chaque accent ici est une couleur très visible, avec un libellé qui reste lisible.
Hardhat Orange
Hardhat Tarifs · Contact
Rénovation de cuisines et salles de bains, de A à Z
Texte atténué en #736f62.
Commencer Visite sur place
Gratuit
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 16.12:1 AAA 15.93:1 AAA Atténué 4.66:1 AA 5.42:1 AA Bouton 4.61:1 AA 7.28:1 AAA
Variables CSS Copier
: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 Copier
/* 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
Pipeline Tarifs · Contact
Canalisation éclatée ? Un plombier chez vous ce soir
Texte atténué en #3c71b1.
Commencer Déplacement
$89
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 15.84:1 AAA 15.93:1 AAA Atténué 4.62:1 AA 5.30:1 AA Bouton 6.67:1 AA 6.45:1 AA
Variables CSS Copier
: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 Copier
/* 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
Roofline Tarifs · Contact
Réparations de toiture avec photo de chaque bardeau
Texte atténué en #7f6c6c.
Commencer Inspection
$120
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 15.63:1 AAA 16.00:1 AAA Atténué 4.52:1 AA 5.08:1 AA Bouton 6.54:1 AA 5.36:1 AA
Variables CSS Copier
: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 Copier
/* 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
Fresh Tarifs · Contact
Tonte hebdomadaire et nettoyage de printemps
Texte atténué en #4f7c47.
Commencer Passage hebdomadaire
$45
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 15.53:1 AAA 15.70:1 AAA Atténué 4.54:1 AA 5.79:1 AA Bouton 5.35:1 AA 9.93:1 AAA
Variables CSS Copier
: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 Copier
/* 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
Spark Tarifs · Contact
Mise à niveau de tableaux électriques et pose de bornes de recharge
Texte atténué en #737359.
Commencer Pose de borne
$650
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 16.69:1 AAA 15.83:1 AAA Atténué 4.64:1 AA 5.60:1 AA Bouton 5.19:1 AA 8.67:1 AAA
Variables CSS Copier
: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 Copier
/* 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);
}
Palettes de couleurs nature et plein air
Marques outdoor, fermes, organisateurs d'excursions et produits écologiques. Des accents terreux sur blanc cassé, avec des modes sombres qui évoquent le crépuscule plutôt qu'un éditeur de code.
Forest Trail
Forest Tarifs · Contact
Randonnées guidées en petits groupes
Texte atténué en #4a7958.
Commencer Demi-journée
$55
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 14.81:1 AAA 15.79:1 AAA Atténué 4.63:1 AA 5.83:1 AA Bouton 6.39:1 AA 8.71:1 AAA
Variables CSS Copier
: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 Copier
/* 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
Desert Tarifs · Contact
Visites de canyons au lever et au coucher du soleil
Texte atténué en #976646.
Commencer Visite au coucher du soleil
$75
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 15.05:1 AAA 15.92:1 AAA Atténué 4.51:1 AA 5.26:1 AA Bouton 5.45:1 AA 6.34:1 AA
Variables CSS Copier
: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 Copier
/* 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
Glacier Tarifs · Contact
Location de kayaks à l'heure
Texte atténué en #37749a.
Commencer Deux heures
$40
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 14.97:1 AAA 15.81:1 AAA Atténué 4.67:1 AA 5.59:1 AA Bouton 5.61:1 AA 8.78:1 AAA
Variables CSS Copier
: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 Copier
/* 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
Moss Tarifs · Contact
Des jardins de plantes indigènes peu gourmands en eau
Texte atténué en #68725a.
Commencer Plan de jardin
$300
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 14.71:1 AAA 15.86:1 AAA Atténué 4.63:1 AA 6.00:1 AA Bouton 5.84:1 AA 8.50:1 AAA
Variables CSS Copier
: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 Copier
/* 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
Coastal Tarifs · Contact
Des cottages de plage à quelques pas de l'eau
Texte atténué en #5c727c.
Commencer Par nuit
$210
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 14.59:1 AAA 15.81:1 AAA Atténué 4.68:1 AA 5.59:1 AA Bouton 5.67:1 AA 8.33:1 AAA
Variables CSS Copier
: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 Copier
/* 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);
}
Palettes de couleurs luxe et mode
Les bijoutiers, les hôtels de charme et les marques de mode recherchent en général la sobriété : un fond discret, un texte foncé et un seul accent riche, utilisé avec parcimonie.
Noir Gold
Noir Tarifs · Contact
Bagues serties à la main, sur commande
Texte atténué en #7a6e62.
Commencer Consultation
Gratuit
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 17.30:1 AAA 15.71:1 AAA Atténué 4.59:1 AA 5.73:1 AA Bouton 5.40:1 AA 9.44:1 AAA
Variables CSS Copier
: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 Copier
/* 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
Velvet Tarifs · Contact
Tenues de soirée louées pour le week-end
Texte atténué en #a5538e.
Commencer Location week-end
$120
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 16.46:1 AAA 16.04:1 AAA Atténué 4.60:1 AA 5.10:1 AA Bouton 10.31:1 AAA 5.78:1 AA
Variables CSS Copier
: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 Copier
/* 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
Ivory Tarifs · Contact
Un hôtel de douze chambres surplombant le vieux port
Texte atténué en #3e7c65.
Commencer Chambre côté jardin
$340
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 15.74:1 AAA 15.68:1 AAA Atténué 4.58:1 AA 5.80:1 AA Bouton 7.65:1 AAA 11.18:1 AAA
Variables CSS Copier
: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 Copier
/* 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
Rose Tarifs · Contact
Retouches de robes de mariée, deux essayages inclus
Texte atténué en #a65b57.
Commencer Forfait essayages
$280
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 15.93:1 AAA 16.07:1 AAA Atténué 4.62:1 AA 5.03:1 AA Bouton 6.60:1 AA 5.57:1 AA
Variables CSS Copier
: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 Copier
/* 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
Onyx Tarifs · Contact
Montres révisées par un horloger certifié
Texte atténué en #586db6.
Commencer Révision complète
$450
Choisir l'offre Couleur Clair Sombre Fond Surface Texte Atténué Accent Sur l'accent Contraste Texte 17.25:1 AAA 16.03:1 AAA Atténué 4.54:1 AA 5.05:1 AA Bouton 9.23:1 AAA 4.88:1 AA
Variables CSS Copier
: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 Copier
/* 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);
}
Utiliser les blocs de code
Variables CSS simples
Le bloc CSS définit six variables sur :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:
body { background: var(--bg); color: var(--text); }
.card { background: var(--surface); }
.small { color: var(--muted); }
.button { background: var(--accent); color: var(--on-accent); }Si vous voulez aussi un bouton manuel, copiez les valeurs sombres dans une seconde règle comme :root[data-theme="dark"] { ... } and set that attribute from your toggle.
Tailwind CSS v4
Dans Tailwind v4, les valeurs du thème se trouvent dans le CSS, à l'intérieur d'un bloc @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:
<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>Vous utilisez Tailwind v3 ? Placez plutôt les mêmes valeurs hexadécimales claires sous theme.extend.colors in tailwind.config.js instead. If you would rather generate a full 50 to 950 shade scale from one accent, the générateur de palette de couleurs Tailwind does that.
Design tokens
Pour importer une palette dans un outil de design tokens, associez les six rôles à des tokens au format JSON du Design Tokens Community Group, avec un $type of color and the hex as $value, in a light and a dark group:
{
"color": {
"light": { "accent": { "$type": "color", "$value": "#3b4fe0" } },
"dark": { "accent": { "$type": "color", "$value": "#5869e5" } }
}
}Les outils qui lisent ce format, comme Style Dictionary, peuvent le convertir en valeurs CSS, iOS ou Android.
Erreurs fréquentes avec les palettes de couleurs
Texte gris sur fond gris. Light gray captions are the most common contrast failure. The --muted color in each scheme is the lightest shade of the text hue that still reaches 4.5:1.Deux accents qui se battent. A second bright color for "secondary" buttons usually competes with the primary one. Use an outline button in the text color instead, as the pricing cards here do.La couleur comme seul signal. Red error text with no icon or message fails people who cannot tell red from green. Pair color with words or an icon.Texte blanc sur jaune ou orange clair. Bright yellows and oranges almost never reach 4.5:1 with white. Use dark text on them, or darken the color, as Citrus Market and Spark Electric do.Oublier les états de focus et de lien. The accent also has to work as a focus ring and as link text on the background. Each accent here is at least 4.5:1 against its light background except Gallery Ink and Hardhat Orange, which are above 3:1 and fine for buttons and focus rings but should be underlined when used as link text.
Pour trouver des mises en page sur lesquelles essayer votre palette, parcourez les sections hero and composants de tarifs , and pair the colors with type from notre sélection des meilleures polices pour sites web .
Questions fréquentes
Qu'est-ce qu'une bonne palette de couleurs pour un site web ?
Une palette avec un fond calme qui couvre la majeure partie de la page, une couleur de texte foncée qui atteint au moins 4.5:1 de contraste avec ce fond, et une couleur d'accent réservée aux boutons et aux liens. L'accent doit correspondre à la marque, et le libellé du bouton posé dessus doit lui aussi atteindre 4.5:1.
Combien de couleurs un site web doit-il avoir ?
La plupart des sites fonctionnent avec cinq ou six rôles : le fond, une surface pour les cartes, le texte principal, le texte atténué, un accent et la couleur de texte utilisée sur l'accent. Ajoutez du rouge, de l'ambre et du vert uniquement pour les messages d'erreur, d'avertissement et de réussite.
Qu'est-ce que la règle 60-30-10 en web design ?
C'est un repère de proportions emprunté à la décoration intérieure : environ 60 pour cent de couleur dominante (le fond de page), 30 pour cent de couleur secondaire (texte, cartes et panneaux) et 10 pour cent d'accent (boutons, liens et éléments mis en avant). Elle garde l'accent assez rare pour attirer l'attention.
Quel ratio de contraste les WCAG exigent-elles pour le texte ?
Le niveau AA des WCAG 2.2 exige au moins 4.5:1 pour le texte normal et 3:1 pour le grand texte, c'est-à-dire au moins 18 points, ou 14 points en gras. Le niveau AAA relève ces seuils à 7:1 et 4.5:1. Les boutons, les bordures de champs et les icônes porteuses de sens doivent atteindre 3:1 par rapport à ce qui les entoure.
Puis-je utiliser ces palettes de couleurs sur un site commercial ?
Oui. Nous avons créé ces palettes pour cette page et vous pouvez les utiliser dans n'importe quel projet personnel ou commercial, sans mention obligatoire.
Comment créer une version sombre d'une palette de couleurs ?
Ne vous contentez pas de l'inverser. Utilisez un fond très foncé teinté de la couleur de la marque, un texte blanc cassé et une version plus claire de l'accent pour qu'il reste visible. Revérifiez ensuite le contraste du texte et du libellé du bouton, qui devra peut-être passer du blanc au foncé.
Aperçus
Aperçus clairs ou sombres
Clair
Sombre
Filtrer par ambiance
Toutes
SaaS
Finance
Santé
Restauration
Création
Artisans
Nature
Luxe
Commencer gratuitement · Sans carte bancaire
Voir aussi: Guides
Produit
Pour qui
Fonctionnalités
Ressources
Entreprise
Plan du site