Couleurs CSS et Variables

Il existe plusieurs façons de specifier des couleurs en CSS

Différentes façons de spécifier les couleurs

Notation hexadécimale

.element {
  color: #FF6B6B; /* rouge */
  background-color: #4ECDC4; /* cyan */
}

Exemples visuels :

Rouge

#FF6B6B

Cyan

#4ECDC4

Jaune

#FFE66D

Vert menthe

#95E1D3

RGB et RGBA

.element {
  color: rgb(255, 107, 107); /* rouge */
  background-color: rgba(78, 205, 196, 0.8); /* cyan à 80% d'opacité */
}

RGBA = RGB + Alpha

Le quatrième paramètre (alpha) contrôle l’opacité de 0 (transparent) à 1 (opaque)

Exemples visuels :

Rouge RGB

rgb(255, 107, 107)

Cyan RGBA (80%)

rgba(78, 205, 196, 0.8)

Démonstration interactive de l’opacité :

Démonstration RGBA (opacité)

Alpha (Opacité)

Sans transparence

Avec transparence

HSL et HSLA

.element {
  color: hsl(0, 100%, 71%); /* rouge */
  background-color: hsla(176, 53%, 56%, 0.8); /* cyan à 80% d'opacité */
}

HSL = Hue (teinte), Saturation, Lightness (luminosité)

HSL est plus intuitif pour créer des variations d’une même couleur :

:root {
  --color-primary: hsl(176, 53%, 56%);
  --color-primary-dark: hsl(176, 53%, 40%); /* même teinte, moins lumineux */
  --color-primary-light: hsl(176, 53%, 70%); /* même teinte, plus lumineux */
}

Expérimentez avec HSL :

Hue (Teinte)

Saturation

Lightness (Luminosité)

📋

📋

📋

---

Variables CSS (Custom Properties)

Les variables CSS permettent de centraliser vos valeurs de design et de les réutiliser partout.

Syntaxe de base

/* Déclaration des variables dans :root */
:root {
  --color-primary: #FF6B6B;
  --color-secondary: #4ECDC4;
  --color-text: #333333;
  --color-background: #FFFFFF;

  --font-body: 'Open Sans', sans-serif;
  --font-heading: 'Montserrat', sans-serif;

  --spacing-small: 0.5rem;
  --spacing-medium: 1rem;
  --spacing-large: 2rem;
}

/* Utilisation des variables */
body {
  background-color: var(--color-background);
  color: var(--color-text);
  font-family: var(--font-body);
}

h1 {
  color: var(--color-primary);
  font-family: var(--font-heading);
  margin-bottom: var(--spacing-large);
}

button {
  background-color: var(--color-primary);
  color: white;
  padding: var(--spacing-medium);
}

---

Système de design complet avec variables

Voici un exemple interactif d’un système de variables CSS complet appliqué à un site :

❌ Exemple introuvable : mm2b/cours-2-typographie/variables-css

Explorez le code

• Ouvrez le fichier styles.css pour voir toutes les variables définies dans :root
• Observez comment les variables sont utilisées partout dans le CSS
• Essayez de modifier les valeurs des variables pour voir l’effet sur tout le site

---

Pourquoi utiliser des variables CSS ?

Avantages

1. Centralisation : Changez une valeur à un seul endroit
2. Cohérence : Garantit l’uniformité du design
3. Maintenance : Facilite les modifications
4. Lisibilité : Donne du sens aux valeurs (var(--color-primary) vs #FF6B6B)
5. Thèmes : Permet de créer facilement des thèmes (clair/sombre)

Exemple de changement de thème

/* Thème clair */
:root {
  --color-background: #FFFFFF;
  --color-text: #333333;
}

/* Thème sombre */
body.dark-theme {
  --color-background: #1A1A2E;
  --color-text: #FFFFFF;
}

/* Les éléments s'adaptent automatiquement */
body {
  background-color: var(--color-background);
  color: var(--color-text);
}

Démonstration interactive :

Démo : Thème clair / sombre

Titre de la carte

Ceci est un exemple de texte qui s'adapte automatiquement au thème choisi grâce aux variables CSS.

Bouton principal Bouton secondaire

Variables CSS utilisées

:root {

--color-background: #FFFFFF;

--color-text: #333333;

--color-primary: #FF6B6B;

}

.dark-theme {

--color-background: #1A1A2E;

--color-text: #FFFFFF;

--color-primary: #4ECDC4;

}

/* Les éléments utilisent les variables */

.card {

background: var(--color-background);

color: var(--color-text);

}

---

Organisation des variables

Structure recommandée

:root {
  /* ========================================
     COULEURS
     ======================================== */

  /* Couleurs principales */
  --color-primary: #FF6B6B;
  --color-primary-dark: #E85555;
  --color-primary-light: #FF9B9B;

  --color-secondary: #4ECDC4;
  --color-accent: #FFE66D;

  /* Couleurs neutres */
  --color-text: #2C3E50;
  --color-text-light: #7F8C8D;
  --color-background: #FFFFFF;
  --color-background-alt: #FFF9E6;
  --color-border: #E1E8ED;

  /* ========================================
     TYPOGRAPHIE
     ======================================== */

  --font-body: 'Nunito', sans-serif;
  --font-heading: 'Fredoka', sans-serif;

  --font-size-base: 18px;
  --font-size-small: 16px;
  --font-size-h1: 3rem;
  --font-size-h2: 2.5rem;
  --font-size-h3: 2rem;

  /* ========================================
     ESPACEMENTS
     ======================================== */

  --spacing-xs: 0.5rem;
  --spacing-sm: 1rem;
  --spacing-md: 1.5rem;
  --spacing-lg: 2rem;
  --spacing-xl: 3rem;

  /* ========================================
     EFFETS
     ======================================== */

  --radius: 1rem;
  --shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
  --transition: 0.3s ease;
}

Visualisation du système de variables :

Exemple de système de variables CSS

Couleurs principales

--color-primary #FF6B6B

--color-primary-dark #E85555

--color-primary-light #FF9B9B

Couleurs secondaires

--color-secondary #4ECDC4

--color-accent #FFE66D

Couleurs neutres

--color-text #2C3E50

--color-text-light #7F8C8D

--color-background #FFFFFF

--color-border #E1E8ED

---

Nommage des variables

Conventions de nommage

✅ Bon :

• Préfixez par la catégorie : --color-, --font-, --spacing-
• Utilisez des noms descriptifs : --color-primary, --color-text
• Soyez cohérent dans votre nomenclature

:root {
  --color-primary: #FF6B6B;
  --font-heading: 'Montserrat', sans-serif;
  --spacing-md: 1.5rem;
}

❌ Mauvais :

• Noms trop courts : --c1, --f1
• Pas de préfixe : --primary, --text
• Incohérent : --colorPrimary, --font_heading, --spacing-MD

:root {
  --c1: #FF6B6B; /* Pas clair */
  --primary: #FF6B6B; /* Manque de contexte */
  --colorPrimary: #FF6B6B; /* camelCase peu recommandé pour CSS */
}

---

Utilisation avancée

Variables avec valeurs de secours

Specifier une couleurs par defaut si une variable n’est pas définie.

.element {
  /* Si --color-primary n'existe pas, utilise #FF6B6B */
  color: var(--color-primary, #FF6B6B);
}

Variables imbriquées

:root {
  --color-primary: #FF6B6B;
  --button-bg: var(--color-primary); /* Utilise la variable primary */
}

button {
  background-color: var(--button-bg);
}

Calculs avec variables

:root {
  --spacing-base: 1rem;
  --spacing-double: calc(var(--spacing-base) * 2); /* 2rem */
  --spacing-half: calc(var(--spacing-base) / 2); /* 0.5rem */
}

---