Le bleu de marque n'est pas #0000FF : comment Intel, LinkedIn, IBM et Dell utilisent le bleu
Le bleu pur s'imprime plus gris, ressemble à un lien et se voit mal sur fond noir. Les célèbres logos bleus utilisent tous un bleu plus calme. Leurs codes exacts, pourquoi les bleus de Facebook et Visa dérivent à l'impression, et comment choisir le vôtre.
Un bon bleu de marque n'est jamais #0000FF. Le bleu pur est le bleu le plus profond qu'un écran puisse produire, ce qui semble solide jusqu'à ce que le logo parte à l'impression et revienne plus gris, ou atterrisse sur une page web où tout ce qui est bleu ressemble à un lien. Les célèbres logos bleus règlent tous ce problème de la même façon, et le schéma est facile à copier pour le vôtre.
Pourquoi le bleu pur pose problème
Le bleu pur est le coin de l'espace colorimétrique de l'écran : la lumière bleue à pleine puissance et rien d'autre. L'encre d'impression ne peut pas atteindre ce coin.
À l'écran
À l'impression, sur papier couché
Converti pour une presse standard sur papier couché, #0000FF devient CMJN 93/75/0/0 et donne en épreuve environ #2C4A9A : plus gris et plus plat. L'écart est assez grand pour qu'un œil exercé y voie une autre couleur, si bien que le bleu de votre carte de visite ne correspondra pas à celui de votre site.
Le bleu pur a un second problème sur fond noir. C'est la plus sombre des couleurs vives : un texte ou une marque bleue sur fond sombre disparaît presque.
Sur blanc
Sur noir
Il ressemble aussi à un lien
Lien par défaut du navigateur
Bleu pur
Les navigateurs peignent les liens non visités en #0000EE, d'après la feuille de style suggérée par le standard HTML. C'est à un cran de #0000FF : un logo ou un bouton en bleu pur se lit comme quelque chose sur lequel cliquer, ou comme un élément oublié sans style.
Comment font les bleus célèbres
Intel : #0068B5
Un bleu moyen net, à environ 34 degrés du bleu pur en direction du cyan. En impression, il s'écarte de sa couleur écran de 0,8 Delta E, trop peu pour se voir. Le logo Intel est utilisé en réserve blanche sur ce bleu, et le blanc s'y lit facilement.
LinkedIn : #0A66C2
Un bleu amical, avec un soupçon de violet de plus qu'Intel. C'est celui des quatre qui dérive le plus à l'impression, à 2,0 Delta E, ce qui reste tout juste à la limite de ce que l'œil perçoit. Le logotype et le carré passent en blanc et le « in » est découpé en bleu.
IBM : #1F70C1
Un bleu stable, légèrement plus doux, avec un peu de gris dedans. Les lettres rayées sont fines, donc la couleur doit rester assez claire pour que les traits blancs ressortent : le blanc sur ce bleu dépasse largement le minimum d'accessibilité pour le texte. Il s'imprime avec un Delta E de 1,3.
Dell : #007DB8
Le plus clair et le plus cyan des quatre, issu de la refonte de Dell en 2016. C'est le bleu le plus net du lot, à 41 degrés du bleu pur, et il s'imprime à 0,9 Delta E. C'est aussi celui qui laisse le moins de marge au texte blanc : il passe le test de contraste, mais de justesse.
Les trois choses qu'ils font tous
Ils penchent vers le cyan. Le bleu pur se situe à 240 degrés sur le cercle chromatique, tout comme la couleur de lien par défaut. Dell est à 199, Intel à 206, LinkedIn et IBM à 210. S'éloigner de 30 à 40 degrés de 240 est ce qui rend un bleu calme et l'empêche de ressembler à un lien hypertexte.
Ils fonctionnent sur blanc comme sur noir. Le bleu pur est fort sur blanc et sombre sur noir. Ces quatre-là se situent au milieu de l'échelle de luminosité : le texte blanc passe sur tous, et chacun reste visible comme couleur sur fond sombre.
Ils s'impriment fidèlement. Chacun s'écarte de moins de 2,0 Delta E en épreuve.
| Marque | Bleu | Teinte | Texte blanc dessus | Comme couleur sur noir | Écart à l'impression |
|---|---|---|---|---|---|
| Bleu pur | #0000FF | 240° | Réussi, 8,6 pour 1 | Échec, 2,4 pour 1 | Fort, 16,6 |
| Intel | #0068B5 | 206° | Réussi, 5,8 pour 1 | Réussi, 3,6 pour 1 | Invisible, 0,8 |
| #0A66C2 | 210° | Réussi, 5,7 pour 1 | Réussi, 3,7 pour 1 | Faible, 2,0 | |
| IBM | #1F70C1 | 210° | Réussi, 5,1 pour 1 | Réussi, 4,1 pour 1 | Faible, 1,3 |
| Dell | #007DB8 | 199° | Réussi, 4,5 pour 1 | Réussi, 4,6 pour 1 | Invisible, 0,9 |
Un écart d'impression inférieur à environ 2 est difficile à voir. Au-delà d'environ 5, la couleur imprimée se lit comme un autre bleu.
Les bleus qui dérivent à l'impression
Passer les tests d'écran ne suffit pas, car l'impression est un test à part. Mesurés de la même façon, trois autres bleus célèbres bougent beaucoup sur une presse à papier couché.
| Marque | Bleu | Teinte | Texte blanc dessus | Écart à l'impression |
|---|---|---|---|---|
| #0866FF | 217° | Réussi, 4,8 pour 1 | Fort, 9,7 | |
| Visa | #1434CB | 230° | Réussi, 8,8 pour 1 | Fort, 9,2 |
| Samsung (cité) | #1428A0 | 231° | Réussi, 11,4 pour 1 | Perceptible, 6,0 |
Le bleu de Facebook est le plus intéressant. Il se situe dans la zone penchant vers le cyan et passe le test du texte blanc, et pourtant il donne en épreuve un bleu nettement différent.
Les bleus plus vifs et plus saturés tombent en dehors de ce que l'encre quadrichromie sait imprimer. Ces marques ont leurs propres raisons et vivent surtout sur écran : c'est donc une mesure, pas une erreur. La leçon pour votre logo est de faire l'épreuve d'impression, pas de deviner d'après la teinte.
Comment choisir un bleu pour votre logo
- Partez à 30 à 40 degrés du bleu pur. Tirez #0000FF vers le cyan jusqu'à ce qu'il se situe entre environ 199 et 210 degrés, la plage utilisée par les quatre bleus célèbres.
- Testez-le de trois façons. Le texte blanc dessus doit se lire aisément en taille de corps de texte. La couleur elle-même doit rester visible sur noir. Et elle ne doit pas ressembler à un lien à côté de #0000EE.
- Faites l'épreuve d'impression. Faites une épreuve écran dans votre outil de design avec un profil de papier couché, ou demandez une épreuve à votre imprimeur. Si le bleu imprimé ressemble à une autre couleur, déplacez-le jusqu'à ce que l'écran et l'impression s'accordent.
Piquez ces 4 bleus
Les quatre bleus, tels que chaque marque les dessine.
Utilisez-les pour étudier et pour tester votre propre bleu à côté. Copier le bleu exact d'une grande marque pour un nouveau logo dans un secteur proche, c'est ainsi qu'on finit par avoir l'air d'une contrefaçon : reprenez le schéma, pas les codes.
FAQ
Quel est le code hex du bleu Intel ?
Le bleu Intel est #0068B5, tel que dessiné dans le fichier du logo Intel.
Quel est le code hex du bleu LinkedIn ?
Le bleu LinkedIn est #0A66C2, tel que dessiné dans le fichier du logo LinkedIn de 2021.
Quel est le code hex du bleu IBM ?
Le bleu IBM est #1F70C1, tel que dessiné dans le fichier du logo IBM.
Quel est le code hex du bleu Dell ?
Le bleu Dell est #007DB8, tel que dessiné dans le logo Dell issu de la refonte de 2016.
Pourquoi #0000FF est-il mauvais pour un logo ?
Il s'imprime nettement plus gris qu'à l'écran, il est presque identique au bleu d'un lien de navigateur par défaut, et il disparaît presque sur noir. Un bleu plus calme penchant vers le cyan règle les trois problèmes.
De quelle couleur est un lien par défaut dans un navigateur ?
Les liens non visités sont #0000EE dans la feuille de style suggérée par le standard HTML, soit à un cran du bleu pur.
Quel est un bon bleu pour un logo ?
Un bleu moyen entre environ 199 et 210 degrés de teinte, comme les bleus d'Intel, LinkedIn, IBM et Dell, qui passe le texte blanc, reste visible sur noir et s'imprime à moins d'environ 2 Delta E.
Sources
- Couleurs relevées dans le fichier de logo de chaque marque sur Wikimedia Commons : logo Intel (2020), LinkedIn (2021), IBM, Dell (2016).
- Couleur de lien par défaut : le standard HTML, rendering, où
:linkvaut#0000EE. - Écart à l'impression : une épreuve écran sur le profil de presse Coated FOGRA39, mesurée en Delta E 2000. #0000FF donne en épreuve #2C4A9A, soit un écart de 16,6. Les quatre bleus célèbres dérivent entre 0,8 et 2,0. Le #0866FF de Facebook, le #1434CB de Visa et le #1428A0 cité de Samsung dérivent de 9,7, 9,2 et 6,0.
- Angles de teinte calculés à partir des codes hex avec le modèle HSL. Rapports blanc sur couleur et couleur sur noir calculés avec la formule de contraste WCAG 2.
- Chaque logo est montré passé en blanc sur son propre bleu, la version que ces marques utilisent sur leur couleur. Recoloré uniquement, jamais redessiné, et les marques appartiennent à leurs propriétaires.
- D'abord publié sous forme de carrousel sur Logo Brainy.
Choosing colors for a new logo? Our team designs brand identities with colors that work on screen, in print and next to each other.
Get Started
