# Colorer un bloc

Le panneau **Couleurs** règle la couleur du texte, des liens et du fond d’un bloc. Cet article explique comment choisir une couleur, créer une couleur de marque, poser un dégradé et régler le mode sombre. Vous saurez aussi lire le contraste du bloc.

## Avant de commencer

- Le panneau propose les couleurs de votre site : les onze couleurs système et vos couleurs de marque. Un bloc qui utilise une de ces couleurs suit ses changements.
- Les couleurs se règlent par état et par écran : une couleur de fond au survol et une autre sur téléphone. [Se repérer dans l’éditeur](https://lovelyrender.com/fr/documentation/editeur/) montre comment choisir l’état et l’écran.

## Ouvrir le panneau Couleurs

1. Sélectionnez le bloc et ouvrez l’onglet **Styles** de l’inspecteur.
2. Dépliez le panneau **Couleurs** s’il est replié.

Le panneau montre une pastille par emplacement, sous son icône : **Couleur du texte**, **Couleur du lien** et **Couleur de fond**. Sur une liste, une quatrième pastille règle la **Couleur du marqueur**, la puce ou le numéro devant chaque ligne.

![Le panneau Couleurs d’une carte : l’interrupteur Mode clair / sombre et son aide, les pastilles du texte, du lien et du fond, avec la corbeille sur le texte et la flèche circulaire sur le fond, puis les verdicts Mode clair : Contraste 9.3:1. Très lisible (AAA) et Mode sombre : Contraste 3.7:1. Grand texte seulement (AA).](https://static.lovelyrender.com/uploads/2026/10/959-doc-pages-couleurs.png)

Une icône à côté d’une pastille montre d’où vient sa couleur. La corbeille retire une couleur posée sur le bloc. La flèche circulaire rend la couleur du style du bloc et le cercle barré retire la couleur héritée du style.

## Choisir une couleur

1. Cliquez sur la pastille de l’emplacement. Le sélecteur s’ouvre sur l’onglet **Couleur**.
2. Cliquez sur une couleur sous **Système** ou sous **Thème**. La page se met à jour.
3. Facultatif : réglez l’**Opacité** pour rendre la couleur transparente.

![Le sélecteur de la couleur de fond : les onglets Couleur, Dégradé et Filtres, la couleur en cours Primaire, les onze couleurs Système avec Primaire entourée, la ligne Thème et son bouton Modifier la couleur, le curseur Opacité à 100 et le bouton Effacer.](https://static.lovelyrender.com/uploads/2026/10/963-doc-pages-selecteur.png)

| Élément | Rôle |
| --- | --- |
| La couleur en cours | Son nom ou **Personnalisée**, puis sa valeur. Un clic ouvre **Personnaliser la couleur**, un nuancier libre avec transparence. **Fermer** le referme. |
| **Système** | Les onze couleurs système de votre site. |
| **Thème** | Vos couleurs de marque. |
| **Opacité** | De 0 à 100, pour une couleur de **Système** ou de **Thème**. Valeur par défaut : 100. |
| **Effacer** | Retire la couleur de cet emplacement. |

| Couleur | Rôle |
| --- | --- |
| **Référence sombre**, **Référence claire** | Les deux références du calcul de contraste. En mode clair, la sombre colore le texte et la claire le fond de la page. En mode sombre, elles échangent leurs places. |
| **Neutre claire**, **Neutre sombre** | Le fond des cartes et des panneaux, en mode clair puis en mode sombre. La neutre sombre colore aussi les bordures et le texte secondaire en mode clair. |
| **Primaire** | La couleur principale de la marque : boutons principaux, liens et onglet sélectionné. |
| **Secondaire** | La couleur d’appui : boutons secondaires et liens survolés. |
| **Accent** | Une touche de couleur là où la marque pèserait trop, par exemple un badge. |
| **Danger**, **Avertissement**, **Information**, **Succès** | Les messages du site : erreur, avertissement, information et envoi réussi. |

Préférez une couleur du site à une couleur personnalisée. Le jour où la charte change, le bloc suit sans retouche.

## Créer une couleur de marque

1. Dans le sélecteur, cliquez sur la couleur en cours et composez votre teinte dans **Personnaliser la couleur**.
2. À côté de **Thème**, cliquez sur **Ajouter une couleur** (+). Le bouton apparaît une fois la teinte composée, tant qu’aucune couleur du site n’est choisie.
3. Facultatif : donnez-lui un **Nom**, par exemple « Bleu principal ».
4. Pour une autre teinte en mode sombre, activez **Ajouter une valeur pour le mode sombre** et choisissez la **Couleur en mode sombre**.
5. Cliquez sur **Enregistrer**. La couleur s’applique au bloc et rejoint **Thème** sur tous les blocs du site.

Sous le nuancier, le formulaire donne le contraste de la couleur, par exemple **Contraste 7.1:1. Très lisible (AAA).** Il la mesure contre celle de vos deux références qui s’y lit le mieux : c’est le meilleur résultat possible avec cette couleur.

![Le formulaire d’une couleur de marque : le nuancier sur un vert foncé, la valeur 22613D, la ligne Contraste 7.1:1. Très lisible (AAA) et l’interrupteur Ajouter une valeur pour le mode sombre activé, au-dessus de Couleur en mode sombre.](https://static.lovelyrender.com/uploads/2026/10/148-design-contraste.png)

Le bouton **Modifier la couleur** (crayon) change la couleur choisie pour tous les blocs qui s’en servent, couleurs système comprises. Le nom d’une couleur système ne se change pas.

Sans valeur pour le mode sombre, une couleur que vous avez créée garde la même teinte dans les deux modes.

**Remarque :** Créer ou modifier une couleur, un dégradé ou un filtre est réservé aux administrateurs du site. Les autres rôles ne voient ni **Ajouter une couleur** ni **Modifier la couleur**, ni les boutons des dégradés et des filtres : ils choisissent parmi les entrées existantes.

**Remarque :** Une couleur ne se supprime pas tant qu’un contenu ou un style l’utilise. [Régler vos couleurs, vos polices et vos échelles](https://lovelyrender.com/fr/documentation/design-system/) décrit l’écran **Design system**.

## Poser un dégradé

Un dégradé est une entrée du design system : vous le créez une fois et vous le réutilisez partout. Le modifier change tous les blocs qui le portent. L’onglet **Dégradé** s’affiche pour la couleur du texte et la couleur de fond.

1. Dans le sélecteur, ouvrez l’onglet **Dégradé**.
2. Choisissez un dégradé dans la liste, ou cliquez sur **Ajouter un dégradé** (+) pour en créer un.
3. Dans le formulaire, donnez un **Nom**, facultatif, puis composez le dégradé : ses arrêts de couleur, son type linéaire ou radial et son angle.
4. Pour le mode sombre, activez **Ajouter une variante pour le mode sombre**. La variante garde la forme et les positions de la version claire, seules ses couleurs changent.
5. Cliquez sur **Enregistrer**. Un aperçu du dégradé s’affiche sous la liste.

**Modifier le dégradé** (crayon) change le dégradé choisi pour tout le site. **Effacer** le retire du bloc et le laisse dans le design system. Un dégradé sans arrêt ne s’enregistre pas : **Choisissez un dégradé avant d’enregistrer.**

| Réglage | Effet | Valeur par défaut |
| --- | --- | --- |
| **Appliquer un motif** | Répète le dégradé en mosaïque au lieu de remplir tout le fond. Le réglage appartient au bloc : le même dégradé peut être répété ici et étiré ailleurs. | Désactivé |
| **Taille du motif** | La taille d’une tuile, en X et en Y, en `px`, `em`, `rem`, `%`, `vw` ou `vh`. | 32px sur chaque axe |

Un emplacement prend une couleur pleine ou un dégradé, jamais les deux. Avec une couleur pleine posée, l’onglet **Dégradé** affiche **Une couleur pleine est posée. Effacez-la pour utiliser un dégradé.** et propose de l’effacer. L’inverse affiche **Un dégradé est posé. Effacez-le pour utiliser des couleurs pleines.**

**Remarque :** Un texte en dégradé occupe la place du fond. Le panneau désactive alors la couleur de fond et affiche **Un texte en dégradé ne peut pas avoir de couleur de fond.**

## Flouter ce qui passe derrière un bloc

L’onglet **Filtres** s’affiche pour la couleur de fond seulement. Un filtre agit sur ce qui se trouve derrière le bloc, par exemple la page qui défile sous un bandeau. Un filtre est une entrée du design system, comme un dégradé. Le panneau **Effets** utilise les mêmes filtres.

| Réglage | Plage | Valeur neutre |
| --- | --- | --- |
| **Flou** | 0 à 40 px | 0 |
| **Luminosité** | 0 à 200 % | 100 |
| **Contraste** | 0 à 200 % | 100 |
| **Saturation** | 0 à 300 % | 100 |
| **Niveaux de gris** | 0 à 100 % | 0 |
| **Sépia** | 0 à 100 % | 0 |
| **Inversion** | 0 à 100 % | 0 |
| **Rotation de teinte** | -180 à 180° | 0 |

Votre site reçoit au départ le filtre **Flou léger**, un flou de 12 px. Un filtre dont tous les curseurs sont neutres ne s’enregistre pas : **Bougez au moins un curseur avant d’enregistrer.**

**Attention :** Un filtre ne se voit qu’à travers un fond transparent. Sur un fond opaque, l’onglet affiche **Les filtres demandent une couleur de fond qui ne soit pas entièrement opaque.** Baissez d’abord l’**Opacité** du fond.

## Régler le mode sombre

En mode sombre, une couleur du site prend sa valeur sombre si elle en a une. Pour choisir vous-même les couleurs sombres d’un bloc, activez l’interrupteur **Mode clair / sombre**. Il est désactivé par défaut.

1. En haut du panneau **Couleurs**, activez **Mode clair / sombre**. Chaque pastille se dédouble, la claire à gauche et la sombre à droite.
2. Cliquez sur une pastille. Le sélecteur montre deux éditeurs, **Clair** et **Sombre**.
3. Choisissez la couleur de chaque mode.

La page montre les couleurs sombres quand le système du visiteur est en sombre, ou quand il a choisi **Sombre** dans un [sélecteur d’apparence](https://lovelyrender.com/fr/documentation/bloc-selecteurs-d-apparence/). Un emplacement sans couleur sombre garde sa couleur claire dans les deux modes. Pour vérifier le rendu, cliquez sur **Aperçu en mode sombre** dans la barre du haut.

- Le bouton **Échanger les couleurs claire et sombre** apparaît dès qu’une variante porte une valeur. Il échange les deux couleurs de l’emplacement sur tous ses états.
- Les deux variantes d’un emplacement sont du même type, pleine ou dégradé.
- La variante sombre d’un dégradé appartient au dégradé : elle se règle dans son formulaire.
- Désactiver l’interrupteur garde vos couleurs sombres. Elles reviennent quand vous le réactivez.

## Colorer les liens d’un bloc

Un lien écrit dans un texte suit le style **Lien** : votre couleur **Primaire**, puis **Secondaire** au survol. Sur une section, une carte ou un paragraphe, la **Couleur du lien** colore autrement les liens de ses textes. Elle donne par exemple des liens clairs à un pied de page sombre.

Plusieurs réglages peuvent viser le même lien. Dans cet ordre, le dernier l’emporte :

1. le style **Lien**, pour tous les liens du site ;
2. un autre style choisi pour le lien lui-même ;
3. la couleur des liens d’un style posé sur un bloc qui contient le lien ;
4. la **Couleur du lien** réglée sur un bloc qui contient le lien ;
5. la couleur réglée sur le lien lui-même, dans son onglet **Styles**.

Sans couleur de lien choisie, un bloc au fond tiré des couleurs du site donne à ses liens la couleur la plus lisible sur ce fond. Un fond personnalisé, transparent ou en dégradé ne déclenche pas ce calcul.

La **Couleur du lien** n’est pas proposée sur un bloc qui est lui-même un lien. C’est le cas d’un **Bouton**, d’un lien de menu, d’une entrée de table des matières, de liste de pages ou de sélecteur de langue, d’une étape du fil d’Ariane ou d’un **Titre** lié. La couleur d’un tel bloc est sa couleur de texte.

## Lire le contraste du bloc

Sous les pastilles, le panneau compare la couleur du texte du bloc à sa couleur de fond, celles de son style comprises. Il donne leur rapport de contraste et son verdict.

| Verdict | Rapport | Usage |
| --- | --- | --- |
| **Très lisible (AAA).** | 7:1 et plus | Confortable pour tous, même en petit texte. |
| **Lisible (AA).** | De 4,5:1 à 7:1 | Le niveau attendu pour un texte courant. |
| **Grand texte seulement (AA).** | De 3:1 à 4,5:1 | Un grand titre, pas un paragraphe. |
| **Trop faible. Le texte sera difficile à lire sur cette couleur.** | Moins de 3:1 | À éviter. |

Quand une des deux couleurs change en mode sombre, le panneau donne un verdict par mode, précédé de **Mode clair :** et de **Mode sombre :**. Sur un site qui ne montre qu’un mode, seul le verdict de ce mode s’affiche.

Le verdict ne s’affiche pas quand une des deux couleurs est un dégradé ou une couleur transparente. Il ne s’affiche pas non plus sur un bloc sans fond ou sans couleur de texte. La couleur que verra le visiteur n’est alors pas connue. Posez une couleur pleine et opaque des deux côtés pour l’obtenir.

**Remarque :** Le verdict ne pèse ni la couleur des liens ni une image de fond. Aucun verdict n’empêche d’enregistrer ou de publier. [Vérifier l’accessibilité de vos pages](https://lovelyrender.com/fr/documentation/accessibilite/) décrit les autres contrôles.

## Voir aussi

- [Poser un arrière-plan](https://lovelyrender.com/fr/documentation/arriere-plans/)
- [Régler vos couleurs, vos polices et vos échelles](https://lovelyrender.com/fr/documentation/design-system/)
- [Vérifier l’accessibilité de vos pages](https://lovelyrender.com/fr/documentation/accessibilite/)
- [Enregistrer le style d’un bloc](https://lovelyrender.com/fr/documentation/styles-enregistres/)