# Temperatura de color en diseño: luz cálida, fría y neutra [Canonical HTML page](https://gradiently.design/es/guide/color-temperature) Todo color tira a cálido o a frío, incluso los grises. Aquí tienes qué significa la escala Kelvin, por qué va al revés de como hablamos de calidez y cómo usar la temperatura para marcar el ambiente de un diseño. ## The short version - La temperatura de color describe si una luz o un color tira hacia el naranja y el rojo, que se sienten cálidos, o hacia el azul, que se siente frío. - Las fuentes de luz se miden en kelvin: la luz de una vela ronda los 1900 K, las bombillas domésticas los 2700 K y el blanco estándar de sRGB, D65, los 6500 K. - Los valores de kelvin más altos se ven más azules, así que en la luz un número de temperatura más alto significa un color de aspecto más frío. - Los neutros también tienen temperatura: los grises cálidos tiran hacia el marrón o el beis y los grises fríos tiran hacia el azul. - Muchas imágenes convincentes combinan luz cálida con sombras frías, o al revés, porque ese contraste se lee como profundidad natural. La **temperatura de color** es lo cálida o fría que se siente una luz o un color. Cálido significa que tira hacia el naranja de una vela y el rojo; frío, que tira hacia el azul de la luz del día; neutro queda en medio. En la luz se mide en kelvin: una vela ronda los 1900 K y un cielo nublado los 6500 K. En diseño se usa para marcar el ambiente: las paletas cálidas se sienten cercanas y acogedoras, las frías serenas y amplias, y mezclar ambas le da profundidad a una imagen. ## La escala Kelvin, y por qué parece al revés La cifra en kelvin viene de la física: es la temperatura que tendría que alcanzar un objeto incandescente ideal para emitir luz de ese color. Una barra de metal que se calienta poco a poco brilla en rojo, luego en naranja, después en blanco amarillento y, a temperaturas extremas, en blanco azulado. Así que un número más alto significa una luz más azul, que los diseñadores llaman más fría. El vocabulario va al revés que la física, y al principio confunde a todo el mundo. | Fuente de luz | Temperatura aproximada | Cómo se ve | | --- | --- | --- | | Llama de vela | 1900 K | Ámbar profundo | | Bombilla doméstica de luz cálida | 2700 K | Blanco anaranjado suave | | Lámpara halógena | 3000 K | Blanco cálido | | Luz blanca fría de oficina | 4000 K | Blanco neutro | | Sol de mediodía | 5500 K | Blanco limpio | | Cielo nublado, punto blanco D65 de sRGB | 6500 K | Blanco ligeramente frío | | Sombra abierta bajo un cielo azul | 10.000 K o más | Claramente azul | Valores típicos. Las fuentes reales varían, y las bombillas se venden por franjas como 2700 K y 4000 K. De unos 1900 K a 10.000 K: `linear-gradient(90deg, #ff8912 0%, #ffa757 18%, #ffb46b 30%, #ffd1a3 48%, #ffecdf 62%, #fff9fb 74%, #e3e9ff 87%, #c9d9ff 100%)` Colores aproximados en pantalla de la luz, de la vela a la sombra azul. Tus ojos se adaptan a la luz en la que estés, por eso una habitación a 2700 K parece blanca cuando llevas un rato en ella. Esa adaptación importa en las pantallas. El estándar sRGB, que da por hecho la mayor parte del color web y de apps, usa D65, unos 6500 K, como blanco. Funciones como los modos nocturnos desplazan el blanco de la pantalla hacia lo cálido, así que los colores que elegiste se verán más cálidos para quien lea de noche. Diseña para el estándar y acepta la desviación. ## Colores cálidos, fríos y neutros Fuera de la iluminación, la temperatura depende de hacia qué lado del círculo tira un color. Rojos, naranjas y amarillos se leen cálidos; azules, verdes azulados y violetas azulados, fríos. Los verdes y los morados quedan en medio y pueden ir hacia cualquier lado: un oliva es cálido, un menta es frío. [Colores cálidos y fríos](https://gradiently.design/es/guide/warm-and-cool-colors) trata el círculo en detalle; lo útil aquí es que la temperatura también existe dentro de un mismo tono. Hay azules cálidos y rojos fríos. - Rojo cálido, ladrillo: #c2372b - Rojo frío, frambuesa: #c2185b - Azul cálido, vaquero: #2b5d8a - Azul frío, cobalto: #2563eb - Verde cálido, oliva: #7a8b3a - Verde frío, menta: #3fbf9f Tres tonos, cada uno en versión cálida y fría. Los rojos cálidos tiran a naranja y los fríos a azul; lo mismo vale para cualquier tono. La temperatura hace gran parte del trabajo emocional de una paleta, a menudo más que el propio tono. Los esquemas cálidos se sienten cercanos, sociables y enérgicos; los fríos, tranquilos, amplios y controlados. [Psicología del color](https://gradiently.design/es/guide/color-psychology) explora esas asociaciones y sus límites. La temperatura también interactúa con la intensidad: una paleta fría llevada a plena [saturación](https://gradiently.design/es/guide/color-saturation) deja de sentirse tranquila, y una cálida muy apagada empieza a sentirse vintage en lugar de viva. ## Los neutros también tienen temperatura El gris puro es raro en el buen diseño. La mayoría de los grises bien usados tiran un poco a cálido, hacia la piedra y el topo, o un poco a frío, hacia el pizarra y el acero. Mezclar las dos familias en una misma maqueta suele verse turbio sin que nadie sepa por qué. Elige una familia y úsala en fondos, bordes y texto secundario de principio a fin. - Grises cálidos: del papel al tostado: `linear-gradient(90deg, #f6f3ee 0%, #e4ded4 25%, #bdb4a7 50%, #7d7468 75%, #2f2a25 100%)` - Grises fríos: de escarcha a pizarra: `linear-gradient(90deg, #f3f5f8 0%, #dde2e9 25%, #aab3c0 50%, #646e7d 75%, #1e242d 100%)` - Grises neutros puros: `linear-gradient(90deg, #f5f5f5 0%, #e0e0e0 25%, #b3b3b3 50%, #707070 75%, #262626 100%)` Tres escalas de gris. Pon un gris cálido junto a uno frío y la diferencia salta a la vista; por separado, ambos se leen simplemente como 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; } ``` Una escala de grises cálidos como tokens. Cambia a los valores fríos para una sensación más nítida y técnica. Los neutros cálidos encajan en marcas de comida, hostelería, bienestar y editoriales. Los fríos, en software, finanzas y todo lo que deba sentirse preciso. [Paletas de colores neutros](https://gradiently.design/es/guide/neutral-color-palettes) tiene más conjuntos. ## Luz cálida, sombra fría Los pintores saben desde hace mucho que la luz y la sombra difieren en temperatura, no solo en brillo. Las superficies al sol se vuelven cálidas mientras las sombras recogen el azul del cielo. Recréalo en un degradado o una ilustración y enseguida se siente más real que una versión clara y oscura de un solo tono. También funciona al revés: luz de luna fría con sombras cálidas de lámpara. En los fondos, esta es la diferencia entre un degradado que parece iluminado y uno que parece una muestra de color. Coloca la luz cálida donde debe ir primero la mirada, deja que los tonos fríos se reúnan en los bordes y mantén el texto sobre la zona más tranquila. [Fondo degradado](https://gradiently.design/es/guide/gradient-background) recorre el método completo. - Luz de atardecer, sombra azul: `radial-gradient(circle at 25% 25%, #ffd29a 0%, #e98a5a 35%, #3b3f6b 80%, #1a1c33 100%)` - Luz de luna, oscuridad cálida: `radial-gradient(circle at 75% 20%, #cfe3ff 0%, #6d86b8 40%, #3d2a2a 85%)` - De la hora dorada al anochecer: `linear-gradient(160deg, #f8e1c4 0%, #d9b38c 45%, #5f6f8a 100%)` Degradados que combinan temperaturas. Compáralos con un solo tono que va de claro a oscuro, que a su lado se ve plano. Una portada de estilo revista titulada Tardes largas, número de verano Una portada de verano. La temperatura marca la estación antes de que nadie lea las palabras. Una portada de estilo revista titulada Mañanas tranquilas, número de invierno Una portada de invierno con la misma maquetación. Si hay luz cálida, que quede bien lejos de las palabras. ## La temperatura de color en las fotografías El balance de blancos es la estimación que hace una cámara de la temperatura de la luz. Una foto hecha bajo bombillas cálidas con balance de blancos de luz diurna sale naranja; una hecha a la sombra sale azul. Cuando las fotos van junto a los colores de marca, iguala su temperatura con la paleta. Una marca cálida con fotos frías y azuladas se siente inconexa. Teñir las fotos con los colores de la paleta es otra solución: consulta [fotos duotono](https://gradiently.design/es/guide/photo-duotone-in-mark-colours). ### Evita - Grises cálidos y fríos mezclados en una maqueta - Fotos frías y azuladas en una marca cálida - Un solo tono de claro a oscuro para dar profundidad - Juzgar el color bajo una lámpara de escritorio cálida ### Haz - Una sola familia de neutros, usada en todas partes - Fotos corregidas a la calidez de la paleta - Luz cálida con sombra fría, o al revés - Revisar el color con luz de día o en una pantalla calibrada Los Marks de Gradiently llevan la luz como parte de su receta, así que se leen como una superficie iluminada y no como una muestra plana, en cada tamaño en el que diseñes. ## FAQ ### ¿Qué es la temperatura de color en diseño? Describe si un color o una luz tira a cálido, hacia el naranja y el rojo, o a frío, hacia el azul. Los diseñadores la usan para marcar el ambiente y crear profundidad. ### ¿Más kelvin es más cálido o más frío? Más frío a la vista. Los valores de kelvin más altos producen una luz más azul, así que 6500 K se ve más frío que 2700 K. ### ¿Qué temperatura de color tiene la luz del día? El sol de mediodía ronda los 5500 K y un cielo nublado los 6500 K. El blanco estándar de sRGB, D65, es de unos 6500 K. ### ¿Qué diferencia hay entre un gris cálido y un gris frío? El gris cálido tira ligeramente hacia el marrón o el beis; el gris frío, ligeramente hacia el azul. Elige una familia y úsala de forma constante.