Un code couleur hexadécimal (ou couleurs HEX) , c’est cette suite de caractères précédée d’un dièse que vous croisez dans tout fichier CSS, toute charte graphique, tout outil de design. Ce guide explique comment ce système fonctionne, comment lire et convertir un code HEX, et fournit un tableau de référence des couleurs les plus utilisées. Un code hexadécimal est une représentation d’une couleur en base 16. Le système décimal compte de 0 à 9, puis passe à 10. Le format HEX est le standard du web et s’applique dans les fichiers CSS, les thèmes WordPress et les chartes graphiques livrées par une agence.
Comprendre et lire les codes hexadécimaux
#FF0000 pour le rouge pur, #FFFFFF pour le blanc, #1A1A2E pour un bleu nuit. #FF0000 : rouge au maximum (FF = 255), vert à zéro, bleu à zéro. Rouge pur. #0000FF : rouge à zéro, vert à zéro, bleu au maximum. Bleu pur. #808080 : les trois composantes à 128, soit 50 % d’intensité. La notation courte est possible quand chaque paire est identique : #FFF est équivalent à #FFFFFF, #F00 équivaut à #FF0000.
Une variante existe avec transparence : le format à 8 caractères #RRGGBBAA ajoute un canal alpha pour gérer l’opacité. #FF000080 correspond à un rouge à 50 % d’opacité. Sur chaque couleur, le ratio de contraste avec le blanc et avec le noir est calculé selon la luminance relative WCAG 2.1, afin d’assurer lisibilité et accessibilité.
Interprétation des valeurs et conversions
Pour déchiffrer #3B82F6, il suffit d’isoler les trois paires : 3B / 82 / F6, puis de les lire en ordre de grandeur : 3B est faible, 82 est moyen, F6 est très élevé. Peu de rouge, un peu de vert, beaucoup de bleu. Vous n’avez pas besoin de maîtriser la conversion hexadécimale pour travailler avec les codes couleur. Ce qu’il faut retenir : plus une paire est proche de FF, plus cette composante est saturée. FF0000 est rouge maximal. FFFF00 cumule rouge et vert au maximum avec un bleu nul, ce qui donne le jaune primaire.
Le convertisseur de couleur OsmoTools accepte n’importe quel format en entrée : HEX, RGB, RGBA, HSL, HSLA, HSV, CMJN, nom CSS, valeur décimale. Il affiche instantanément les équivalences dans les dix autres formats, sans bouton à cliquer. Aperçu en temps réel et contraste conforme WCAG.
Formats, espaces couleur et cas pratiques
Le format HEX est le standard du web. Tous les navigateurs et outils acceptent HEX comme format par défaut dans les fichiers CSS. Le format RGB devient utile dès que vous manipulez les couleurs dynamiquement en JavaScript (interpolation, transitions, transparence variable). Le format HSL est le plus efficace pour construire un système de couleurs cohérent : la teinte (H) est un angle de 0 à 360 degrés sur le cercle chromatique, la saturation (S) et la luminosité (L) sont des pourcentages. Pour créer des variantes claires et sombres d’une même couleur, il suffit de modifier uniquement le paramètre L sans toucher à H ni S. Le format HSV est celui d’outils comme Photoshop et Figma, utilisé dans leurs sélecteurs de couleur. Le format CMJN est le standard de l’impression quadrichromique, mais la conversion depuis RVB reste une approximation mathématique car les deux espaces ne couvrent pas exactement le même gamut.
Signification et symbolique du bleu lagon fondu
Le bleu lagon fondu est une teinte qui évoque les eaux tropicales, la fraîcheur et la sérénité, tout en restant suffisamment profond pour une identité de marque moderne. Dans une palette, il peut servir de couleur principale ou d’accent, apportant une sensation de calme et de confiance. Utilisé en teinte « lagon », il associe le regard à l’eau claire, la profondeur et une atmosphère rafraîchissante, idéale pour les interfaces qui visent la clarté, la fiabilité et le bien-être visuel.
Tableau de référence des codes et équivalences typiques
| Nom | HEX | RGB | HSL | CMYK |
|---|---|---|---|---|
| Bleu lagon fondu | #00626F | rgb(0, 98, 111) | hsl(191, 100%, 20%) | CMYK 44 / 5 / 0 / 56 |
| Bleu clair | #90D5FF | rgb(144, 213, 255) | hsl(204, 100%, 78%) | CMYK 44 / 16 / 0 / 0 |
| Blue Lagoon | #017987 | rgb(1, 121, 135) | hsl(189, 99%, 26%) | CMYK 99 / 10 / 0 / 47 |
Pour construire des variantes, le format HSL est particulièrement pratique: partir d’une teinte hsl(220, 70%, 50%) et n’ajuster que la luminosité (L) garantit que toutes les variantes restent dans la même famille de teinte :
- fond très clair : hsl(220, 70%, 90%)
- etat actif sombre : hsl(220, 70%, 25%)
Utilisation pratique et cohérence de marque
Une palette de marque dépasse rarement quatre à six couleurs: une couleur principale, une ou deux couleurs d’accentuation, un neutre clair et un neutre foncé. La pratique la plus simple pour maintenir la cohérence : documenter les valeurs HEX dans un fichier de référence partagé, avec pour chaque couleur son HEX, son RGB, son HSL et son CMJN pour les besoins print. Pour construire des variantes d’une couleur (clair, foncé, hover, fond désactivé), le format HSL est plus efficace que HEX.
Pour déployer des informations techniques et accessibles, n’hésitez pas à mentionner que les écrans et profils colorimétriques varient: un même #E53935 peut apparaître différemment selon le calibrage de l’écran, mais le code reste identique.
Œuvres et exemples concrets
Blue Lagoon has the hex code #017987. The equivalent RGB values are (1, 121, 135), which means it is composed of 0% red, 47% green and 53% blue. In the HSV/HSB scale, Blue Lagoon has a hue of 186°, 99% saturation and a brightness value of 53%. D’autres noms et valeurs comme Comfort Lagoon Blue (#5091E0) sont évoqués pour illustrer la variété des teintes et leurs usages en UI et print.
Bonne pratique et accessibilité
Pour garantir l’accessibilité, le ratio de contraste WCAG est vérifié pour chaque couleur par rapport au blanc et au noir. En France, les services en ligne soumis au RGAA doivent respecter un ratio minimum de 4,5:1 pour le texte courant (niveau AA). Le calcul et les optimisations se font localement, sans transmission de données sensibles lorsqu’on utilise des outils hors ligne.
03 02 Color Values HEX, RGB And HSL
Variantes et combinaisons associées
La teinte bleue lagon fondu peut être intégrée dans des harmonies variées: complémentaires, analogues, triadiques, tetradiques, et monochromes. Pour compléter les tons tranquilles du bleu lagon fondu, envisager des associations comme le corail doux, le gris frais, la crème, et la pêche. Le bleu clair et ses variantes s’accordent avec le blanc et des neutres pour créer des atmosphères sereines et professionnelles.
Notes sur l’internationalisation et les noms de couleurs
La spécification W3C définit 148 couleurs CSS nommées, utiles pour des prototypes rapides. Certains noms de couleurs, comme Blue Lagoon, peuvent exister dans des bases externes mais ne sont pas toujours utilisables directement dans HTML/CSS sans conversion HEX/RGB/HSL correspondante.