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 et afin d'encourager le public à interagir avec nous.

How we use color

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.

Image montrant des teintes et des nuances de rouge, de blanc et de noir

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. 

Image montrant de l'orange, du jaune, du bleu sarcelle et du violet

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.

Image montrant plusieurs dégradés issus de la palette

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.

Core light
Palette de couleur montrant trois utilisations des couleurs principales claires. Le fond peut être gris gray-10 ou blanc. Le texte peut être noir ou rouge red-50. Les autres éléments peuvent prendre toutes les autres teintes et nuances de rouge Red Hat, noir ou blanc. À droite, quatre exemples d'images utilisent la bibliothèque de couleurs principales claires.
Core dark
Palette de couleur montrant trois utilisations des couleurs principales foncées. Le fond peut être noir ou gris gray-80. Le texte peut être blanc ou rouge red-50. Les autres éléments peuvent prendre toutes les autres teintes et nuances de rouge Red Hat, noir ou blanc. À droite, quatre exemples d'images utilisent la bibliothèque de couleurs principales foncées.
Core red
Palette de couleur montrant trois utilisations des couleurs principales rouges. Le fond peut être rouge red-10 ou blanc. Le texte peut être noir ou rouge red-50. Les autres éléments peuvent prendre toutes les autres teintes et nuances de rouge Red Hat, noir ou blanc. À droite, cinq exemples d'images utilisent la bibliothèque de couleurs principales rouges.
Expressive light
Palette de couleur montrant trois utilisations des teintes expressives claires. Le fond peut être gris gray-10, rouge red-10 ou blanc. Le texte peut être noir, violet purple-80 ou rouge red-50. Les autres éléments peuvent prendre toutes les autres teintes et nuances de rouge Red Hat, violet, noir, blanc, bleu sarcelle, orange et jaune. À droite, trois exemples d'images utilisent la bibliothèque de teintes expressives claires.
Expressive dark
Palette de couleur montrant trois utilisations des teintes expressives foncées. Le fond peut être noir ou violet purple-80. Le texte peut être blanc ou rouge. Les autres éléments peuvent prendre toutes les autres teintes et nuances de rouge Red Hat, violet, noir, blanc, bleu sarcelle, orange et jaune. À droite, trois exemples d'images utilisent la bibliothèque de teintes expressives claires.
Interface light
Palette de couleur montrant trois utilisations des couleurs d'interface claires. Le fond est souvent blanc, gris gray-10 ou gris gray-30. Le texte peut être gris gray-95, gris gray-80, bleu interaction-blue-50 ou rouge red-50. Les autres éléments peuvent prendre toutes les teintes et nuances des autres couleurs de la palette Red Hat. À droite, trois exemples d'images utilisent la bibliothèque de couleurs d'interfaces claires.

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).

Interface dark
Palette de couleur montrant trois utilisations des couleurs d'interface foncées. Le fond est souvent gris gray-95, gray-80 ou gray-70. Le texte peut être blanc, gris gray-30, bleu interaction-blue-20 ou rouge red-50. Les autres éléments peuvent prendre toutes les teintes et nuances des autres couleurs de la palette Red Hat. À droite, trois exemples d'images utilisent la bibliothèque de couleurs d'interface foncées.

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

Illustration d'un mauvais usage : présentation utilisant des couleurs qui n'appartiennent pas à la palette Red Hat

N'utilisez pas des couleurs qui n'appartiennent pas à la palette Red Hat.

Illustration d'un mauvais usage : exemple de publicité au fond rouge Red Hat

Ne noyez pas l'image avec du rouge Red Hat (red-50). Le rouge est une couleur forte. Utilisez-la avec parcimonie.

Illustration d'un mauvais usage : image utilisant le rouge et trois couleurs secondaires

N'ajoutez pas plus de deux couleurs secondaires sur un même élément visuel. Limitez autant que possible le nombre de couleurs.

Illustration d'un mauvais usage : publication pour les réseaux sociaux n'utilisant que des couleurs secondaires

Pensez à utiliser du rouge Red Hat (red-50). Tous les contenus Red Hat doivent inclure du rouge red-50.

Illustration d'un mauvais usage : diapositive n'affichant que des couleurs peu contrastées

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.

Illustration d'un mauvais usage : titre de page web utilisant plusieurs dégradés

É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.

Image affichant du bleu information-blue, du vert success-green et de l'orange danger-orange

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.

Image affichant les teintes et les nuances froides cool-tone et chaudes warm-tone

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.

CouleurSens associéExplication
redRed HatLe rouge est la couleur emblématique de notre marque. Il ne faut pas l'utiliser pour représenter des éléments négatifs.
danger-orangeDanger, baisseUn événement négatif est survenu, comme une erreur crititique ou une baisse de valeur.
orangePrudenceUne action non destructrice ou une erreur non critique s'est produite.
yellowAvertissementUne mesure doit être prise pour éviter une action destructrice ou une erreur critique.
success-greenRéussite, hausseUn événement positif est survenu, comme une action réussie ou une augmentation de valeur.
interaction-blueLien ou interactionUn clic sur un élément ou du texte permet de suivre un hyperlien ou de changer d'état.
purpleInformation ou conseilUne information utile est disponible.
grayNeutreUn bouton ou une information est indisponible ou sans importance.
Color swatches

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

Accessibility

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.

Texte et icônes rouge red-50 sur un fond noir

Le rouge red-50 respecte les normes de contraste lorsqu'il est utilisé sur la couleur black.

Texte et icônes blancs sur du bleu teal-60

La couleur white respecte les normes de contraste lorsqu'elle est utilisée sur du bleu sarcelle teal-60.

Texte et icônes noirs sur du rouge red-10

La couleur black respecte les normes de contraste lorsqu'elle est utilisée sur du rouge red-10.

Texte et icônes blancs sur du violet purple-80

La couleur white respecte les normes de contraste lorsqu'elle est utilisée sur du violet purple-60.

Texte et icônes rouge red-50 sur du gris gray-80

Le rouge red-50 ne respecte pas les normes de contraste lorsqu'il est utilisé sur du gris gray-80.

Texte et icônes blancs sur du bleu teal-40

La couleur white ne respecte pas les normes de contraste lorsqu'elle est utilisée sur du bleu sarcelle teal-40.

Texte et icônes noirs sur du rouge red-60

La couleur black ne respecte pas les normes de contraste lorsqu'elle est utilisée sur du rouge red-60.

Texte et icônes blancs sur du violet purple-30

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.

Diagramme circulaire dont chaque section est reliée à un libellé

En plus des couleurs, utilisez des libellés pour distinguer chaque section d'un diagramme, d'un graphique ou d'une interface.

Illustration d'un mauvais usage : diagramme circulaire avec un code de couleurs pour les légendes. Les libellés ne sont pas reliés aux différentes sections.

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.

Exemple de couleurs très contrastées sans vibrations

Associez les couleurs vives à des couleurs moins saturées et plus neutres.

Illustration d'un mauvais usage : exemple de couleurs peu contrastées avec des vibrations

N'utilisez pas des couleurs d'intensité similaire au même endroit.

En savoir plus

Icône de site web

Bases de l'accessibilité en conception numérique

Icône de liste de contrôle

Règles pour l'accessibilité des contenus web

Icône d'œil

Accessibilité visuelle chez Red Hat