L’essentiel en bref
- Un dégradé bleu fond des nuances de bleu, souvent avec un voisin turquoise, cyan ou violet, du bleu glace pâle au bleu marine profond.
- Le bleu est largement associé au calme, à la fiabilité et à la technologie, ce qui le rend populaire et facile à confondre avec celui de tout le monde.
- Le bleu se fond proprement vers le turquoise, le cyan, l’indigo et le violet, mais tend à virer au gris quand on le fond directement vers l’orange ou le jaune.
- Le texte blanc convient sur les bleus profonds et moyens comme #1e3a8a et #2563eb, mais échoue pour du texte courant sur des bleus plus clairs comme #3b82f6.
- Pencher un dégradé bleu vers le turquoise ou le violet, l’assombrir ou l’éclaircir et ajouter un accent chaud sont les moyens les plus rapides d’échapper au style corporate.
Sur cette page
Un dégradé bleu fond des nuances de bleu, souvent avec un voisin turquoise, cyan ou violet. Il peut évoquer un ciel dégagé, un océan profond, un écran la nuit ou le rapport annuel d’une banque, selon les bleus que vous choisissez et la façon dont vous les employez. Voici vingt palettes de dégradés bleus avec CSS à copier, du plus pâle au plus sombre, suivies des couleurs de texte qui marchent dessus et de la manière d’éviter que le bleu paraisse fade.
Dégradés bleu clair : glace et ciel
Les dégradés bleu pâle paraissent ouverts, propres et discrets. Ils conviennent à la santé, au voyage, au bien-être et aux pages produit qui ont besoin d’espace. Utilisez dessus une encre foncée, et ajoutez une pointe de chaleur ou de lilas pour qu’ils ne paraissent pas froids et cliniques.
Dégradés bleu océan et turquoise
Pencher le bleu vers le vert lui donne de la vie. Les dégradés océan paraissent frais et naturels, et ils évitent les associations corporate du bleu pur. Ils conviennent aux marques de voyage, de cuisine, de durabilité et de plein air.
Dégradés bleu vif et électrique
Les bleus saturés sont énergiques et techniques. Ils conviennent aux lancements, aux applications, au sport et aux événements. Ce sont aussi les bleus les plus courants sur le web : ils gagnent donc le plus à une forme inattendue ou à un accent chaud.
Dégradés bleu foncé et minuit
Les dégradés bleu marine profond et minuit paraissent sérieux, haut de gamme et calmes. Ce sont d’excellents fonds pour du texte blanc et des accents vifs. Attention au banding, qui apparaît facilement dans les bleus sombres et lents ; un grain fin le corrige. Voyez le banding des dégradés.
Quel dégradé bleu pour quel usage
Vingt palettes, cela fait beaucoup à choisir. Partez de la tâche que le design doit accomplir et des mots qu’il doit porter, puis choisissez dans le groupe correspondant.
| Usage | À essayer | Pourquoi |
|---|---|---|
| Page produit ou santé calme | 1, 3, 4 | Pâles, ouverts, confortables sous un texte foncé |
| Voyage, cuisine, plein air | 6, 8, 10 | Un bleu tirant sur le vert paraît naturel |
| Lancement d’appli ou événement tech | 11, 13, 15 | Saturé et éclairé, se lit comme de l’énergie |
| Premium ou finance | 16, 17, 19 | Les fonds profonds paraissent sérieux et portent le texte blanc |
| Quelque chose de mémorable | 2, 14, 20 | Une note chaude rend le bleu spécifique |
Ce que signale le bleu, et le problème de la fadeur
Dans une grande partie du monde, le bleu est associé au calme, à la fiabilité et à la profondeur, en partie à cause du ciel et de l’eau. C’est pourquoi il est si courant dans la banque, l’assurance, la santé et la technologie. C’est aussi pourquoi un dégradé de bleu moyen aide rarement à vous reconnaître : il ressemble à la catégorie plutôt qu’à l’entreprise. La psychologie des couleurs explique pourquoi la convention joue dans les deux sens.
Bleu corporate
- Un bleu moyen vers un bleu plus clair à 135 degrés
- Un bleu primaire pur, totalement saturé
- Lisse et plat, sans texture
- Du bleu partout, rien de chaud
Bleu distinctif
- Penchant vers le turquoise, l’indigo ou le violet
- Très profond ou très pâle, pas au milieu
- Grain, éclat ou lueur douce
- Un accent chaud : corail, or ou abricot
Le bleu se fond bien vers ses voisins : turquoise, cyan, indigo et violet. Il se fond mal vers ses opposés. Le bleu directement vers l’orange ou le jaune passe par un milieu grisâtre : gardez donc les accents chauds courts ou faites-les passer par le violet ou le rose. Les couleurs complémentaires expliquent pourquoi.
Le texte sur les dégradés bleus
| Texte sur fond | Contraste | Verdict |
|---|---|---|
Blanc sur #0b1437 | 18,0:1 | Excellent |
Blanc sur #1e3a8a | 10,4:1 | Excellent |
Blanc sur #2563eb | 5,2:1 | Correct pour du texte courant |
Blanc sur #3b82f6 | 3,7:1 | Grand texte seulement |
#0b1a33 sur #60a5fa | 6,8:1 | L’encre foncée fonctionne ici |
#0b1a33 sur #bae6fd | 13,1:1 | Excellent |
Le piège est le milieu de la gamme des bleus : un bleuet vif comme #3b82f6 paraît assez fort pour du texte blanc, mais tombe sous 4,5:1. Sur un dégradé, vérifiez le contraste là où le bleu est le plus clair derrière vos mots. Le texte sur un dégradé donne la méthode complète.
Un fond profond laisse un seul chiffre parler pour tout le monde.
Une story plus calme avec beaucoup d’espace libre.
.hero {
background-color: #0b1437;
background-image: linear-gradient(180deg, #0a1628 0%, #13315c 55%, #d97757 100%);
color: #ffffff;
}Exporter un dégradé bleu en image pour les réseaux sociaux demande une étape de plus. Les plateformes recompressent les envois, et les bleus sombres et lents sont parmi les premières couleurs à se casser en bandes visibles. Exportez à la taille recommandée par la plateforme, ajoutez un grain fin avant d’enregistrer et utilisez le PNG quand la plateforme l’accepte. Les dégradés granuleux montrent quelle quantité de grain suffit.
Pour les violets voisins du bleu, voyez les dégradés violets ; pour des options plus vertes, voyez les dégradés verts.
Les questions qu’on nous pose
Quelles couleurs vont bien avec le bleu dans un dégradé ?
Le turquoise, le cyan, l’indigo et le violet se fondent proprement avec le bleu. Les couleurs chaudes comme le corail et l’or font de bons accents si on les garde courtes, car fondre le bleu directement vers l’orange ou le jaune vire au gris.
Quel bon code CSS pour un dégradé bleu ?
Pour un bleu profond et calme, essayez linear-gradient(180deg, #020617 0%, #0b1437 50%, #1e3a8a 100%). Chaque palette de cette page peut être copiée en CSS.
Le texte blanc est-il lisible sur un dégradé bleu ?
Sur des bleus profonds et moyennement sombres, oui. Sur des bleus plus clairs comme #3b82f6, le texte blanc tombe sous le rapport de 4,5:1 recommandé pour le texte courant.
Comment rendre un dégradé bleu moins corporate ?
Penchez-le vers le turquoise ou le violet, choisissez des bleus très profonds ou très pâles plutôt que le bleu moyen, ajoutez du grain et un petit accent chaud.
Écrit par Gradiently
L’équipe derrière Gradiently, un outil de création construit autour des Marks : des dégradés vivants qui donnent à tout ce que vous créez votre propre signature.
Voir notre profil
