Dégradés vert et bleu : codes frais à l’allure naturelle

Un dégradé vert et bleu fond deux voisins froids : des verts comme l’émeraude #10b981 ou la menthe #a7f3d0 et des bleus comme #0284c7 ou le ciel #bae6fd, avec le sarcelle et l’aqua en pont entre eux. Le dégradé reste net car il n’y a aucun point gris entre les deux teintes. Il paraît naturel parce que vous l’avez vu toute votre vie dans l’eau, la glace et le ciel. Les codes ici suivent quatre paysages, avec les couleurs de texte lisibles sur chacun et le CSS pour le mode clair et sombre.

Pourquoi le vert et le bleu vont si naturellement ensemble

Le vert et le bleu sont des couleurs analogues : ils se côtoient sur le cercle, si bien que chaque étape entre eux est une vraie couleur, surtout du sarcelle et de l’aqua. La nature montre sans cesse cet accord, des mers peu profondes où l’eau bleue court sur les algues vertes et le sable, aux lacs glaciaires et aux forêts de pins reflétées dans une eau calme. S’inspirer de ces scènes est le moyen le plus simple de rendre le dégradé calme plutôt que corporate.

Lagon : dégradés aqua et vert vifs

L’eau tropicale peu profonde est surtout aqua, avec du vert là où elle est la moins profonde et du bleu là où elle s’approfondit. Ces dégradés ont l’éclat des vacances. Ajoutez un arrêt sable chaud si vous voulez qu’ils évoquent une plage plutôt qu’une piscine.

Lac de pins : dégradés vert et bleu profonds

Un vert sombre qui se fond dans un bleu sombre paraît calme, coûteux et digne de confiance. Pensez à un lac de forêt au crépuscule, ou à la couleur d’une vieille bouteille. Ils portent bien le texte blanc et conviennent à la finance, à l’équipement de plein air, à l’architecture et à toute marque qui veut paraître stable.

Glacier : dégradés menthe pâle et ciel

Éclaircissez le duo à fond et vous obtenez la glace des glaciers et les matins froids : nets, aérés et très calmes. Ils conviennent à la santé, aux soins de la peau, au nettoyage et aux applications de productivité. Ils peuvent paraître cliniques : une touche de blanc chaud aide.

Aurore boréale : vert et bleu sur un ciel nocturne

Les aurores boréales sont de la lumière verte et bleue sur du noir : c’est pourquoi les dégradés aurore comptent parmi les fonds sombres les plus appréciés. Gardez la couleur en bandes douces et laissez le fond sombre occuper la majeure partie du cadre. Les dégradés aurore couvrent toute la technique.

Couleurs de texte sur les dégradés vert et bleu

L’émeraude et l’aqua sont étonnamment claires : le texte blanc sur les versions vives échoue donc souvent. Une encre sarcelle profond fonctionne sur les dégradés clairs et garde tout dans la même famille ; le blanc et la menthe se lisent bien sur les sombres. Les rapports ci-dessous utilisent la formule WCAG. Le texte sur un dégradé montre quoi faire quand une ligne traverse les deux extrémités.

Comment réchauffer une palette vert et bleu

Le vert et le bleu sont tous deux froids : une marque entière dans ces tons peut donc paraître distante. Un accent chaud règle le problème. Le sable, le corail et l’or doux se trouvent tous à l’opposé du sarcelle sur le cercle : utilisez-les à côté du dégradé, dans un bouton, un logo ou un filet sur un bord, plutôt que de les fondre dedans. Les couleurs complémentaires expliquent pourquoi un dégradé à travers le cercle vire au gris.

CSS du dégradé vert et bleu pour mode clair et sombre

.hero {
  background-color: #ecfdf5;
  background-image: linear-gradient(135deg, #ecfdf5 0%, #a7f3d0 45%, #bae6fd 100%);
  color: #042f2e;
}

@media (prefers-color-scheme: dark) {
  .hero {
    background-color: #031418;
    background-image:
      radial-gradient(ellipse at 30% 25%, #0d9488 0%, transparent 50%),
      linear-gradient(160deg, #022c22 0%, #0c4a6e 100%);
    color: #ecfeff;
  }
}

Associer une version claire et une version sombre du même vert et bleu est une belle façon de donner à un changement de thème l’air d’un choix de design plutôt que d’une inversion. Les dégradés en mode sombre vont plus loin. Dans Gradiently, un même Mark se rend dans chaque format que vous dessinez et choisit une encre claire ou foncée ligne par ligne dans sa propre palette : les éclats du lagon comme les profondeurs du lac de pins gardent ainsi leurs mots lisibles.