# Couleurs chaudes et froides : utiliser la température à dessein [Canonical HTML page](https://gradiently.design/fr/guide/warm-and-cool-colors) Chaque couleur a une température, y compris vos gris et vos blancs. Apprenez à la lire et vous pourrez rendre une création plus proche, plus calme ou plus lumineuse sans changer une seule teinte. ## The short version - Les couleurs chaudes et froides sont les deux moitiés du cercle chromatique : les rouges, les orangés et les jaunes paraissent chauds, les verts, les bleus et les violets paraissent froids. - La température est relative : un violet paraît chaud à côté d’un bleu et froid à côté d’un orange. - Les couleurs chaudes semblent plus proches et plus énergiques, tandis que les couleurs froides reculent et apaisent, ce qui explique que les collines lointaines paraissent bleues dans un paysage. - Les gris et les blancs ont aussi une température, et mélanger par accident des neutres chauds et froids est une raison fréquente pour laquelle une création semble légèrement fausse. - Un dégradé du chaud au froid reste propre quand il passe par une voisine commune comme le rose ou le violet, plutôt que par le gris. Les **couleurs chaudes et froides** sont les deux moitiés du cercle chromatique. Les rouges, les orangés et les jaunes paraissent chauds, comme le feu et le soleil ; les verts, les bleus et les violets paraissent froids, comme l’eau, l’ombre et le soir. La température change l’impression que donne une création avant même qu’on la lise : les couleurs chaudes avancent et dynamisent, les couleurs froides reculent et apaisent. L’utiliser à dessein est l’un des moyens les plus rapides de rendre une palette intentionnelle. - Rouge chaud: #d7263d - Orange chaud: #f46036 - Jaune chaud: #f7b32b - Vert froid: #2e9e6f - Bleu froid: #1b7fbd - Violet froid: #5b3cc4 Trois couleurs chaudes et trois froides, de part et d’autre du cercle. La frontière passe à peu près entre le jaune-vert et le rouge-violet. ## La température est relative La limite entre chaud et froid n’est pas fixe. Les jaunes-verts et les rouges-violets se trouvent sur la frontière, et toute couleur paraît plus chaude à côté d’une plus froide. Un magenta à côté d’un bleu ciel paraît chaud ; le même magenta à côté d’un orange paraît froid. C’est pourquoi il faut juger la température dans la palette, et non nuancier par nuancier. - Magenta à côté du bleu : chaud: `linear-gradient(90deg, #1b7fbd 0% 50%, #b83b8f 50% 100%)` - Magenta à côté de l’orange : froid: `linear-gradient(90deg, #f46036 0% 50%, #b83b8f 50% 100%)` Le même magenta à droite dans les deux cas. Sa température change avec sa voisine. Les couleurs ont aussi une température *au sein* d’une même teinte. Un rouge qui tire vers l’orange est plus chaud qu’un rouge qui tire vers le bleu, et un bleu avec une pointe de vert est plus chaud qu’un bleu qui tire vers le violet. Les designers appellent cette tendance la sous-tonalité, et c’est elle qui fait que deux « rouges » jurent. ## Comment les couleurs chaudes et froides créent de la profondeur Les couleurs chaudes semblent avancer et les couleurs froides reculer. Les peintres de paysage l’utilisent depuis des siècles : l’air diffuse la lumière, les collines lointaines paraissent donc réellement plus bleues et plus pâles, et notre œil lit le froid et le pâle comme lointains. Vous pouvez emprunter le même effet en design à plat. | Qualité | Couleurs chaudes | Couleurs froides | | --- | --- | --- | | Espace | Avancent, paraissent proches | Reculent, paraissent lointaines | | Énergie | Active, urgente, sociale | Calme, stable, concentrée | | Idéales pour | Boutons, prix, titres, alimentation | Fonds, grandes surfaces, données, santé | | En grande quantité | Peuvent paraître criardes ou étouffantes | Peuvent paraître froides ou distantes | | En lumière | Kelvins bas, comme une ampoule de 2700 K | Kelvins élevés, comme un jour couvert | Des tendances, pas des lois. La saturation et la luminosité peuvent renverser la température : une pêche pâle recule davantage qu’un bleu électrique. La règle pratique : placez les couleurs froides sur les grandes zones de fond et gardez les couleurs chaudes pour ce qui doit atteindre le regard en premier. Un appel à l’action chaud sur une page froide ressort sans avoir besoin d’être grand, ce qui s’accorde parfaitement avec la [règle du 60-30-10](https://gradiently.design/fr/guide/60-30-10-rule). ## Neutres chauds et neutres froids Les gris, les blancs et les noirs ont aussi une température, et elle compte plus qu’on ne le croit. Un blanc cassé chaud évoque le papier ; un blanc froid évoque un écran ou une clinique. Une création qui mélange un fond gris chaud et un texte gris froid paraît souvent légèrement fausse sans que personne ne sache dire pourquoi. - Papier chaud: #f5efe6 - Pierre chaude: #b8ada0 - Anthracite chaud: #3d3530 - Brume froide: #eef2f6 - Ardoise froide: #a3adb8 - Anthracite froid: #2b3240 Les neutres chauds tirent vers le brun et la crème, les froids vers le bleu. Choisissez une seule famille pour toute une création. ```css :root { /* Warm neutrals: pair with reds, oranges, golds */ --paper: #f5efe6; --stone: #b8ada0; --charcoal-warm: #3d3530; /* Cool neutrals: pair with blues, greens, violets */ --mist: #eef2f6; --slate: #a3adb8; --charcoal-cool: #2b3240; } ``` Ranger les neutres dans des ensembles chauds et froids nommés permet de repérer facilement un mélange accidentel lors d’une relecture de code. ## Mêler chaud et froid dans un même dégradé Les dégradés du chaud au froid comptent parmi les plus saisissants, et les couchers de soleil le prouvent. Ce sont aussi ceux qui ratent le plus souvent, car les couleurs chaudes et froides sont souvent opposées sur le cercle et un fondu direct entre elles passe par le gris. La solution est de faire passer le fondu par une couleur qui appartient aux deux côtés, en général le rose, le magenta ou le violet. - Orange vers bleu, en direct: `linear-gradient(90deg, #f46036 0%, #1b7fbd 100%)` - Orange vers bleu via le rose: `linear-gradient(90deg, #f46036 0%, #e0457b 35%, #8a3fb8 65%, #1b7fbd 100%)` - Crépuscule : froid en haut, chaud en bas: `linear-gradient(180deg, #2b3a67 0%, #8a3fb8 45%, #f28f6b 80%, #ffd29d 100%)` - Jaune vers vert via le citron vert: `linear-gradient(135deg, #f7b32b 0%, #8cc63f 50%, #2e9e6f 100%)` Le fondu direct plonge dans un milieu terne. Les autres passent par une voisine commune : chaque point du trajet est une vraie couleur. [Les dégradés boueux](https://gradiently.design/fr/guide/muddy-gradients) explique la géométrie. Les proportions comptent aussi. Laissez une température mener et l’autre apparaître en contraste. Un dégradé surtout froid avec une lueur chaude sur un bord évoque la lumière du soir ; un partage égal entre chaud et froid paraît indécis. [Les dégradés coucher de soleil](https://gradiently.design/fr/guide/sunset-gradient) donnent bien d’autres exemples de chaud et de froid partageant un même fond. ## Couleurs chaudes et froides dans le design de tous les jours - **L’ardoise d’un café :** fond crème chaud, texte espresso et un seul accent terre cuite, pour qu’elle ressemble à la salle où elle est accrochée - **Une application bancaire :** surfaces ardoise et bleues, avec un seul ambre chaud pour les alertes qui demandent de l’attention - **L’affiche d’une soirée :** fond violet froid et profond avec un titre orange chaud qui saute aux yeux - **Un lancement de soins de la peau :** brume froide et vert sauge, relevés d’une seule pêche chaude pour le nom du produit - **Une promotion sportive :** rouge et orange chauds en tête, un bleu marine froid seulement pour les mentions en petit Dans chaque cas, une température installe le climat et l’autre dirige l’attention. Cette association est aussi une forme douce de contraste de [couleurs complémentaires](https://gradiently.design/fr/guide/complementary-colors), sans le choc frontal des vrais opposés. ## Choisir une température pour votre marque 1. **Partez de l’impression recherchée** Les marques accueillantes, vivantes et concrètes penchent en général vers le chaud. Les marques précises, calmes et dignes de confiance penchent en général vers le froid. Aucune n’est meilleure ; choisissez celle qui correspond à ce que vous faites. 2. **Choisissez une température dominante** Construisez l’essentiel de votre palette, neutres compris, d’un seul côté. Cela donne à la marque un climat cohérent. 3. **Ajoutez un accent de l’autre côté** Un seul accent chaud sur une marque froide, ou un accent froid sur une marque chaude, crée du contraste et un point clair où poser le regard. 4. **Testez en situation** Vérifiez la palette sur les écrans et les supports réels où elle vivra. Les couleurs changent d’un écran à l’autre, puis encore à l’impression ; voir [comment choisir les couleurs de sa marque](https://gradiently.design/fr/guide/how-to-choose-brand-colors). ## FAQ ### Que sont les couleurs chaudes et froides ? Les couleurs chaudes sont les rouges, les orangés et les jaunes ; les couleurs froides sont les verts, les bleus et les violets. Les couleurs de la frontière, jaune-vert et rouge-violet, peuvent se lire dans un sens ou dans l’autre selon leurs voisines. ### Le violet est-il une couleur chaude ou froide ? Cela dépend de sa tendance et de ses voisines. Les pourpres et les magentas paraissent chauds à côté du bleu, les bleus-violets paraissent froids, et tout violet paraît froid à côté de l’orange. ### Les couleurs chaudes avancent-elles vraiment ? Elles semblent plus proches, surtout quand elles sont saturées, tandis que les couleurs froides et pâles semblent reculer. La luminosité et la saturation peuvent annuler l’effet. ### Peut-on mêler couleurs chaudes et froides dans une même création ? Oui. Laissez une température mener, utilisez l’autre en accent, et dans les dégradés, faites passer le fondu par une voisine commune comme le rose ou le violet pour éviter un milieu gris.