Notre palette de couleurs se compose de 10 familles, chacune comportant sept couleurs en plus du blanc, du noir et des gris. Les familles de couleurs sont divisées en trois sous-palettes selon l'utilisation : couleurs principales, couleurs secondaires et couleurs supplémentaires.

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, ce qui leur confère le même poids visuellement.

Nos couleurs principales sont les couleurs du logo Red Hat et celles les plus étroitement associées à notre marque : rouge, noir et blanc. En cas de doute, commencez toujours avec nos couleurs principales.

Notre couleur de marque principale est la couleur red-50, aussi appelée rouge Red Hat. Sauf rares exceptions, tous les visuels de Red Hat doivent inclure la couleur red-50 pour évoquer notre marque.

Les fonds des visuels et interfaces Red Hat incluent aussi beaucoup de noir, de blanc et de gris afin de faire ressortir les autres contenus. Les 10 nuances de gris neutres entre le noir et le blanc permettent de créer de la profondeur, des ombres et des effets de clair-obscur dans les interfaces utilisateur.

Misez sur les espaces vides

Conformément à la personnalité de notre marque, notre charte graphique privilégie les dispositions ouvertes et aérées. Quelles que soient les couleurs utilisées dans votre visuel, assurez-vous de laisser beaucoup d'espaces vides. Une disposition simple et épurée attire l'attention sur ce qui est important.

Utilisez le rouge avec parcimonie

Le rouge est une couleur forte. Au lieu de l'utiliser sur de grandes surfaces, privilégiez les petites touches pour attirer l'attention sur certaines parties de l'élément visuel.

Pour attirer l'attention sur une alerte ou un message d'erreur important, utilisez l'orange danger plutôt que le rouge Red Hat. Les couleurs de statut sont expliquées ci-après.

Utilisez des nuances plus claires et plus foncées de rouge, de noir et de blanc en petites touches pour créer des ombres ou pour mettre des éléments en évidence. Elles peuvent aussi servir à remplir de grandes surfaces telles que les arrière-plans, afin de faire ressortir le rouge Red Hat.

Utilisez un fond neutre avec des touches de rouge et suffisamment d'espaces vides.

Utilisez la couleur red-50 pour mettre en évidence les éléments importants sur lesquels vous souhaitez attirer l'attention.

Ne remplissez pas une image avec la couleur red-50. Le rouge est une couleur forte. Essayez d'utiliser un fond neutre avant de remplir un espace avec du rouge Red Hat.

Évitez d'utiliser uniquement des nuances de rouge claires ou foncées dans votre image. Utilisez toujours le rouge Red Hat.

N'utilisez pas la couleur red-50 pour la totalité des éléments d'une image. Lorsque tout est mis en évidence, plus rien ne se distingue.

Si nos couleurs principales sont les plus reconnaissables, certaines situations nécessitent le recours à d'autres teintes. Notre palette de couleurs secondaires comprend cinq familles de couleurs : orange, jaune, bleu sarcelle, bleu et violet.

Pour optimiser leur effet, les éléments graphiques Red Hat se limitent à des couleurs sobres et stylisées. Ils sont ainsi épurés et permettent de faire ressortir le rouge caractéristique de Red Hat. Au maximum, sélectionnez deux familles de couleurs secondaires à associer à nos couleurs principales.

Si vous n'arrivez pas à vous décider lors du choix des couleurs secondaires, essayez d'utiliser l'une de nos bibliothèques de couleurs. Les familles associées dans ces bibliothèques se complètent et permettent de conserver l'identité de la marque Red Hat lorsqu'elles sont utilisées ensemble.

Utilisez au maximum deux familles de couleurs secondaires dans vos images. Cette illustration utilise uniquement du rouge, de l'orange et du violet.

N'utilisez pas plus de deux familles de couleurs secondaires pour éviter de surcharger le visuel.

Utilisez toujours des touches de rouge red-50 dans vos visuels pour évoquer la marque Red Hat, même si vous incluez le logo Red Hat.

Votre visuel Red Hat ne doit pas inclure que des couleurs secondaires.

Associez des couleurs claires à des couleurs foncées dans votre visuel pour créer des contrastes. Ces graphiques contiennent les couleurs red-50, blue-70 et orange-30.

Évitez d'utiliser trop de couleurs de saturation identique dans un même visuel. Dans le cas contraire, les couleurs vibrent et manquent de hiérarchie.

Utilisez des couleurs moins vives dans le fond pour faire ressortir les éléments les plus importants de votre visuel.

N'utilisez pas les couleurs les plus vives pour vos fonds afin d'éviter d'alourdir l'image.

En plus des couleurs principales et secondaires, nous utilisons deux palettes de couleurs supplémentaires dans un but précis, le cas échéant. Ces couleurs ne doivent être employées qu'aux fins prévues et ne doivent pas servir de couleurs secondaires.

Palette de couleurs de peau

Nous cherchons à représenter fidèlement les personnes telles qu'elles sont réellement. Pour ce faire, nous utilisons des couleurs de peau réalistes, quelle que soit la palette de couleurs utilisée dans le reste de l'image. En savoir plus sur les illustrations de personnes.

Pour chaque personne illustrée, utilisez une seule famille de couleurs de peau. Les familles de couleurs de peau sont décrites différemment des couleurs classiques. Les tons froids tendent vers le rose, tandis que les tons chauds tendent vers le jaune et le marron.

Utilisez la palette de couleurs de peau uniquement pour colorer la peau des personnes.

N'utilisez pas la palette de couleurs de peau pour colorer d'autres éléments.

Pour chaque personne illustrée, choisissez soit des tons froids, soit des tons chauds.

Ne mélangez pas les tons froids et les tons chauds dans l'illustration d'une même personne.

Palette de couleurs de statut

Les couleurs de statut nous permettent d'attirer l'attention sur un danger ou une réussite. Ces couleurs sont généralement utilisées dans des interfaces, mais vous pouvez aussi les employer autre part si nécessaire. Les couleurs danger ne doivent être utilisées que pour indiquer qu'une erreur ou un problème est survenu. Les couleurs success ne doivent être utilisées que pour indiquer qu'une action s'est correctement déroulée.

Remarque : les couleurs success sont à réserver aux cas particuliers, où il est essentiel d'utiliser du vert dans le support, par exemple pour une communauté EDI ou un visuel évoquant le développement durable.

Utilisez des couleurs de statut uniquement pour communiquer des informations importantes, telles que des erreurs ou des réussites.

N'utilisez pas les couleurs de statut pour d'autres éléments du visuel.

Utilisez les couleurs de statut en petites touches pour attirer l'attention.

N'utilisez pas une couleur de statut comme couleur principale ou comme fond d'un visuel.

Chez Red Hat, nous cherchons à créer des environnements et des expériences qui promeuvent l'inclusion. Pour ce faire, nous nous efforçons de produire des supports (diapositives, documents, pages web, interfaces produit, publications pour réseaux sociaux, etc.) qui sont accessibles à tous.

Les couleurs jouent un rôle important au niveau de l'accessibilité puisqu'elles influent sur la perception et l'assimilation des informations chez les personnes ayant une déficience visuelle. Il est donc important de prendre des décisions réfléchies concernant les couleurs de vos créations.

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 du contenu, doivent respecter les rapports de contraste du niveau AA des règles pour l'accessibilité des contenus web (WCAG).

Ainsi, 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 standard des textes et des autres visuels dans les règles pour l'accessibilité des contenus web.

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 illustrations dont les éléments ne se distinguent que par leur couleur, en particulier les graphiques et les interfaces.

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, ces personnes 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 différencier les éléments. Utilisez des outils tels que Color Oracle afin de visualiser votre support du point de vue d'une personne souffrant de daltonisme.

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

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

red-50 respecte les normes de contraste lorsqu'il est utilisé sur du bleu blue-10.

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

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

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

red-50 ne respecte pas les normes de contraste lorsqu'il est utilisé sur du bleu blue-70.

white ne respecte pas les normes de contraste lorsqu'elle est utilisée sur du violet purple-30.

Si tous les supports et systèmes de conception de Red Hat partagent la même palette de couleurs, certaines applications peuvent justifier l'utilisation de couleurs différentes pour répondre à certains besoins.

Présentations

Une présentation peut être le premier point de contact entre un client ou partenaire et la marque Red Hat. Elle doit donc évoquer la marque et suivre les meilleures pratiques en matière d'accessibilité. Notre modèle de présentation propose des bibliothèques de couleurs.

Accéder au modèle de présentation Red Hat (informations d'identification Red Hat nécessaires)

Illustrations

Nous utilisons des illustrations pour décrire des technologies complexes ou nuancer des idées. L'utilisation d'une palette de couleurs principales avec des touches de rouge vous garantit une illustration conforme à la marque Red Hat. Toutefois, l'ajout de couleurs secondaires peut vous permettre de trouver le ton juste pour votre récit.

En savoir plus sur les normes pour les illustrations Red Hat

Expérience utilisateur

Nos palettes de couleurs sont appliquées dans les propriétés web Red Hat par le biais de jetons de conception et respectent des normes d'accessibilité du Web pour optimiser l'expérience de visionnage sur les écrans.

Consulter le site ux.redhat.com