# Colores cálidos y fríos: usar la temperatura con intención [Canonical HTML page](https://gradiently.design/es/guide/warm-and-cool-colors) Todo color tiene temperatura, incluidos tus grises y tus blancos. Aprende a leerla y podrás hacer que un diseño se sienta más cercano, más tranquilo o más luminoso sin cambiar un solo tono. ## The short version - Los colores cálidos y fríos son las dos mitades de la rueda de color: los rojos, naranjas y amarillos se sienten cálidos, mientras que los verdes, azules y violetas se sienten fríos. - La temperatura es relativa, así que un violeta parece cálido junto al azul y frío junto al naranja. - Los colores cálidos tienden a sentirse más cercanos y enérgicos, mientras que los fríos tienden a alejarse y calmar, y por eso las colinas lejanas de un paisaje se ven azules. - Los grises y los blancos también tienen temperatura, y mezclar sin querer neutros cálidos y fríos es un motivo habitual por el que un diseño se siente algo raro. - Un degradado de cálido a frío se mantiene limpio cuando pasa por un vecino compartido, como el rosa o el violeta, en lugar de pasar por el gris. Los **colores cálidos y fríos** son las dos mitades de la rueda de color. Los rojos, naranjas y amarillos se sienten cálidos, como el fuego y la luz del sol; los verdes, azules y violetas se sienten fríos, como el agua, la sombra y el anochecer. La temperatura cambia cómo se siente un diseño antes de que nadie lo lea: los colores cálidos avanzan y dan energía, los fríos se asientan atrás y calman. Usarla con intención es una de las formas más rápidas de que una paleta parezca pensada. - Rojo cálido: #d7263d - Naranja cálido: #f46036 - Amarillo cálido: #f7b32b - Verde frío: #2e9e6f - Azul frío: #1b7fbd - Violeta frío: #5b3cc4 Tres colores cálidos y tres fríos de lados opuestos de la rueda. La división pasa más o menos entre el verde amarillento y el rojo violáceo. ## La temperatura es relativa La frontera entre cálido y frío no es fija. Los verdes amarillentos y los rojos violáceos están en el límite, y cualquier color parece más cálido junto a otro más frío. Un magenta junto a un azul cielo se lee cálido; el mismo magenta junto a un naranja se lee frío. Por eso la temperatura se juzga en la paleta, no muestra a muestra. - Magenta junto a azul: cálido: `linear-gradient(90deg, #1b7fbd 0% 50%, #b83b8f 50% 100%)` - Magenta junto a naranja: frío: `linear-gradient(90deg, #f46036 0% 50%, #b83b8f 50% 100%)` El mismo magenta a la derecha en los dos. Su temperatura cambia con su vecino. Los colores también tienen temperatura *dentro* de un mismo tono. Un rojo que tira a naranja es más cálido que uno que tira a azul, y un azul con un toque de verde es más cálido que uno que tira a violeta. Los diseñadores llaman subtono a esa inclinación, y es lo que hace que dos «rojos» choquen. ## Cómo crean profundidad los colores cálidos y fríos Los colores cálidos tienden a parecer que avanzan y los fríos a quedarse atrás. Los pintores de paisaje lo usan desde hace siglos: el aire dispersa la luz, así que las colinas lejanas se ven de verdad más azules y más pálidas, y nuestros ojos leen lo frío y pálido como lejano. Puedes tomar prestado el mismo efecto en el diseño plano. | Cualidad | Colores cálidos | Colores fríos | | --- | --- | --- | | Espacio | Avanzan, se sienten cerca | Retroceden, se sienten lejos | | Energía | Activos, urgentes, sociales | Tranquilos, estables, concentrados | | Ideales para | Botones, precios, titulares, comida | Fondos, superficies grandes, datos, salud | | En grandes cantidades | Pueden resultar estridentes o sofocantes | Pueden resultar fríos o distantes | | En la luz | Kelvin bajos, como una bombilla de 2700 K | Kelvin altos, como la luz de un día nublado | Tendencias, no leyes. La saturación y la luminosidad pueden darle la vuelta a la temperatura: un melocotón pálido retrocede más que un azul eléctrico. La regla práctica: pon los colores fríos en las superficies grandes del fondo y guarda los cálidos para lo que debe llegar primero a quien mira. Una llamada a la acción cálida en una página fría destaca sin necesidad de ser grande, lo que encaja muy bien con la [regla 60-30-10](https://gradiently.design/es/guide/60-30-10-rule). ## Neutros cálidos y fríos Los grises, los blancos y los negros también tienen temperatura, y eso importa más de lo que la gente cree. Un blanco roto cálido se siente como papel; un blanco frío se siente como una pantalla o una clínica. Un diseño que mezcla un fondo gris cálido con texto gris frío suele parecer algo desajustado sin que nadie sepa decir por qué. - Papel cálido: #f5efe6 - Piedra cálida: #b8ada0 - Carbón cálido: #3d3530 - Bruma fría: #eef2f6 - Pizarra fría: #a3adb8 - Carbón frío: #2b3240 Los neutros cálidos tiran hacia el marrón y el crema, los fríos hacia el azul. Elige una sola familia para todo un diseño. ```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; } ``` Mantener los neutros en conjuntos cálidos y fríos con nombre hace que las mezclas accidentales sean fáciles de detectar al revisar el código. ## Mezclar cálido y frío en un mismo degradado Los degradados de cálido a frío están entre los más llamativos que existen, y los atardeceres lo demuestran. También son los que más fácilmente salen mal, porque los colores cálidos y fríos suelen estar en lados opuestos de la rueda y una mezcla directa entre ellos pasa por el gris. La solución es llevar la mezcla por un color que pertenezca a ambos lados, normalmente rosa, magenta o violeta. - Naranja a azul, directo: `linear-gradient(90deg, #f46036 0%, #1b7fbd 100%)` - Naranja a azul pasando por rosa: `linear-gradient(90deg, #f46036 0%, #e0457b 35%, #8a3fb8 65%, #1b7fbd 100%)` - Anochecer: frío arriba, cálido abajo: `linear-gradient(180deg, #2b3a67 0%, #8a3fb8 45%, #f28f6b 80%, #ffd29d 100%)` - Amarillo a verde pasando por lima: `linear-gradient(135deg, #f7b32b 0%, #8cc63f 50%, #2e9e6f 100%)` La mezcla directa cae en un centro apagado. Las demás pasan por un vecino compartido, así que cada punto del recorrido es un color de verdad. [Degradados turbios](https://gradiently.design/es/guide/muddy-gradients) explica la geometría. Aquí la proporción también importa. Deja que una temperatura mande y que la otra aparezca como contraste. Un degradado mayormente frío con un brillo cálido en un borde se siente como la luz del anochecer; un reparto a partes iguales entre cálido y frío se siente indeciso. [Degradados de atardecer](https://gradiently.design/es/guide/sunset-gradient) tiene muchos más ejemplos de cálido y frío compartiendo un mismo campo. ## Colores cálidos y fríos en el diseño cotidiano - **La pizarra del menú de una cafetería:** fondo crema cálido, texto color espresso y un solo acento terracota, para que se sienta como la sala en la que cuelga - **Una app bancaria:** superficies frías de pizarra y azul, con un único ámbar cálido para los avisos que requieren atención - **El póster de un evento nocturno:** un campo violeta frío y profundo con un titular naranja cálido que salta hacia delante - **El lanzamiento de una línea de cuidado de la piel:** bruma fría y salvia, realzadas con un solo melocotón cálido para el nombre del producto - **Una promo deportiva:** rojo y naranja cálidos al mando, un marino frío solo para la letra pequeña En cada caso, una temperatura marca el clima y la otra dirige la atención. Esa combinación es también una forma suave de contraste de [colores complementarios](https://gradiently.design/es/guide/complementary-colors), sin el choque total de los opuestos reales. ## Cómo elegir la temperatura de tu marca 1. **Parte de la sensación** Las marcas acogedoras, vivas y cercanas suelen tirar a cálidas. Las marcas precisas, tranquilas y de confianza suelen tirar a frías. Ninguna es mejor; elige la que encaje con lo que haces. 2. **Elige una temperatura principal** Construye casi toda tu paleta, incluidos los neutros, en un solo lado. Eso da a la marca un clima coherente. 3. **Añade un acento del otro lado** Un solo acento cálido en una marca fría, o uno frío en una marca cálida, da contraste y un lugar claro donde se pose la mirada. 4. **Pruébala en contexto** Revisa la paleta en las pantallas y materiales reales donde va a vivir. Los colores cambian entre pantallas y de nuevo al imprimir; mira [cómo elegir los colores de tu marca](https://gradiently.design/es/guide/how-to-choose-brand-colors). ## FAQ ### ¿Qué son los colores cálidos y fríos? Los colores cálidos son los rojos, naranjas y amarillos; los fríos son los verdes, azules y violetas. Los colores de la frontera, el verde amarillento y el rojo violáceo, pueden leerse de un modo u otro según sus vecinos. ### ¿El morado es un color cálido o frío? Depende de su inclinación y de sus vecinos. Los morados rojizos y los magentas se leen cálidos junto al azul, mientras que los violetas azulados se leen fríos, y cualquier morado parece frío junto al naranja. ### ¿De verdad los colores cálidos avanzan? Tienden a parecer más cercanos, sobre todo cuando están saturados, mientras que los colores fríos y pálidos tienden a retroceder. La luminosidad y la saturación pueden anular el efecto. ### ¿Se pueden mezclar colores cálidos y fríos en un mismo diseño? Sí. Deja que una temperatura mande, usa la otra como acento y, en los degradados, mezcla pasando por un vecino compartido como el rosa o el violeta para evitar un centro gris.