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 montre comment choisir l’état et l’écran.
Ouvrir le panneau Couleurs
- Sélectionnez le bloc et ouvrez l’onglet Styles de l’inspecteur.
- 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.
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
- Cliquez sur la pastille de l’emplacement. Le sélecteur s’ouvre sur l’onglet Couleur.
- Cliquez sur une couleur sous Système ou sous Thème. La page se met à jour.
- Facultatif : réglez l’Opacité pour rendre la couleur transparente.
| É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
- Dans le sélecteur, cliquez sur la couleur en cours et composez votre teinte dans Personnaliser la couleur.
- À 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.
- Facultatif : donnez-lui un Nom, par exemple « Bleu principal ».
- Pour une autre teinte en mode sombre, activez Ajouter une valeur pour le mode sombre et choisissez la Couleur en mode sombre.
- 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 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.
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.
- Dans le sélecteur, ouvrez l’onglet Dégradé.
- Choisissez un dégradé dans la liste, ou cliquez sur Ajouter un dégradé (+) pour en créer un.
- 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.
- 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.
- 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.
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.
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.
- En haut du panneau Couleurs, activez Mode clair / sombre. Chaque pastille se dédouble, la claire à gauche et la sombre à droite.
- Cliquez sur une pastille. Le sélecteur montre deux éditeurs, Clair et Sombre.
- 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. 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 :
- le style Lien, pour tous les liens du site ;
- un autre style choisi pour le lien lui-même ;
- la couleur des liens d’un style posé sur un bloc qui contient le lien ;
- la Couleur du lien réglée sur un bloc qui contient le lien ;
- 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.