Couleurs
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 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. Les petites touches de rouge red-50, à inclure dans chaque création, identifient notre marque et mettent en évidence des éléments importants, sans prendre le pas sur le reste.
Couleurs principales
Pour créer des contenus originaux, utilisez nos couleurs principales, c'est-à-dire celles de notre logo qui sont le plus associées à notre marque. Les différentes teintes et nuances de rouge et de gris neutre permettent d'ajouter de la profondeur et des ombres.
Couleurs expressives
Toujours utilisées en complément de nos couleurs principales et jamais seules, nos couleurs expressives permettent d'apporter de la profondeur et de l'énergie. Elles ont été choisies pour compléter le rouge Red Hat sans le concurrencer.
Couleurs secondaires
Notre palette secondaire comprend des teintes et des nuances d'orange, de jaune, de bleu sarcelle et de violet. Pour un effet maximal, limitez-vous à une ou deux couleurs secondaires par composition ou application.
Dégradés
Dans le cadre du style hybride, certaines couleurs principales et secondaires peuvent être combinées pour créer des dégradés spécifiques qui mettent en valeur de manière subtile les éléments et les fonds. Les dégradés ne doivent pas supplanter le reste du visuel, mais l'améliorer.
Couleurs supplémentaires
Deux palettes de couleurs supplémentaires sont disponibles en plus des couleurs principales et secondaires. Leur utilisation est restreinte aux fins prévues et elles ne peuvent pas être employées en tant que couleurs expressives.
Palette de couleurs d'information
La palette de couleurs 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. Apprenez-en plus sur les illustrations de personnes.
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
Incorrect : n'utilisez pas de couleurs qui n'appartiennent pas à la palette Red Hat.
Incorrect : n'utilisez pas le rouge Red Hat en arrière-plan. Le rouge est une couleur forte. Utilisez cette couleur avec parcimonie.
Incorrect : n'oubliez pas d'inclure du rouge Red Hat. Chaque contenu Red Hat doit en contenir.
Incorrect : n'abusez pas des dégradés. Utilisez-les pour enrichir l'image et lui donner une profondeur tout en nuances. Consultez le manuel sur le style hybride pour en savoir plus.
Incorrect : ne créez pas de dégradés. Utilisez uniquement ceux présentés dans le manuel sur le style hybride.
Incorrect : n'utilisez pas d'images générées par des outils d'IA sans évaluer et ajuster leurs couleurs. Des images de ce type, même créées à l'aide de notre modèle Firefly personnalisé, sont générées sans respecter notre palette de couleurs.
Donner du contexte avec des couleurs
Les couleurs permettent de communiquer rapidement un message ou une idée. Par souci de cohérence, utilisez toujours les mêmes associations de couleurs évidentes dans les interfaces utilisateur, présentations, infographies et diagrammes.
| Couleur | Association | Détails |
| 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. | |
| Erreur, diminution ou échec | Cette couleur indique qu'un événement négatif est survenu, comme une erreur critique ou une diminution de valeur. | |
| Vigilance | Cette couleur permet de signaler qu'une action ou une erreur non destructrice s'est produite. | |
| Avertissement | Cette couleur incite à prendre dès maintenant les mesures nécessaires pour éviter toute action ou erreur destructrice. | |
| Réussite, augmentation | Cette couleur signale qu'un événement positif est survenu, comme une action réussie ou une augmentation de valeur. | |
| Général ou neutre | Cette couleur doit être utilisée pour un bouton ou une information générale non critique. | |
| Lien ou interaction | Cette couleur matérialise les éléments ou le texte sur lesquels cliquer pour suivre un hyperlien ou changer d'état. | |
| Information ou conseil | Cette couleur signale une information utile. | |
| Information secondaire | Cette couleur matérialise un bouton ou une information 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 (informations d'identification Red Hat nécessaires).
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 de couleurs d'information
Ces couleurs ont un but fonctionnel. Elles doivent être employées uniquement aux fins prévues et ne doivent pas être utilisées dans les éléments 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
success-green-80
#183301
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
danger-orange-80
#4c1405
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
interaction-blue-80
#032142
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. Apprenez-en plus 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é
Pour créer des expériences équitables et inclusives, il est nécessaire d'adopter une approche ouverte et prévenante. 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 du fond. 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 éléments graphiques d'information, 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 éléments visuels dans les règles pour l'accessibilité des contenus web.
Correct : le rouge red-50 respecte les normes de contraste lorsqu'il est utilisé sur la couleur black.
Correct : la couleur white respecte les normes de contraste lorsqu'elle est utilisée sur du bleu sarcelle teal-60.
Correct : la couleur black respecte les normes de contraste lorsqu'elle est utilisée sur du rouge red-10.
Correct : la couleur white respecte les normes de contraste lorsqu'elle est utilisée sur du violet purple-60.
Incorrect : le rouge red-50 ne respecte pas les normes de contraste lorsqu'il est utilisé sur du gris gray-80.
Incorrect : la couleur white ne respecte pas les normes de contraste lorsqu'elle est utilisée sur du bleu sarcelle teal-40.
Incorrect : la couleur black ne respecte pas les normes de contraste lorsqu'elle est utilisée sur du rouge red-60.
Incorrect : 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.
Correct : en plus des couleurs, utilisez des libellés pour distinguer chaque section d'un diagramme, d'un graphique ou d'une interface.
Incorrect : 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.
Correct : associez les couleurs vives à des couleurs moins saturées et plus neutres.
Incorrect : 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
