Dégradé orange : 25 codes chauds, de la pêche au brûlé

Un dégradé orange fond deux oranges ou plus, souvent avec un jaune, un rouge ou un rose voisin, et peu de fondus paraissent aussi chauds. Les versions pêche clair et abricot sont douces et accueillantes, la mandarine vive est bruyante et joueuse, et l’orange brûlé ou la rouille est terreux et adulte. Voici 25 codes rangés selon ces ambiances, puis ce qu’on peut leur associer et comment composer du texte dessus sans perdre vos mots.

Dégradés orange doux : pêche et abricot

Les oranges pâles sont la porte d’entrée la plus amicale dans cette couleur. Ils évoquent la peau, le pain et la lumière de fin d’après-midi, d’où leur usage par les boulangeries, les soins de la peau et les marques pour enfants. Gardez l’arrêt le plus clair presque crème, pour que le fondu ait un endroit calme où se poser. Pour un article entier sur l’extrémité la plus pâle, voyez les dégradés pêche.

Dégradés orange vifs : mandarine et agrumes

L’orange saturé est de l’énergie pure. Il convient aux soldes, à la livraison de repas, au sport, aux festivals et à tout ce qui doit se remarquer à la taille d’une miniature. Le risque, c’est qu’un orange vif s’aplatisse en un bloc criard : donnez-lui un arrêt plus clair vers le jaune ou plus profond vers le rouge. Ce petit décalage fait paraître de la lumière plutôt que de la peinture.

Dégradés orange coucher de soleil et ambre

Faire courir l’orange à la verticale, de l’or en haut au rouge ou à la prune en bas, donne un coucher de soleil, probablement le dégradé le plus familier qui soit. Les fondus ambrés sont leur cousin plus discret : miel, marmelade et whisky, riches sans crier. Pour le traitement complet du ciel, les dégradés de coucher de soleil va plus loin.

Dégradés orange brûlé et rouille

Poussez l’orange vers le brun et il devient terracotta, rouille et cuivre : les couleurs des pots d’argile, des feuilles d’automne et du vieux cuir. Elles paraissent travaillées et réfléchies, et conviennent à la décoration, au café, à la céramique, aux marques d’outdoor et à tout ce qui a une histoire faite main. Elles portent aussi bien mieux le texte blanc que l’orange vif.

Lumière orange sur fond sombre

La façon la plus haut de gamme d’employer l’orange est d’en user avec parcimonie. Partez d’un quasi-noir, d’un brun profond ou d’un bleu marine, et laissez un orange rayonner d’un coin comme une braise ou un réverbère. C’est le traitement pour les événements de nuit, les restaurants, la musique et tout ce qui doit paraître chaleureux après la tombée de la nuit. Les fondus sombres forment facilement des bandes : lisez les arrière-plans en dégradé sombre avant d’exporter.

Les couleurs qui s’accordent à un dégradé orange

L’orange a deux sortes de bons partenaires. Les voisines comme le jaune, le rose et le rouge s’y fondent directement. Les opposées comme le bleu profond et le turquoise le font vibrer, mais elles doivent se placer à côté de l’orange comme accent, pas dans le même fondu, car le point médian entre elles vire au gris. Les dégradés boueux explique pourquoi, et les couleurs complémentaires montre comment employer cette attraction sans risque.

Le texte sur les dégradés orange

C’est là que la plupart des designs orange échouent. Le blanc sur la mandarine vive paraît audacieux mais offre un rapport de contraste d’environ 2,8 pour 1, bien en dessous des 4,5 pour 1 que demande WCAG pour le texte courant. Un texte presque noir sur le même orange dépasse 6 pour 1. La règle est simple : texte sombre sur les oranges clairs et vifs, texte blanc seulement à partir de l’orange brûlé. La méthode complète figure dans contraste des couleurs et accessibilité.

Gradiently s’occupe de cette partie pour vous. Un Mark sait où sont les mots : il place sa zone la plus calme derrière eux et l’encre automatique choisit un texte clair ou foncé ligne par ligne à partir de la palette du Mark, si bien qu’un design orange reste lisible à chaque taille, sans cadres ni ombres.

Dégradé orange en CSS

Chaque code ci-dessus est une seule valeur CSS que vous pouvez coller dans background. Pour une section qui demande à la fois chaleur et profondeur, superposez une lumière radiale à une base linéaire, et définissez toujours une couleur de repli unie. Lisez les dégradés linéaires CSS pour la syntaxe complète.

.hero {
  background-color: #9a3412; /* fallback */
  background-image:
    radial-gradient(circle at 78% 22%, #fdba74 0%, transparent 40%),
    linear-gradient(160deg, #f97316 0%, #c2410c 55%, #7c2d12 100%);
  color: #ffffff; /* safe here: the words sit on the darker lower half */
}

Si vous voulez un style orange que personne d’autre ne publie, parcourez le Marché à la recherche de Marks chauds : cherchez des mots comme « orange brûlé » ou « abricot », créez gratuitement avec n’importe lequel non réservé, et réservez-le s’il devient votre marque.