SQL pour debutants : SELECT, INSERT, UPDATE, DELETE
Introduction SQL (Structured Query Language) est le langage universel pour interagir avec les bases de…
Estimated reading time: 17 minutes
Introduction
La couleur est l’un des outils les plus puissants du design web. Elle influence les émotions, guide l’attention, renforce l’identité de marque et impacte directement les conversions. Une étude de l’Université de Winnipeg révèle que 90% de l’évaluation initiale d’un produit est basée sur la couleur.
Table of Contents
Dans cet article, vous apprendrez à créer des palettes cohérentes, comprendre la psychologie des couleurs, et appliquer ces connaissances pour créer des interfaces web percutantes et accessibles.
La psychologie des couleurs
Comprendre l’impact émotionnel
Chaque couleur évoque des émotions et des associations spécifiques, bien que ces perceptions puissent varier selon les cultures.
Rouge (#DC2626 – #EF4444)
Émotions : Passion, urgence, énergie, danger
Utilisation : Boutons CTA, alertes, promotions
Exemples : YouTube, Netflix, Coca-Cola, Pinterest
/ Utilisation du rouge dans l'interface /
.alert-error {
background-color: #fef2f2; / Rouge très pâle /
border-left: 4px solid #dc2626; / Rouge intense /
color: #991b1b; / Rouge foncé pour le texte /
padding: 1rem 1.5rem;
border-radius: 0.5rem;
}
.button-urgent {
background-color: #dc2626;
color: #ffffff;
padding: 0.875rem 1.75rem;
font-weight: 600;
border-radius: 0.5rem;
box-shadow: 0 4px 12px rgba(220, 38, 38, 0.3);
transition: all 0.3s ease;
}
.button-urgent:hover {
background-color: #b91c1c;
transform: translateY(-2px);
box-shadow: 0 6px 16px rgba(220, 38, 38, 0.4);
}
/ Badge de promotion /
.promo-badge {
background-color: #dc2626;
color: #ffffff;
padding: 0.25rem 0.625rem;
font-size: 0.75rem;
font-weight: 700;
text-transform: uppercase;
border-radius: 0.25rem;
letter-spacing: 0.05em;
}
Attention : Le rouge augmente la pression artérielle et crée un sentiment d’urgence. Utilisez-le avec parcimonie.
Bleu (#2563EB – #3B82F6)
Émotions : Confiance, professionnalisme, calme, sécurité
Utilisation : Interfaces professionnelles, finance, santé, tech
Exemples : Facebook, Twitter, LinkedIn, PayPal, Stripe
/ Palette bleue professionnelle /
:root {
--blue-50: #eff6ff;
--blue-100: #dbeafe;
--blue-200: #bfdbfe;
--blue-300: #93c5fd;
--blue-400: #60a5fa;
--blue-500: #3b82f6; / Couleur principale /
--blue-600: #2563eb;
--blue-700: #1d4ed8;
--blue-800: #1e40af;
--blue-900: #1e3a8a;
}
/ Interface professionnelle /
.header-professional {
background: linear-gradient(135deg, var(--blue-600) 0%, var(--blue-700) 100%);
color: #ffffff;
padding: 1.5rem;
}
.link-primary {
color: var(--blue-600);
text-decoration: none;
font-weight: 500;
transition: color 0.2s ease;
}
.link-primary:hover {
color: var(--blue-700);
text-decoration: underline;
}
/ Carte avec accent bleu /
.card-trusted {
background: #ffffff;
border: 1px solid var(--blue-100);
border-top: 4px solid var(--blue-600);
padding: 2rem;
border-radius: 0.75rem;
box-shadow: 0 2px 8px rgba(37, 99, 235, 0.08);
}
Fait : Le bleu est la couleur préférée de 40% de la population mondiale, ce qui explique son usage dominant dans le web.
Vert (#10B981 – #059669)
Émotions : Nature, croissance, succès, santé
Utilisation : Écologie, finance (positif), santé, confirmations
Exemples : Spotify, WhatsApp, Android, Starbucks
/ Système de notifications avec vert /
.success-message {
background-color: #ecfdf5; / Vert pâle /
border-left: 4px solid #10b981;
color: #065f46;
padding: 1rem 1.5rem;
border-radius: 0.5rem;
display: flex;
align-items: center;
gap: 0.75rem;
}
.success-icon {
width: 24px;
height: 24px;
background-color: #10b981;
border-radius: 50%;
display: flex;
align-items: center;
justify-content: center;
color: #ffffff;
flex-shrink: 0;
}
/ Bouton d'action positive /
.button-confirm {
background-color: #10b981;
color: #ffffff;
padding: 0.75rem 1.5rem;
border: none;
border-radius: 0.5rem;
font-weight: 600;
cursor: pointer;
transition: background-color 0.3s ease;
}
.button-confirm:hover {
background-color: #059669;
}
/ Indicateur de croissance /
.metric-positive {
color: #059669;
font-weight: 600;
}
.metric-positive::before {
content: '↑';
margin-right: 0.25rem;
color: #10b981;
}
Jaune / Orange (#F59E0B – #FB923C)
Émotions : Optimisme, attention, chaleur, créativité
Utilisation : Warnings, highlights, marques joyeuses
Exemples : McDonald’s, IKEA, Snapchat
/ Système d'alertes avec jaune/orange /
.warning-alert {
background-color: #fffbeb; / Jaune très pâle /
border-left: 4px solid #f59e0b;
color: #92400e;
padding: 1rem 1.5rem;
border-radius: 0.5rem;
}
.highlight-text {
background: linear-gradient(120deg, #fef3c7 0%, #fef3c7 100%);
background-position: 0 80%;
background-repeat: no-repeat;
background-size: 100% 40%;
padding: 0 0.25rem;
}
/ Bouton call-to-action énergique /
.button-energetic {
background: linear-gradient(135deg, #f59e0b 0%, #fb923c 100%);
color: #ffffff;
padding: 1rem 2rem;
border: none;
border-radius: 0.5rem;
font-weight: 700;
box-shadow: 0 4px 14px rgba(245, 158, 11, 0.4);
transition: all 0.3s ease;
}
.button-energetic:hover {
transform: translateY(-2px);
box-shadow: 0 6px 18px rgba(245, 158, 11, 0.5);
}
Attention : Le jaune pur (#FFFF00) est difficile à lire. Privilégiez des tons ambre ou dorés.
Violet / Mauve (#7C3AED – #A78BFA)
Émotions : Luxe, créativité, spiritualité, innovation
Utilisation : Marques premium, créatifs, tech innovante
Exemples : Twitch, Yahoo, Hallmark
/ Palette violette premium /
:root {
--purple-50: #faf5ff;
--purple-100: #f3e8ff;
--purple-200: #e9d5ff;
--purple-300: #d8b4fe;
--purple-400: #c084fc;
--purple-500: #a855f7;
--purple-600: #7c3aed; / Principal /
--purple-700: #6d28d9;
--purple-800: #5b21b6;
--purple-900: #4c1d95;
}
/ Design premium /
.premium-card {
background: linear-gradient(135deg, var(--purple-600) 0%, var(--purple-700) 100%);
color: #ffffff;
padding: 2.5rem;
border-radius: 1rem;
box-shadow: 0 10px 30px rgba(124, 58, 237, 0.3);
}
.badge-premium {
background: linear-gradient(135deg, #faf5ff 0%, #f3e8ff 100%);
color: var(--purple-700);
padding: 0.5rem 1rem;
border-radius: 2rem;
font-weight: 600;
font-size: 0.875rem;
border: 2px solid var(--purple-200);
}
.creative-accent {
border-left: 4px solid var(--purple-500);
padding-left: 1.5rem;
color: var(--purple-900);
}
Gris / Neutre (#6B7280 – #1F2937)
Émotions : Neutralité, professionnalisme, sophistication
Utilisation : Textes, arrière-plans, interfaces minimalistes
Exemples : Apple, Nike, The New York Times
/ Palette de gris complète /
:root {
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
}
/ Hiérarchie de texte /
.text-primary {
color: var(--gray-900); / Titres /
}
.text-secondary {
color: var(--gray-700); / Corps de texte /
}
.text-tertiary {
color: var(--gray-500); / Texte secondaire /
}
.text-disabled {
color: var(--gray-400); / Désactivé /
}
/ Arrière-plans /
.bg-subtle {
background-color: var(--gray-50);
}
.bg-medium {
background-color: var(--gray-100);
}
/ Bordures /
.border-light {
border: 1px solid var(--gray-200);
}
.border-medium {
border: 1px solid var(--gray-300);
}
Théorie des couleurs : Les bases
Le cercle chromatique
Le cercle chromatique est l’outil fondamental pour créer des harmonies colorées.
Couleurs primaires
- Rouge : base chaude
- Bleu : base froide
- Jaune : base lumineuse
- Orange = Rouge + Jaune
- Vert = Jaune + Bleu
- Violet = Bleu + Rouge
Couleurs secondaires
Couleurs tertiaires
Mélange d’une primaire et d’une secondaire adjacente.
Les harmonies colorées
1. Monochromatique
Une seule teinte avec différentes saturations et luminosités.
/ Palette bleue monochromatique /
.mono-palette {
--color-base: #3b82f6;
--color-lightest: #eff6ff; / Teinte + blanc /
--color-lighter: #bfdbfe;
--color-light: #60a5fa;
--color-medium: #3b82f6; / Base /
--color-dark: #1d4ed8;
--color-darker: #1e40af;
--color-darkest: #1e3a8a; / Teinte + noir /
}
/ Application cohérente /
.hero-mono {
background: linear-gradient(180deg, var(--color-lightest) 0%, #ffffff 100%);
color: var(--color-darkest);
}
.button-mono-primary {
background-color: var(--color-medium);
color: #ffffff;
}
.button-mono-secondary {
background-color: var(--color-light);
color: var(--color-darkest);
}
.text-mono-subtle {
color: var(--color-dark);
}
.border-mono {
border-color: var(--color-lighter);
}
Avantages : Extrêmement cohérent, facile à maîtriser, élégant
Inconvénients : Peut manquer de dynamisme, risque de monotonie
2. Complémentaire
Deux couleurs opposées sur le cercle chromatique.
/ Palette complémentaire : Bleu (#3B82F6) et Orange (#FB923C) /
:root {
/ Couleur principale /
--primary-50: #eff6ff;
--primary-500: #3b82f6;
--primary-700: #1d4ed8;
/ Couleur complémentaire /
--complement-50: #fff7ed;
--complement-500: #fb923c;
--complement-700: #c2410c;
}
/ Contraste fort pour CTA /
.section-blue-bg {
background: linear-gradient(135deg, var(--primary-500) 0%, var(--primary-700) 100%);
color: #ffffff;
padding: 4rem 2rem;
}
.cta-orange {
background-color: var(--complement-500);
color: #ffffff;
padding: 1rem 2rem;
border-radius: 0.5rem;
font-weight: 700;
/ Se démarque fortement sur fond bleu /
}
.cta-orange:hover {
background-color: var(--complement-700);
}
/ Équilibre subtil /
.card-balanced {
background: #ffffff;
border-top: 4px solid var(--primary-500);
padding: 2rem;
}
.card-balanced .accent {
color: var(--complement-500);
font-weight: 600;
}
Avantages : Contraste maximum, dynamique, énergique
Inconvénients : Peut être agressif si mal dosé
3. Analogue
Trois couleurs adjacentes sur le cercle chromatique.
/ Palette analogue : Bleu-Violet-Rose /
:root {
--analog-blue: #3b82f6;
--analog-violet: #8b5cf6;
--analog-pink: #ec4899;
}
/ Dégradé harmonieux /
.hero-analogous {
background: linear-gradient(135deg,
var(--analog-blue) 0%,
var(--analog-violet) 50%,
var(--analog-pink) 100%
);
color: #ffffff;
padding: 6rem 2rem;
}
/ Boutons variés mais cohérents /
.button-blue {
background-color: var(--analog-blue);
color: #ffffff;
}
.button-violet {
background-color: var(--analog-violet);
color: #ffffff;
}
.button-pink {
background-color: var(--analog-pink);
color: #ffffff;
}
/ Interface colorée mais harmonieuse /
.tag-blue { background: #eff6ff; color: #1e40af; }
.tag-violet { background: #f5f3ff; color: #5b21b6; }
.tag-pink { background: #fdf2f8; color: #9f1239; }
Avantages : Harmonieux, riche, naturel
Inconvénients : Moins de contraste, nécessite maîtrise
4. Triadique
Trois couleurs équidistantes sur le cercle chromatique.
/ Palette triadique : Rouge-Jaune-Bleu (couleurs primaires) /
:root {
--triadic-red: #ef4444;
--triadic-yellow: #f59e0b;
--triadic-blue: #3b82f6;
}
/ Application équilibrée /
.triadic-interface {
/ Couleur dominante : 60% /
background-color: #eff6ff; / Bleu pâle /
/ Couleur secondaire : 30% /
border-left: 8px solid var(--triadic-yellow);
/ Couleur accent : 10% /
padding: 2rem;
}
.triadic-interface h2 {
color: var(--triadic-blue); / Dominant /
}
.triadic-interface .highlight {
background-color: #fef3c7; / Jaune pâle - secondaire /
color: #92400e;
padding: 0.25rem 0.5rem;
border-radius: 0.25rem;
}
.triadic-interface .cta {
background-color: var(--triadic-red); / Accent /
color: #ffffff;
padding: 0.75rem 1.5rem;
border-radius: 0.5rem;
}
Règle 60-30-10 :
Créer votre palette de couleurs
Méthode étape par étape
Étape 1 : Choisir la couleur principale
Basez-vous sur :
/ Exemple : Startup technologique - Bleu moderne /
:root {
--primary: #2563eb; / Bleu confiance + innovation /
}
Étape 2 : Générer les nuances
Créez 9 nuances de votre couleur principale (50 à 900).
/ Méthode manuelle : ajuster HSL /
:root {
/ Base : hsl(217, 91%, 60%) = #3b82f6 /
--primary-50: hsl(217, 91%, 95%); / Très clair /
--primary-100: hsl(217, 91%, 90%);
--primary-200: hsl(217, 91%, 80%);
--primary-300: hsl(217, 91%, 70%);
--primary-400: hsl(217, 91%, 65%);
--primary-500: hsl(217, 91%, 60%); / Base /
--primary-600: hsl(217, 91%, 50%);
--primary-700: hsl(217, 91%, 40%);
--primary-800: hsl(217, 91%, 30%);
--primary-900: hsl(217, 91%, 20%); / Très foncé /
}
Outil recommandé : Tailwind Color Generator génère automatiquement des nuances équilibrées.
Étape 3 : Ajouter les couleurs neutres
Créez une palette de gris complète.
:root {
/ Gris chauds (légère teinte jaune/rouge) /
--neutral-50: #fafaf9;
--neutral-100: #f5f5f4;
--neutral-200: #e7e5e4;
--neutral-300: #d6d3d1;
--neutral-400: #a8a29e;
--neutral-500: #78716c;
--neutral-600: #57534e;
--neutral-700: #44403c;
--neutral-800: #292524;
--neutral-900: #1c1917;
}
Astuce : Les gris légèrement teintés (chauds ou froids) sont plus élégants que les gris purs.
Étape 4 : Ajouter les couleurs sémantiques
Les couleurs pour les états de l’interface.
:root {
/ Succès - Vert /
--success-50: #f0fdf4;
--success-500: #10b981;
--success-700: #047857;
/ Erreur - Rouge /
--error-50: #fef2f2;
--error-500: #ef4444;
--error-700: #b91c1c;
/ Avertissement - Ambre /
--warning-50: #fffbeb;
--warning-500: #f59e0b;
--warning-700: #b45309;
/ Information - Bleu /
--info-50: #eff6ff;
--info-500: #3b82f6;
--info-700: #1d4ed8;
}
Étape 5 : Définir l’utilisation
Créez des variables sémantiques.
:root {
/ Texte /
--text-primary: var(--neutral-900);
--text-secondary: var(--neutral-700);
--text-tertiary: var(--neutral-500);
--text-disabled: var(--neutral-400);
--text-inverse: #ffffff;
/ Arrière-plans /
--bg-primary: #ffffff;
--bg-secondary: var(--neutral-50);
--bg-tertiary: var(--neutral-100);
--bg-inverse: var(--neutral-900);
/ Bordures /
--border-light: var(--neutral-200);
--border-medium: var(--neutral-300);
--border-strong: var(--neutral-400);
/ Interactivité /
--link-default: var(--primary-600);
--link-hover: var(--primary-700);
--link-visited: var(--primary-800);
/ Focus (accessibilité) /
--focus-ring: var(--primary-500);
--focus-ring-offset: #ffffff;
}
Palette complète : Exemple réel
/ Palette pour une application SaaS moderne /
:root {
/ Couleur de marque - Indigo /
--brand-50: #eef2ff;
--brand-100: #e0e7ff;
--brand-200: #c7d2fe;
--brand-300: #a5b4fc;
--brand-400: #818cf8;
--brand-500: #6366f1;
--brand-600: #4f46e5;
--brand-700: #4338ca;
--brand-800: #3730a3;
--brand-900: #312e81;
/ Neutrals - Gris froids /
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-400: #9ca3af;
--gray-500: #6b7280;
--gray-600: #4b5563;
--gray-700: #374151;
--gray-800: #1f2937;
--gray-900: #111827;
/ Sémantiques /
--success: #10b981;
--error: #ef4444;
--warning: #f59e0b;
--info: #3b82f6;
/ Application /
--color-primary: var(--brand-600);
--color-text: var(--gray-900);
--color-text-light: var(--gray-600);
--color-bg: #ffffff;
--color-bg-subtle: var(--gray-50);
--color-border: var(--gray-200);
}
/ Mode sombre /
@media (prefers-color-scheme: dark) {
:root {
--color-primary: var(--brand-400);
--color-text: var(--gray-50);
--color-text-light: var(--gray-400);
--color-bg: var(--gray-900);
--color-bg-subtle: var(--gray-800);
--color-border: var(--gray-700);
}
}
Accessibilité des couleurs
Ratios de contraste WCAG
Les Web Content Accessibility Guidelines définissent des ratios minimum.
Standards WCAG 2.1
Niveau AA (minimum) :
Niveau AAA (optimal) :
/ Exemples de combinaisons conformes AA /
/ Excellent : ratio 15.9:1 /
.text-dark-on-white {
color: #1f2937; / Gris très foncé /
background: #ffffff;
}
/ Bon : ratio 7.2:1 /
.text-medium-on-white {
color: #4b5563; / Gris moyen /
background: #ffffff;
}
/ Limite AA pour texte normal : ratio 4.6:1 /
.text-light-on-white {
color: #6b7280; / Gris /
background: #ffffff;
font-size: 1rem;
}
/ Non conforme : ratio 2.8:1 - À éviter /
.text-too-light {
color: #9ca3af; / Trop clair /
background: #ffffff;
/ OK uniquement pour texte très large ou décoratif /
}
/ Texte blanc sur bleu : ratio 8.6:1 - Excellent /
.text-white-on-blue {
color: #ffffff;
background: #2563eb;
}
/ Bouton avec bon contraste /
.button-accessible {
background: #2563eb; / Bleu /
color: #ffffff; / Blanc /
/ Ratio : 8.6:1 - Conforme AAA /
padding: 0.875rem 1.75rem;
font-size: 1rem;
font-weight: 600;
border-radius: 0.5rem;
}
/ État focus visible /
.button-accessible:focus {
outline: 3px solid #93c5fd; / Bleu clair /
outline-offset: 2px;
/ Ratio focus ring : 3.4:1 minimum requis pour éléments UI /
}
Ne jamais utiliser la couleur seule
La couleur ne doit jamais être le seul indicateur d’information.
/ Mauvais exemple - Couleur seule /
.status-bad {
color: #10b981; / Vert = succès /
}
/ Bon exemple - Couleur + icône + texte /
.status-good {
color: #10b981;
display: flex;
align-items: center;
gap: 0.5rem;
}
.status-good::before {
content: '✓'; / Icône visuelle /
display: inline-block;
width: 20px;
height: 20px;
background: #10b981;
color: #ffffff;
border-radius: 50%;
text-align: center;
line-height: 20px;
font-weight: bold;
}
/ État d'erreur accessible /
.form-error {
border: 2px solid #ef4444; / Bordure rouge /
background-color: #fef2f2; / Fond teinté /
}
.form-error-message {
color: #991b1b;
display: flex;
align-items: flex-start;
gap: 0.5rem;
margin-top: 0.5rem;
font-size: 0.875rem;
}
.form-error-message::before {
content: '⚠'; / Icône d'avertissement /
flex-shrink: 0;
}
/ Graphique accessible /
.chart-line-1 {
stroke: #3b82f6;
stroke-width: 3;
stroke-dasharray: none; / Ligne pleine /
}
.chart-line-2 {
stroke: #10b981;
stroke-width: 3;
stroke-dasharray: 5 5; / Ligne pointillée - différenciation visuelle /
}
Tester votre palette
Aa
Ratio: 8.6:1 - AAA
Aa
Ratio: 5.4:1 - AA
Aa
Ratio: 2.8:1 - Fail
Outils recommandés :
Exemples du monde réel
Stripe
Palette : Bleu violet (#635bff) + neutrals
Stratégie :
/ Inspiré de Stripe /
:root {
--stripe-purple: #635bff;
--stripe-purple-light: #7a73ff;
--stripe-purple-dark: #0a2540;
--stripe-gray: #425466;
--stripe-gray-light: #8898aa;
--stripe-bg: #f6f9fc;
}
Airbnb
Palette : Rausch Rose (#FF5A5F) + neutrals
Stratégie :
/ Inspiré d'Airbnb /
:root {
--airbnb-rausch: #FF5A5F;
--airbnb-fog: #767676;
--airbnb-hof: #484848;
--airbnb-background: #ffffff;
}
Spotify
Palette : Vert vif (#1DB954) + noir
Stratégie :
/ Inspiré de Spotify /
:root {
--spotify-green: #1DB954;
--spotify-black: #191414;
--spotify-white: #FFFFFF;
--spotify-gray: #535353;
}
Notion
Palette : Système multicolore équilibré
Stratégie :
/ Inspiré de Notion /
:root {
--notion-red: #eb5757;
--notion-orange: #f2994a;
--notion-yellow: #f2c94c;
--notion-green: #27ae60;
--notion-blue: #2d9cdb;
--notion-purple: #9b51e0;
--notion-pink: #e91e63;
--notion-gray: #9b9a97;
/ Versions pâles pour backgrounds /
--notion-red-bg: #ffe2dd;
--notion-orange-bg: #ffddb0;
--notion-yellow-bg: #fff4c2;
--notion-green-bg: #d4eee2;
--notion-blue-bg: #d3e5ef;
--notion-purple-bg: #e8defc;
--notion-pink-bg: #ffd9e5;
--notion-gray-bg: #f1f1ef;
}
Outils et ressources
Générateurs de palettes
– Appuyez sur espace pour générer
– Verrouillez les couleurs que vous aimez
– Exporte en CSS, SCSS, SVG
– Basé sur les règles du cercle chromatique
– Extraction de couleurs depuis images
– Accessibilité intégrée
– Entrez une couleur, obtient 10 nuances
– Algorithme sophistiqué
– Export direct en CSS
– Palettes créées par des designers
– Tendances actuelles
– Like et sauvegarde
Outils d’accessibilité
Inspiration
Mise en pratique : Dashboard d’analytics
Créons une interface complète avec une palette cohérente.
Analytics Dashboard - Palette Cohérente
Tableau de bord Analytics
Visiteurs
45,289
+12.5% vs mois dernier
Taux de rebond
42.3%
-0.3% vs mois dernier
Conversions
1,284
+23.1% vs mois dernier
Temps de chargement
2.4s
+0.8s vs mois dernier
Pages populaires
Page
Vues
Taux de rebond
Statut
/accueil
12,450
32.1%
Excellent
/produits
8,920
45.6%
Moyen
/blog
6,430
68.2%
À améliorer
/ Palette de couleurs cohérente /
:root {
/ Primaire - Indigo (confiance, professionnalisme) /
--primary-50: #eef2ff;
--primary-100: #e0e7ff;
--primary-500: #6366f1;
--primary-600: #4f46e5;
--primary-700: #4338ca;
/ Succès - Vert /
--success-50: #f0fdf4;
--success-100: #dcfce7;
--success-500: #22c55e;
--success-600: #16a34a;
--success-700: #15803d;
/ Erreur - Rouge /
--error-50: #fef2f2;
--error-100: #fee2e2;
--error-500: #ef4444;
--error-600: #dc2626;
--error-700: #b91c1c;
/ Avertissement - Ambre /
--warning-50: #fffbeb;
--warning-100: #fef3c7;
--warning-500: #f59e0b;
--warning-600: #d97706;
--warning-700: #b45309;
/ Neutres /
--gray-50: #f9fafb;
--gray-100: #f3f4f6;
--gray-200: #e5e7eb;
--gray-300: #d1d5db;
--gray-500: #6b7280;
--gray-700: #374151;
--gray-900: #111827;
}
{
margin: 0;
padding: 0;
box-sizing: border-box;
}
body {
font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', sans-serif;
background-color: var(--gray-50);
color: var(--gray-900);
line-height: 1.6;
}
.dashboard {
max-width: 1400px;
margin: 0 auto;
padding: 2rem;
}
/ En-tête /
.dashboard-header {
display: flex;
justify-content: space-between;
align-items: center;
margin-bottom: 2rem;
padding-bottom: 1.5rem;
border-bottom: 2px solid var(--gray-200);
}
.dashboard-title {
font-size: 2rem;
font-weight: 700;
color: var(--gray-900);
}
.header-actions {
display: flex;
gap: 1rem;
}
/ Boutons avec hiérarchie claire /
.button {
padding: 0.75rem 1.5rem;
font-size: 0.9375rem;
font-weight: 600;
border-radius: 0.5rem;
border: none;
cursor: pointer;
transition: all 0.2s ease;
}
.button-primary {
background-color: var(--primary-600);
color: #ffffff;
box-shadow: 0 2px 8px rgba(79, 70, 229, 0.2);
}
.button-primary:hover {
background-color: var(--primary-700);
transform: translateY(-1px);
box-shadow: 0 4px 12px rgba(79, 70, 229, 0.3);
}
.button-secondary {
background-color: #ffffff;
color: var(--gray-700);
border: 2px solid var(--gray-300);
}
.button-secondary:hover {
background-color: var(--gray-50);
border-color: var(--gray-400);
}
/ Grille de métriques /
.metrics-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
gap: 1.5rem;
margin-bottom: 2.5rem;
}
.metric-card {
background: #ffffff;
padding: 1.75rem;
border-radius: 0.75rem;
border-left: 4px solid;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
display: flex;
gap: 1.25rem;
transition: transform 0.2s ease, box-shadow 0.2s ease;
}
.metric-card:hover {
transform: translateY(-2px);
box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}
.metric-card-success {
border-left-color: var(--success-500);
}
.metric-card-warning {
border-left-color: var(--warning-500);
}
.metric-card-primary {
border-left-color: var(--primary-500);
}
.metric-card-error {
border-left-color: var(--error-500);
}
.metric-icon {
width: 48px;
height: 48px;
border-radius: 0.5rem;
display: flex;
align-items: center;
justify-content: center;
font-size: 1.5rem;
flex-shrink: 0;
}
.metric-card-success .metric-icon {
background-color: var(--success-50);
color: var(--success-600);
}
.metric-card-warning .metric-icon {
background-color: var(--warning-50);
color: var(--warning-600);
}
.metric-card-primary .metric-icon {
background-color: var(--primary-50);
color: var(--primary-600);
}
.metric-card-error .metric-icon {
background-color: var(--error-50);
color: var(--error-600);
}
.metric-content {
flex: 1;
}
.metric-label {
font-size: 0.875rem;
color: var(--gray-500);
font-weight: 500;
margin-bottom: 0.25rem;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.metric-value {
font-size: 2rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: 0.5rem;
line-height: 1;
}
.metric-change {
font-size: 0.875rem;
font-weight: 500;
}
.metric-change.positive {
color: var(--success-600);
}
.metric-change.negative {
color: var(--error-600);
}
.metric-change.neutral {
color: var(--gray-500);
}
/ Tableau de données /
.data-table-container {
background: #ffffff;
padding: 2rem;
border-radius: 0.75rem;
box-shadow: 0 1px 3px rgba(0, 0, 0, 0.05);
}
.section-title {
font-size: 1.5rem;
font-weight: 700;
color: var(--gray-900);
margin-bottom: 1.5rem;
}
.data-table {
width: 100%;
border-collapse: collapse;
}
.data-table thead {
background-color: var(--gray-50);
border-bottom: 2px solid var(--gray-200);
}
.data-table th {
padding: 0.75rem 1rem;
text-align: left;
font-size: 0.875rem;
font-weight: 600;
color: var(--gray-700);
text-transform: uppercase;
letter-spacing: 0.05em;
}
.data-table td {
padding: 1rem;
border-bottom: 1px solid var(--gray-100);
color: var(--gray-700);
}
.data-table tbody tr:hover {
background-color: var(--gray-50);
}
/ Badges de statut /
.status-badge {
display: inline-block;
padding: 0.375rem 0.75rem;
font-size: 0.75rem;
font-weight: 600;
border-radius: 9999px;
text-transform: uppercase;
letter-spacing: 0.05em;
}
.status-success {
background-color: var(--success-100);
color: var(--success-700);
}
.status-warning {
background-color: var(--warning-100);
color: var(--warning-700);
}
.status-error {
background-color: var(--error-100);
color: var(--error-700);
}
/ Responsive */
@media (max-width: 768px) {
.dashboard {
padding: 1rem;
}
.dashboard-header {
flex-direction: column;
align-items: flex-start;
gap: 1rem;
}
.metrics-grid {
grid-template-columns: 1fr;
}
.data-table-container {
overflow-x: auto;
}
}
Checklist finale
Avant de valider votre palette :
Cohérence :
[ ] Maximum 3-5 couleurs principales ?
[ ] Nuances cohérentes (50-900) pour chaque couleur ?
[ ] Palette de gris complète ?
[ ] Variables CSS définies et nommées sémantiquement ?
Accessibilité :
[ ] Ratio de contraste ≥ 4.5:1 pour texte normal ?
[ ] Ratio de contraste ≥ 3:1 pour texte large ?
[ ] Testée avec simulateurs de daltonisme ?
[ ] Informations transmises autrement que par couleur seule ?
Psychologie :
[ ] Couleurs alignées avec l’identité de marque ?
[ ] Émotions appropriées au public cible ?
[ ] Couleurs sémantiques (succès, erreur, warning) ?
Technique :
[ ] Mode sombre prévu si applicable ?
[ ] Performance (CSS optimisé, pas d’images inutiles) ?
[ ] Documentation de la palette créée ?
Conclusion
La couleur est un outil puissant mais qui nécessite méthode et rigueur. En maîtrisant la psychologie des couleurs, la théorie chromatique et les standards d’accessibilité, vous créerez des interfaces visuellement cohérentes et efficaces.
Points clés à retenir :
Chaque couleur transmet des émotions spécifiques
Utilisez des harmonies colorées (monochromatique, complémentaire, analogue)
Créez une palette de 9 nuances pour chaque couleur principale
Respectez toujours les ratios de contraste WCAG (4.5:1 minimum)
Ne transmettez jamais d’information par la couleur seule
Testez votre palette avec des outils d’accessibilité
Prochaines étapes :
Créez votre première palette de 5 couleurs
Testez-la avec WebAIM Contrast Checker
Appliquez-la à un projet réel
Analysez les palettes de vos sites préférés
Constituez une bibliothèque de palettes réutilisables
La maîtrise de la couleur transformera vos designs d’amateurs en créations professionnelles. Pratiquez régulièrement et n’ayez pas peur d’expérimenter !
Ressources complémentaires :
Coolors.co – Générateur de palettes
Adobe Color – Roue chromatique
UIColors – Générateur de nuances
WebAIM – Test contraste
Refactoring UI – Guide couleurs