# La température de couleur en design : lumière chaude, froide, neutre [Canonical HTML page](https://gradiently.design/fr/guide/color-temperature) Toute couleur tire vers le chaud ou le froid, même les gris. Voici ce que signifie l’échelle Kelvin, pourquoi elle va à l’inverse de notre façon de parler de chaleur, et comment utiliser la température pour donner le ton d’une création. ## The short version - La température de couleur indique si une lumière ou une couleur tire vers l’orange et le rouge, perçus comme chauds, ou vers le bleu, perçu comme froid. - Les sources lumineuses se mesurent en kelvins : une bougie se situe vers 1 900 K, une ampoule domestique vers 2 700 K et le blanc de référence sRGB, D65, vers 6 500 K. - Plus la valeur en kelvins est élevée, plus la lumière paraît bleue : pour la lumière, un chiffre de température plus haut signifie une couleur d’aspect plus froid. - Les neutres ont aussi une température : les gris chauds tirent vers le brun ou le beige, les gris froids vers le bleu. - Beaucoup d’images convaincantes associent une lumière chaude à des ombres froides, ou l’inverse, car ce contraste se lit comme une profondeur naturelle. **La température de couleur** décrit la chaleur ou la fraîcheur que dégage une lumière ou une couleur. Chaud signifie tirant vers l’orange bougie et le rouge ; froid, tirant vers le bleu du jour ; neutre se situe entre les deux. Pour la lumière, elle se mesure en kelvins : une bougie avoisine 1 900 K et un ciel couvert 6 500 K. En design, elle sert à donner le ton : les palettes chaudes paraissent proches et confortables, les froides calmes et spacieuses, et mêler les deux donne de la profondeur à une image. ## L’échelle Kelvin, et pourquoi elle semble à l’envers Le chiffre en kelvins vient de la physique : c’est la température qu’un corps incandescent idéal devrait atteindre pour émettre une lumière de cette couleur. Une barre de métal chauffée lentement rougeoie, puis devient orange, puis d’un blanc jaunâtre, et à des températures extrêmes d’un blanc bleuté. Un chiffre plus élevé signifie donc une lumière plus bleue, que les designers appellent plus froide. Le vocabulaire va à l’inverse de la physique, et cela déroute tout le monde au début. | Source lumineuse | Température approximative | Aspect | | --- | --- | --- | | Flamme de bougie | 1 900 K | Ambre profond | | Ampoule domestique blanc chaud | 2 700 K | Blanc orangé doux | | Lampe halogène | 3 000 K | Blanc chaud | | Éclairage de bureau blanc froid | 4 000 K | Blanc neutre | | Soleil de midi | 5 500 K | Blanc franc | | Ciel couvert, point blanc sRGB D65 | 6 500 K | Blanc légèrement froid | | Ombre dégagée sous un ciel bleu | 10 000 K et plus | Nettement bleu | Valeurs typiques. Les sources réelles varient, et les ampoules sont vendues par paliers comme 2 700 K et 4 000 K. Environ 1 900 K à 10 000 K: `linear-gradient(90deg, #ff8912 0%, #ffa757 18%, #ffb46b 30%, #ffd1a3 48%, #ffecdf 62%, #fff9fb 74%, #e3e9ff 87%, #c9d9ff 100%)` Couleurs approximatives à l’écran d’une lumière allant de la bougie à l’ombre bleue. L’œil s’adapte à la lumière ambiante, c’est pourquoi une pièce à 2 700 K paraît blanche au bout d’un moment. Cette adaptation compte pour les écrans. Le standard sRGB, que supposent la plupart des couleurs du web et des applications, prend D65, environ 6 500 K, comme blanc. Des fonctions comme les modes nuit réchauffent le blanc d’un écran : les couleurs que vous avez choisies paraîtront plus chaudes à qui lit le soir. Concevez pour le standard et acceptez la dérive. ## Couleurs chaudes, froides et neutres Hors éclairage, la température dépend du côté du cercle vers lequel une couleur penche. Rouges, oranges et jaunes se lisent chauds ; bleus, bleus canard et bleus violacés se lisent froids. Verts et violets se situent au milieu et peuvent basculer d’un côté ou de l’autre : un olive est chaud, un vert menthe est froid. [Les couleurs chaudes et froides](https://gradiently.design/fr/guide/warm-and-cool-colors) détaille le cercle ; l’essentiel ici est que la température joue aussi au sein d’une même teinte. Il existe des bleus chauds et des rouges froids. - Rouge chaud, brique: #c2372b - Rouge froid, framboise: #c2185b - Bleu chaud, denim: #2b5d8a - Bleu froid, cobalt: #2563eb - Vert chaud, olive: #7a8b3a - Vert froid, menthe: #3fbf9f Trois teintes, chacune en version chaude et froide. Les rouges chauds tirent vers l’orange, les froids vers le bleu ; il en va de même pour toutes les teintes. La température fait une grande part du travail émotionnel d’une palette, souvent plus que la teinte elle-même. Les accords chauds paraissent proches, conviviaux et énergiques ; les froids, silencieux, spacieux et maîtrisés. [La psychologie des couleurs](https://gradiently.design/fr/guide/color-psychology) explore ces associations et leurs limites. La température interagit aussi avec l’intensité : une palette froide poussée à pleine [saturation](https://gradiently.design/fr/guide/color-saturation) cesse de paraître calme, et une palette chaude très atténuée prend un air rétro plutôt que vivant. ## Les neutres ont aussi une température Le gris pur est rare dans un bon design. La plupart des gris bien employés tirent légèrement vers le chaud, côté pierre et taupe, ou légèrement vers le froid, côté ardoise et acier. Mêler les deux familles dans une même mise en page donne souvent un résultat terne sans que personne sache pourquoi. Choisissez une famille et utilisez-la partout pour les fonds, les bordures et le texte secondaire. - Gris chauds : du papier à l’ombre brûlée: `linear-gradient(90deg, #f6f3ee 0%, #e4ded4 25%, #bdb4a7 50%, #7d7468 75%, #2f2a25 100%)` - Gris froids : du givre à l’ardoise: `linear-gradient(90deg, #f3f5f8 0%, #dde2e9 25%, #aab3c0 50%, #646e7d 75%, #1e242d 100%)` - Gris parfaitement neutres: `linear-gradient(90deg, #f5f5f5 0%, #e0e0e0 25%, #b3b3b3 50%, #707070 75%, #262626 100%)` Trois rampes de gris. Placez un gris chaud à côté d’un gris froid et la différence saute aux yeux ; seuls, les deux se lisent simplement comme du gris. ```css :root { /* A warm neutral ramp: pick one family and keep it */ --grey-50: #f6f3ee; --grey-200: #e4ded4; --grey-400: #bdb4a7; --grey-600: #7d7468; --grey-900: #2f2a25; } ``` Une rampe de gris chauds en tokens. Remplacez-la par les valeurs froides pour un rendu plus net et plus technique. Les neutres chauds conviennent à l’alimentation, à l’hôtellerie, au bien-être et aux marques éditoriales. Les neutres froids conviennent aux logiciels, à la finance et à tout ce qui doit paraître précis. [Les palettes de couleurs neutres](https://gradiently.design/fr/guide/neutral-color-palettes) en propose d’autres. ## Lumière chaude, ombre froide Les peintres ont remarqué depuis longtemps que lumière et ombre diffèrent en température, pas seulement en luminosité. Les surfaces au soleil se réchauffent tandis que les ombres prennent le bleu du ciel. Reproduisez cela dans un dégradé ou une illustration et le résultat paraît aussitôt plus réel qu’une version claire et sombre d’une seule teinte. Cela marche aussi à l’inverse : un clair de lune froid avec des ombres chaudes éclairées par une lampe. Pour les fonds, c’est toute la différence entre un dégradé qui paraît éclairé et un dégradé qui ressemble à un nuancier. Placez la lumière chaude là où l’œil doit aller en premier, laissez les tons froids s’amasser sur les bords, et gardez le texte sur la plus calme des deux zones. [Le fond en dégradé](https://gradiently.design/fr/guide/gradient-background) détaille toute la méthode. - Lumière de couchant, ombre bleue: `radial-gradient(circle at 25% 25%, #ffd29a 0%, #e98a5a 35%, #3b3f6b 80%, #1a1c33 100%)` - Clair de lune, sombre chaud: `radial-gradient(circle at 75% 20%, #cfe3ff 0%, #6d86b8 40%, #3d2a2a 85%)` - De l’heure dorée au crépuscule: `linear-gradient(160deg, #f8e1c4 0%, #d9b38c 45%, #5f6f8a 100%)` Des dégradés qui associent les températures. Comparez-les à une seule teinte allant du clair au foncé : elle paraît plate à côté. Une couverture façon magazine intitulée Longues soirées, numéro d’été Une couverture d’été. La température installe la saison avant même qu’on lise les mots. Une couverture façon magazine intitulée Matins tranquilles, numéro d’hiver Une couverture d’hiver avec la même mise en page. Gardez la lumière chaude, s’il y en a, bien à l’écart des mots. ## La température de couleur en photographie La balance des blancs est l’estimation, par l’appareil, de la température de la lumière. Une photo prise sous des ampoules chaudes avec une balance des blancs lumière du jour vire à l’orange ; une photo prise à l’ombre vire au bleu. Quand des photos côtoient des couleurs de marque, accordez leur température à la palette. Une marque chaude avec des photos froides et bleues paraît décousue. Teinter les photos dans les couleurs de la palette est une autre solution : voyez [les photos en bichromie](https://gradiently.design/fr/guide/photo-duotone-in-mark-colours). ### À éviter - Gris chauds et froids mêlés dans une même mise en page - Photos froides et bleues pour une marque chaude - Une seule teinte du clair au foncé pour créer la profondeur - Juger une couleur sous une lampe de bureau chaude ### À faire - Une seule famille de neutres, utilisée partout - Des photos corrigées selon la chaleur de la palette - Lumière chaude et ombre froide, ou l’inverse - Vérifier la couleur à la lumière du jour ou sur un écran calibré Les Marks de Gradiently intègrent la lumière à leur recette : ils se lisent comme une surface éclairée plutôt que comme un aplat, à toutes les tailles dans lesquelles vous créez. ## FAQ ### Qu’est-ce que la température de couleur en design ? Elle indique si une couleur ou une lumière tire vers le chaud, côté orange et rouge, ou vers le froid, côté bleu. Les designers s’en servent pour donner le ton et créer de la profondeur. ### Un kelvin plus élevé est-il plus chaud ou plus froid ? D’aspect plus froid. Les valeurs élevées en kelvins produisent une lumière plus bleue : 6 500 K paraît plus froid que 2 700 K. ### Quelle est la température de couleur de la lumière du jour ? Le soleil de midi tourne autour de 5 500 K et un ciel couvert autour de 6 500 K. Le blanc de référence sRGB, D65, est d’environ 6 500 K. ### Quelle différence entre gris chaud et gris froid ? Le gris chaud tire légèrement vers le brun ou le beige ; le gris froid, légèrement vers le bleu. Choisissez une famille et utilisez-la de façon cohérente.