946201038, xxmmxx

Les couleurs hexadécimales sont le langage visuel du Web. Lorsque vous souhaitez qu’une page Web (ou une application Web) affiche une certaine couleur, vous devez indiquer le code hexadécimal.

Qu’est-ce qu’un code couleur hexadécimal ?

1215017532,VladSt

Un code couleur hexadécimal est un code à 6 symboles composé d’un maximum de trois éléments à 2 symboles. Chacun des éléments à 2 symboles exprime une valeur de couleur de 0 à 255.

• Élément 1 : valeur rouge
• Élément 2 : valeur verte
• Élément 3 : valeur bleue

Le code est écrit à l’aide d’une formule qui transforme chaque valeur en un code alphanumérique unique à 2 chiffres. Par exemple, le code RVB (224, 105, 16) est E06910 en code hexadécimal.

Pourquoi ? On ne va pas se mentir, c’est compliqué. Le système hexadécimal nécessite l’introduction de 16 symboles représentant les 16 premiers entiers naturels, appelés chiffres hexadécimaux : 0, 1, 2, 3, 4, 5, 6, 7, 8, 9, A, B, C, D, E et F. Si vous êtes curieux, voici une bonne explication. Si vous vous demandez simplement ce que cela signifie pour vous en tant que graphiste, voilà les choses importantes à savoir :

• en utilisant les codes hexadécimaux, vous pouvez afficher plus de 16 millions de couleurs uniques, ce qui est considéré comme plus que ce que l’œil humain peut percevoir.
• Vous pouvez utiliser les sélecteurs de couleurs ou convertisseurs pour créer le code pour vous.

Pourquoi utiliser le code hexadécimal au lieu de chiffres ? Parce que si vous utilisiez des nombres, chaque valeur rouge, verte ou bleue de 0 à 255 pourrait être un, deux ou trois chiffres possibles. Au total, le code peut être composé de trois chiffres ou de neuf. Cela pourrait causer de la confusion pour les systèmes lisant les codes mais surtout parmi les personnes qui réalisent le codage. Le fait que chaque valeur soit de six symboles, quoi qu’il arrive, réduit les risques d’erreurs.

À quoi correspondent les codes de couleur hexadécimaux ?

525330557, Thot_Adan

Les codes de couleur hexadécimaux sont des valeurs qui indiquent à l’écran la quantité de couleur à afficher. Les valeurs sont un code spécial qui représente les valeurs de couleur de 0 à 255.

Si le rouge, le vert et le bleu sont tous au minimum 0 (représenté par « 00 » dans le code), la couleur exprimée est la couleur noire. Si le rouge, le vert et le bleu sont tous au maximum de 255 (représenté par « ff » dans le code), la couleur exprimée est la couleur blanche.

Les valeurs de couleur hexadécimales peuvent se combiner pour afficher plus de 16 millions de couleurs différentes. Alors, bien sûr, la plupart se situera quelque part entre les deux. Vous pouvez toujours utiliser un convertisseur pour convertir les valeurs numériques RVB en code hexadécimal pour vous.

Mais il peut être utile de mémoriser quelques-unes des couleurs hexadécimales les plus courantes. Cette connaissance se révèle utile si vous concevez vite avec un codeur.

Codes de couleur hexadécimales populaires

Couleur	RVB	Code couleur hexadécimal
Noir	(0, 0, 0)	#000000
Bleu	(0, 0, 255)	#0000FF
Gris	(128, 128, 128)	#808080
Vert	(0, 128, 0)	#008000
Violet	(128, 0, 128)	#800080
Rouge	(255, 0, 0)	#FF0000
Blanc	(255, 255, 255)	#FFFFFF

Codes couleur hexadécimaux uniques

Couleur	RVB	Code couleur hexadécimal	Utilisation
AliceBleu	(240, 248, 255)	#F0F8FF	Arrière-plan subtil pour une page e-commerce ou corporate
Corail	(255, 127, 80)	#FF7F50	Couleur accentuée calme
Brique de feu	(178, 34, 34)	#B22222	Couleur accentuée agressive
Rose vif	(255, 105, 180)	#FF69B4	Couleur accentuée ludique
Mousse citron	(255, 250, 205)	#FFFACD	Fond romantique pour un mariage ou autre page personnelle

Comment fonctionnent les couleurs hexadécimales ?

1226241649, Selman Keles

Les couleurs HEX sont basées sur le modèle de couleur RVB utilisé depuis les tout débuts de la photographie.

La théorie derrière le modèle est que vous pouvez créer pratiquement n’importe quelle couleur que l’œil peut voir en attribuant différentes combinaisons de valeurs de rouge, vert et bleu. Le modèle de couleur RVB est utilisé par les téléviseurs, les appareils photo numériques et les vidéoprojecteurs en plus de pratiquement tous les écrans d’ordinateur et de téléphone existants.

Sur le Web et la plupart des applications numériques, une échelle de valeurs de couleur de 0 à 255 est utilisée. Vous (ou un programmeur) indiquez à l’écran la quantité de rouge, de bleu et de vert à afficher. Cette combinaison crée la couleur que le spectateur voit.

Vous avez une grande liberté pour choisir la couleur que vous voulez. Le nombre total de combinaisons possibles est de 16 777 216, ce qui est plus que ce que l’œil humain peut réellement distinguer.

Quelle est la différence entre l’utilisation de codes RVB et hexadécimaux ?

1221544644,devastudios

Les codes de couleur hexadécimaux sont préférés par les programmeurs car ils sont prévisibles. Ils sont toujours à six chiffres, quelle que soit la couleur. Les valeurs RVB peuvent comporter jusqu’à trois chiffres et jusqu’à neuf.

Vous n’êtes pas obligé d’utiliser des codes hexadécimaux dans la conception Web. Si vous codez une page en HTML, vous pouvez également utiliser les valeurs RVB ou même les noms de couleurs.

Voici à quoi ressemblerait le code HTML si vous codiez, par exemple, un arrière-plan aigue-marine pour une page Web.

• Code couleur HEX pour l’aigue-marine : <div style= »background-color:#7FFFD4″></div>
• Code couleur RVB pour l’aigue-marine : <div style= »background-color:rgb(127, 255, 212) »></div>
• Code couleur pour l’aigue-marine : <div style= »background-color:aquamarine »></div>

Même si vous pouvez spécifier le nom ou le code RVB, cela ne signifie pas que vous devriez le faire. Pour réduire le risque d’erreur dans votre projet, utilisez un sélecteur ou un convertisseur à roue de couleur HEX pour générer le code hexadécimal souhaité. De cette façon, il y a moins de chance qu’un codeur actuel ou futur essaie de réaliser la conversion lui-même et transforme votre jolie page Web en quelque chose d’inesthétique.

Travailler avec des couleurs hexadécimales

1203440092,Concepteur

Si vous avez l’habitude de travailler avec des couleurs dans Adobe Illustrator ou pour l’impression, travailler avec des couleurs hexadécimales sur le Web est un peu un ajustement. Voici quelques éléments à connaître pour que votre projet se déroule bien.

Méfiez-vous des bandes de couleur

Avec 16 777 216 couleurs potentielles, les codes de couleur hexadécimaux vous offrent de nombreuses options pour les couleurs contrastées. Mais comme chaque pixel doit afficher une couleur unique, les couleurs hexadécimales ne vous permettent pas de bien mélanger les nuances de différentes couleurs.

Lorsque les concepteurs Web tentent de créer des dégradés à l’aide de couleurs hexadécimales, les résultats ne sont pas toujours ceux attendus. Parce que les nuances ne se mélangent pas, l’affichage finit par afficher des bandes de couleur distinctes (bandes de couleur).

Les bandes de couleur sont plus susceptibles d’apparaître sur les appareils plus anciens qui ne sont pas en mesure d’afficher des millions de couleurs. En CSS moderne, vous pouvez programmer des dégradés pour éliminer le problème des bandes de couleur. Sur les écrans modernes, les bandes de couleurs sont plus courantes dans les photos de dégradés naturels comme le ciel et les arcs-en-ciel, où les millions de couleurs visibles à l’œil nu sont compressées pour économiser de l’espace de fichier.

Gagnez du temps avec les ressources de la palette de couleurs hexadécimales

Lorsque vous développez un look unique rapidement, sélectionner des couleurs complémentaires parmi les 16 millions disponibles est une tâche compliquée. Heureusement, d’autres concepteurs ont réalisé une partie du travail pour vous en créant des bases de données de palettes de couleurs hexadécimales et des sélecteurs interactifs.

Palettes de couleurs hexadécimales : parcourez et recherchez des milliers de combinaisons de couleurs hexadécimales créées par la communauté sur Palettes de couleurs hexadécimales.

C’est parti ? Explorez page par page les palettes nommées. Chaque palette a un nom pour vous donner une idée de son style et identifie les six couleurs hexagonales. Cliquez sur le nom du graphiste pour voir les autres palettes de couleurs qu’il a déjà créées.

Les palettes de couleurs Color-Hex sont une ressource fantastique pour l’inspiration des couleurs hexadécimales.

Coolors : la ressource de couleur hexadécimale Coolors combine inspiration et fonctionnalité pour accélérer le processus de conception.

Vous pouvez parcourir les palettes de couleurs tendance pour voir ce qui a retenu l’attention des autres graphistes. Chaque palette de tendances peut être enregistrée dans une boîte de favoris personnelle si vous créez un compte.

Ou utilisez leur générateur de palette ultra-rapide pour créer des palettes en fonction des couleurs que vous souhaitez utiliser. Une fonctionnalité gain de temps de Coolors est la possibilité de « verrouiller » une couleur (ou des couleurs), puis de générer des couleurs complémentaires supplémentaires en appuyant sur votre barre d’espace. Les nouveaux looks défilent à une vitesse proche de la distorsion. Attendez juste celui qui attire votre attention.

Coolors est également disponible via les applis : Application iOS ou Extension Adobe .

Faites correspondre les couleurs hexadécimales avec d’autres éléments de graphisme

Si vous concevez pour un site existant ou si vous souhaitez faire correspondre d’autres éléments, vous devez savoir avec quelles couleurs hexadécimales vous travaillez sur le site. C’est là qu’un bon sélecteur de couleurs est précieux. Avec ImageColorPicker, vous pouvez télécharger n’importe quelle image et voir quelles couleurs hexadécimales sont représentées.

Un autre outil intéressant est la Pipette ColorPick, une extension de navigateur Web Google Chrome qui vous permet de voir la couleur hexadécimale de n’importe quel élément d’une page Web. Si vous aimez une couleur sur un site, utilisez la pipette pour voir de quelle couleur il s’agit exactement.

Si c’est vous qui choisissez les images et les autres éléments du site, vous aurez besoin d’un moyen simple d’identifier les ressources qui correspondent à votre palette de couleurs hexadécimales. Sur iStock, vous pouvez ajouter une couleur hexadécimale comme filtre à n’importe quelle recherche. Saisissez le code ou sélectionnez-le dans le sélecteur de couleurs, puis saisissez vos mots-clés de recherche. Le site renverra des images associées qui correspondent étroitement à la couleur que vous avez saisie.

Êtes-vous prêt.e à vous lancer et débuter votre recherche d’images pour votre palette de couleurs hexadécimales ? Rendez-vous ici pour trouver les fichiers pour compléter votre projet.