Degradado marrón: códigos de café, caramelo y tierra

Un degradado marrón es en realidad un naranja oscuro y suavizado que va de profundo a claro: espresso a crema, chocolate a caramelo, arcilla a arena. Mantén ese tono cálido en cada parada y el marrón se ve rico, acogedor y artesanal. Deja que se deslice hacia el gris o el verde y parecerá barro. Abajo tienes códigos para marrones de café, caramelo, chocolate, tierra y whisky, y las combinaciones que les van bien.

Por qué los degradados marrones se vuelven turbios

No hay marrón en el arcoíris. Lo que llamamos marrón es naranja o rojo con la luminosidad bajada y la saturación suavizada. Eso tiene una consecuencia práctica: si una parada de tu degradado pierde calidez, por exceso de gris o un matiz de verde, toda la mezcla se lee como sucia. Mantén cada parada en el lado cálido y oscurece bajando la luminosidad en lugar de añadir negro. Los degradados turbios muestran el efecto lado a lado.

Puedes construir un degradado marrón propio a partir de cualquier naranja en un selector de color que muestre tono, saturación y luminosidad. Son cuatro pasos:

1. 1

   Elige un tono cálido

   Escoge un tono entre unos 20 y 40 grados: más bajo para marrones rojizos como el ladrillo y la terracota, más alto para los dorados como el caramelo.

2. 2

   Suaviza la saturación

   Baja la saturación a un valor entre el 35% y el 65%. Totalmente saturado, sigue siendo naranja; demasiado baja, se vuelve gris.

3. 3

   Fija tres paradas de luminosidad

   Usa el mismo tono en tres niveles de luminosidad, por ejemplo 10%, 30% y 60%. Ese reparto es lo que hace visible la mezcla.

4. 4

   Calienta un poco el extremo claro

   Desplaza la parada más clara unos grados hacia el amarillo. La luz real sobre madera, café o arcilla se ve más cálida en los reflejos.

Códigos de degradado de café

Los marrones de café son los más útiles del conjunto. El espresso es casi negro y lleva texto claro con verdadera profundidad. El chorro de crema va de la espuma pálida en lo alto de una taza al café de debajo. El moca queda en medio y es un fondo fuerte y neutro para cartas y listas de precios.

Las cafeterías y los tostadores encontrarán una identidad completa construida sobre estos tonos en branding para cafeterías, e ideas de bolsas y etiquetas en packaging para tostadores de café.

Códigos de degradado de caramelo y chocolate

El caramelo es el marrón en su versión más dorada y amable. Brilla, lo que lo hace ideal para panaderías, miel, ofertas de otoño y todo lo dulce. El chocolate es lo contrario: profundo, brillante e indulgente. Un degradado radial con un reflejo suave da al chocolate el brillo que tiene en la vida real.

Degradados de tierra, arcilla y terracota

Los marrones tierra tiran al rojo y parecen hechos a mano: arcilla, ladrillo, cuero, nogal. Van bien con cerámica, tiendas de plantas, equipo de exterior y todo lo que tenga un aire natural o mediterráneo. La terracota en particular se ha vuelto favorita de las marcas cálidas y modernas porque se lee a la vez terrosa y fresca.

Para ampliarlos a un esquema completo, consulta los colores tierra y las paletas de colores de otoño. Para el extremo más claro de la familia, arena y avena, los códigos de degradados beige recogen desde la arcilla del desierto.

Cómo mantener cálida una mezcla marrón larga en CSS

Los degradados del navegador se mezclan en sRGB por defecto, y una mezcla larga de un marrón profundo a un caramelo pálido puede hundirse en un centro algo grisáceo. Pedir al navegador que interpole en OKLCH mantiene el tono y el croma más estables de extremo a extremo. Es compatible con las versiones actuales de los principales navegadores, y el hex de reserva cubre el resto.

.brown-hero {
  /* fallback for older browsers */
  background: linear-gradient(160deg, #2a1810 0%, #a85f24 55%, #fbe3b8 100%);
  /* steadier warmth through the middle */
  background: linear-gradient(160deg in oklch, oklch(0.24 0.04 45) 0%, oklch(0.52 0.11 55) 55%, oklch(0.92 0.06 80) 100%);
}

Los degradados CSS en OKLCH explican el espacio de color y cuándo merece la línea extra.

Qué combinar con un degradado marrón

Un degradado marrón en una publicación real

Los fondos marrones llevan especialmente bien las noticias cálidas y cotidianas: un tueste nuevo, un horneado de temporada, un taller. El texto crema sobre el extremo profundo es la opción segura, y un acento mostaza o caramelo en una palabra añade algo de energía. Las ideas de Instagram para panaderías tienen un mes de publicaciones que van con estos tonos.

Si publicas cada semana, lo difícil es mantener todas las publicaciones en el mismo marrón cálido. Con Gradiently eliges un Mark marrón cálido una vez y todas las plantillas, stories y cartas lo lucen, y la tinta automática elige texto crema o espresso para cada línea, así que nada se pierde en las esquinas más oscuras.