Red Hat SummitCouleurs
Plus qu'un élément esthétique, la couleur influence la perception du ton et de l'importance de notre message. Notre palette se compose principalement de rouge. Soigneusement sélectionnées, nos couleurs sont lisibles et reflètent la personnalité de notre marque et afin d'encourager le public à interagir avec nous.
Un rouge bien spécifique
Chaque marque est associée à une couleur, mais peu le sont autant que nous. Le rouge occupe une place centrale depuis le début de notre histoire et représente notre passion pour l'entraide et la collaboration.
Le rouge Red Hat est pur, sans aucune trace de bleu ni de vert.
#ee0000
RVB 238, 0, 0
CMJN 0, 98, 85, 0 Pantone 1788 C
Le rouge Red Hat (ou red-50) attire l'attention. C'est pourquoi il est à utiliser avec parcimonie. De petites touches de rouge permettent d'identifier notre marque et de mettre en valeur des éléments importants, sans prendre le pas sur le reste.
Couleurs principales
Lorsque nous créons des contenus originaux, nous utilisons essentiellement nos couleurs principales, c'est-à-dire celles de notre logo qui sont le plus associées à notre marque. Grâce aux différentes teintes et nuances de rouge et de gris neutre, nous pouvons ajouter de la profondeur et des ombres.
Couleurs secondaires
Notre palette secondaire dynamise les contenus et complète le rouge Red Hat sans le concurrencer. Limitez-vous à une ou deux couleurs secondaires en plus du rouge Red Hat pour renforcer le message.
Dégradés
Pour enrichir un support et lui donner de la profondeur, nous utilisons de légers dégradés sur les fonds et les éléments importants. Ils ne doivent pas supplanter le reste du visuel, mais l'améliorer.
Notre utilisation des couleurs
Notre identité visuelle ne dépend pas seulement du respect des palettes de couleurs. Il est tout aussi important d'utiliser ces couleurs dans la bonne quantité et au bon endroit. Voici quelques principes fondamentaux qui permettent d'assurer la cohérence dans tous nos contenus.
Optez pour la simplicité
Limitez le nombre de couleurs et utilisez des couleurs stylisées. Faites simple, avec beaucoup d'espace vide qui met en valeur le message et attire l'attention du public sur ce qui compte le plus.
Utilisez le rouge intelligemment
Le rouge Red Hat est une couleur forte. Au lieu de noyer vos visuels de rouge, utilisez cette couleur pour faire ressortir les éléments importants.
Trouvez un équilibre
Remplissez les fonds et les grands éléments avec des teintes claires, des nuances foncées et de légers dégradés. Réservez les couleurs saturées à des zones plus réduites, pour appuyer une information, faciliter la navigation ou enrichir le message.
Vérifiez la répartition des couleurs
Dézoomez et observez les couleurs de l'ensemble du support. Déterminez comment elles s'associent et vers où l'œil est attiré.
Bibliothèques de couleurs
Pour faciliter le choix de couleurs harmonieuses, nous avons mis au point des bibliothèques qui proposent diverses associations des couleurs de nos palettes. Choisissez-en une au début de chaque projet.
Vous trouverez des informations plus précises à propos des couleurs à utiliser dans les interfaces utilisateur sur ux.redhat.com (pour la conception de sites web) et PatternFly (pour la conception de produits).
Vous trouverez des informations plus précises à propos des couleurs à utiliser dans les interfaces utilisateur sur ux.redhat.com (pour la conception de sites web) et PatternFly (pour la conception de produits).
À éviter
N'utilisez pas des couleurs qui n'appartiennent pas à la palette Red Hat.
Ne noyez pas l'image avec du rouge Red Hat (red-50). Le rouge est une couleur forte. Utilisez-la avec parcimonie.
N'ajoutez pas plus de deux couleurs secondaires sur un même élément visuel. Limitez autant que possible le nombre de couleurs.
Pensez à utiliser du rouge Red Hat (red-50). Tous les contenus Red Hat doivent inclure du rouge red-50.
N'utilisez pas des couleurs difficiles à lire. Vérifiez toujours le rapport de contraste entre le texte et les autres éléments visuel, et le fond.
Évitez d'abuser des dégradés. Cette méthode doit servir à enrichir l'image et à lui donner une légère profondeur.
Couleurs supplémentaires
En plus des couleurs principales et secondaires, nous utilisons deux palettes de couleurs supplémentaires dans certains cas. Ces couleurs ne doivent être employées qu'aux fins prévues et ne doivent pas servir de couleurs secondaires.
Palette d'information
La palette d'information est réservée aux états et aux éléments interactifs. Elle sert un but fonctionnel, et non décoratif. Utilisez ces couleurs dans les interfaces, sur les pages web, dans les graphiques ou les diagrammes, dans les rapports et sur d'autres supports d'information.
Palette de couleurs de peau
Nous cherchons à représenter les personnes telles qu'elles sont réellement. Ces couleurs ne doivent être appliquées qu'à la peau des personnes représentées sur des illustrations. Pour chaque personne illustrée, utilisez une seule famille de couleurs de peau.Obtenez plus d'informations sur les illustrations de personnes.
Donner du contexte avec des couleurs
Les couleurs permettent de communiquer rapidement un message ou une idée. Par souci de cohérence, nous utilisons toujours les mêmes associations de couleurs évidentes dans nos interfaces utilisateur, présentations, infographies et diagrammes.
| Couleur | Sens associé | Explication |
| Red Hat | Le rouge est la couleur emblématique de notre marque. Il ne faut pas l'utiliser pour représenter des éléments négatifs. | |
| Danger, baisse | Un événement négatif est survenu, comme une erreur crititique ou une baisse de valeur. | |
| Prudence | Une action non destructrice ou une erreur non critique s'est produite. | |
| Avertissement | Une mesure doit être prise pour éviter une action destructrice ou une erreur critique. | |
| Réussite, hausse | Un événement positif est survenu, comme une action réussie ou une augmentation de valeur. | |
| Lien ou interaction | Un clic sur un élément ou du texte permet de suivre un hyperlien ou de changer d'état. | |
| Information ou conseil | Une information utile est disponible. | |
| Neutre | Un bouton ou une information est indisponible ou sans importance. |
Nuanciers
Notre palette de couleurs se compose de 11 familles différentes. Chaque couleur est identifiée par un numéro, en commençant par 10 pour le ton le plus clair. Les couleurs qui partagent le même numéro dans différentes familles présentent le même niveau de saturation et la même valeur. Visuellement, elles ont le même poids.
Cliquez sur l'un des nuanciers ci-dessous pour en copier le code hexadécimal. Vous pouvez également télécharger les nuanciers.
Couleurs de notre marque
Ces couleurs représentent la marque Red Hat et permettent de l'identifier facilement.
Palette principale
red-10
#fce3e3
red-20
#fbc5c5
red-30
#f9a8a8
red-40
#f56e6e
red-50
(rouge Red Hat)
#ee0000
RVB 238 0 0
CMJN 0 98 85 0
Pantone 1788C
red-60
#a60000
red-70
#5f0000
red-80
#3f0000
white
#ffffff
RVB 255 255 255
CMJN 0 0 0 0
Pantone White
gray-10
#f2f2f2
gray-20
#e0e0e0
gray-30
#c7c7c7
gray-40
#a3a3a3
gray-50
#707070
gray-60
#4d4d4d
gray-70
#383838
gray-80
#292929
gray-90
#1f1f1f
gray-95
(noir expérience utilisateur)
#151515
black
#000000
RVB 0 0 0
CMJN 60 40 40 100
Pantone Black C
Palette secondaire
orange-10
#ffe8cc
orange-20
#fccb8f
orange-30
#f8ae54
orange-40
#f5921b
RVB 245 146 27
CMJN 0 50 100 0
Pantone 144C
orange-50
#ca6c0f
orange-60
#9e4a06
orange-70
#732e00
orange-80
#4d1f00
yellow-10
#fff4cc
yellow-20
#ffe072
yellow-30
#ffcc17
RVB 248 204 23
CMJN 0 15 100 0
Pantone 108C
yellow-40
#dca614
yellow-50
#b98412
yellow-60
#96640f
yellow-70
#73480b
yellow-80
#54330b
teal-10
#daf2f2
teal-20
#b9e5e5
teal-30
#9ad8d8
teal-40
#63bdbd
teal-50
#37a3a3
RVB 55 163 163
CMJN 80 10 30 10
Pantone 2234C
teal-60
#147878
teal-70
#004d4d
teal-80
#003333
purple-10
#ece6ff
purple-20
#d0c5f4
purple-30
#b6a6e9
purple-40
#876fd4
purple-50
#5e40be
RVB 94 64 190
CMJN 85 80 0 0
Pantone 2097C
purple-60
#3d2785
purple-70
#21134d
purple-80
#1b0d33
Couleurs supplémentaires
Palette d'information
Ces couleurs ont un but fonctionnel. Elles sont uniquement destinées aux éléments d'information non décoratifs.
success-green-10
#e9f7df
success-green-20
#d1f1bb
success-green-30
#afdc8f
success-green-40
#87bb62
success-green-50
#63993d
RVB 99 153 61
CMJN 70 0 100 10
Pantone 7737C
success-green-60
#3d7317
success-green-70
#204d00
danger-orange-10
#ffe3d9
danger-orange-20
#fbbea8
danger-orange-30
#f89b78
danger-orange-40
#f4784a
danger-orange-50
#f0561d
RVB 240 86 29
CMJN 0 83 100 0
Pantone 165C
danger-orange-60
#b1380b
danger-orange-70
#731f00
interaction-blue-10
#e0f0ff
interaction-blue-20
#b9dafc
interaction-blue-30
#92c5f9
interaction-blue-40
#4394e5
interaction-blue-50
#0066cc
RVB 0 102 204
CMJN 85 55 0 5
Pantone 2387C
interaction-blue-60
#004d99
interaction-blue-70
#003366
Palette de couleurs de peau
Les familles de couleurs de peau sont décrites différemment des associations de couleurs classiques : les tons froids tendent vers le rose, tandis que les tons chauds tendent vers le jaune et le marron.Obtenez plus d'informations sur les illustrations de personnes.
cool-tone-10
#ffe3dc
cool-tone-20
#f7c8bb
cool-tone-30
#e8a997
cool-tone-40
#ce8873
cool-tone-50
#a66552
cool-tone-60
#724335
cool-tone-70
#40251d
warm-tone-10
#ffe9dc
warm-tone-20
#f9d5c0
warm-tone-30
#edbea1
warm-tone-40
#d8a381
warm-tone-50
#b88564
warm-tone-60
#8e6549
warm-tone-70
#664934
Accessibilité
Une approche ouverte et prévenante vise à créer des expériences équitables et inclusives. Nous nous efforçons de produire des supports (diapositives, pages web, interfaces produit, publications pour réseaux sociaux, etc.) qui sont accessibles à tous.
Les couleurs jouent un rôle important en matière d'accessibilité, puisqu'elles influent sur la perception et l'assimilation des informations chez les personnes qui présentent des troubles de la vision. Nous devons donc prendre des décisions réfléchies concernant les couleurs de nos créations.
Contraste
Le contraste se mesure sous la forme d'un rapport qui indique la différence de luminosité perçue entre la couleur du premier plan et celle de l'arrière-plan. Les contrastes faibles risquent de compliquer la lecture ou la reconnaissance d'éléments, en particulier pour les personnes malvoyantes. Les visuels informatifs, c'est-à-dire ceux qui transmettent des informations essentielles à la compréhension des contenus, doivent respecter les rapports de contraste du niveau AA des règles pour l'accessibilité des contenus web (WCAG).
Les textes des supports Red Hat de petite taille (17 points ou moins) doivent présenter un rapport de contraste d'au moins 4.5:1. Les textes de grande taille (18 points ou plus) et les graphiques informatifs, comme les icônes, doivent présenter un rapport de contraste d'au moins 3:1. Utilisez un outil, tel qu'Adobe Color, pour mesurer le rapport de contraste de vos couleurs et informez-vous sur les rapports de contraste standards des textes et des autres visuels dans les règles pour l'accessibilité des contenus web.
Le rouge red-50 respecte les normes de contraste lorsqu'il est utilisé sur la couleur black.
La couleur white respecte les normes de contraste lorsqu'elle est utilisée sur du bleu sarcelle teal-60.
La couleur black respecte les normes de contraste lorsqu'elle est utilisée sur du rouge red-10.
La couleur white respecte les normes de contraste lorsqu'elle est utilisée sur du violet purple-60.
Le rouge red-50 ne respecte pas les normes de contraste lorsqu'il est utilisé sur du gris gray-80.
La couleur white ne respecte pas les normes de contraste lorsqu'elle est utilisée sur du bleu sarcelle teal-40.
La couleur black ne respecte pas les normes de contraste lorsqu'elle est utilisée sur du rouge red-60.
La couleur white ne respecte pas les normes de contraste lorsqu'elle est utilisée sur du violet purple-30.
Daltonisme
Les personnes souffrant de daltonisme ne perçoivent pas les couleurs de la même manière que la plupart des individus. Elles peuvent donc avoir du mal à interpréter les informations lorsque les éléments d'un graphique ou d'une interface ne se distinguent que par leur couleur. Les formes les plus courantes de daltonisme se traduisent par des difficultés à différencier le rouge et le vert (deutéranopie ou protanopie) ou le bleu et le jaune (tritanopie).
Si votre support ne s'appuie que sur les couleurs pour transmettre son message, les personnes concernées risquent de ne pas le comprendre. Utilisez plutôt du texte ou des icônes en plus de la couleur, et choisissez des couleurs avec différents niveaux de saturation pour distinguer les éléments. Utilisez des outils, tels que Color Oracle, afin de visualiser votre support du point de vue d'une personne daltonienne.
En plus des couleurs, utilisez des libellés pour distinguer chaque section d'un diagramme, d'un graphique ou d'une interface.
La couleur ne suffit pas. En cas de daltonisme, certaines personnes pourraient être incapables de différencier les couleurs et donc de comprendre l'information donnée.
Vibrations
Les teintes qui partagent la même saturation peuvent vibrer lorsqu'elles sont adjacentes. Les bords semblent alors devenir flous. Ces couleurs peuvent se révéler difficiles à regarder et à distinguer, voire provoquer des douleurs chez les personnes qui présentent des troubles de la vision.
Associez les couleurs vives à des couleurs moins saturées et plus neutres.
N'utilisez pas des couleurs d'intensité similaire au même endroit.
En savoir plus
Bases de l'accessibilité en conception numérique
Règles pour l'accessibilité des contenus web
