# Degradado beige: códigos neutros cálidos y serenos

[Canonical HTML page](https://gradiently.design/es/guide/beige-gradient)

El beige es fácil de acertar casi y sorprendentemente difícil de acertar del todo. El truco es elegir un subtono, mantener rango suficiente para que se vea la mezcla y darle textura.

## The short version

- Un degradado beige se ve sereno y caro cuando todas las paradas comparten un subtono: rosa, amarillo o gris.
- Los degradados beige necesitan un rango de luminosidad más amplio de lo que la gente espera, o la mezcla desaparece y el diseño se ve plano.
- Los degradados claros y de poco contraste forman bandas con facilidad en pantalla, y una capa de grano fino es el arreglo más fiable.
- Los marrones oscuros cálidos como el espresso se leen mejor sobre beige que el negro puro, y el texto blanco rara vez funciona sobre él.
- Los degradados arena van del crema pálido a un dorado tostado, como una duna que se oscurece en su lado en sombra.

Un **degradado beige** mezcla neutros cálidos, crema, arena, avena y lino, de un tono claro a otro algo más profundo, todos con el mismo subtono. Bien hecho resulta sereno, natural y discretamente premium, por eso lo adoran el cuidado de la piel, el interiorismo, las bodas y la moda lenta. Mal hecho parece el escaneo de un sobre viejo. La diferencia se reduce a tres decisiones: un subtono, rango suficiente y un poco de textura. A continuación, los códigos para cada estilo.

## Elige un subtono antes que un color

Todo beige se inclina hacia algún lado. Los beiges rosados son suaves y parecen piel. Los beiges amarillos son soleados y arenosos. Los beiges grises, a menudo llamados greige, resultan arquitectónicos y fríos. Mezclar subtonos en un degradado es la razón principal por la que el beige se ve sucio: una parada rosa junto a una gris se lee como una mancha y no como una mezcla. Decide primero y quédate ahí.

- Lino: #faf6ef
- Beige rubor: #ecd3c6
- Arena rosada: #d4ae9c
- Arena: #e8cfa8
- Duna de miel: #c9a273
- Greige: #ddd6cc
- Piedra: #b9b0a3
- Tinta espresso: #3b2a1e

Tres familias de subtono: rosa en el par rubor, amarillo en el par arena, gris en greige y piedra. El lino y el espresso funcionan con las tres.

## Códigos de degradado arena

Un **degradado arena** sigue una duna: brillante y cremoso en el lado que mira al sol, más profundo y dorado en el lado en sombra. Son los beiges más cálidos de aquí y los más indulgentes, porque el subtono amarillo evita que se vuelvan grises.

- Duna de arena: `linear-gradient(160deg, #f6ead6 0%, #e8cfa8 50%, #c9a273 100%)`
- Mediodía en el desierto: `linear-gradient(180deg, #fbf3e6 0%, #efd9b4 60%, #d9b27c 100%)`
- Sombra de la duna: `linear-gradient(135deg, #f2e2c9 0%, #d8b48a 45%, #a9805a 100%)`
- Arena mojada: `radial-gradient(ellipse at 30% 20%, #f3e5cf 0%, #d6bb94 50%, #b08d66 100%)`

Cuatro aspectos de arena. La sombra de la duna tiene el rango más amplio y aguanta mejor en tamaños pequeños; el mediodía en el desierto es el más brillante y admite texto oscuro en todas partes.

## Códigos de lino, avena y piedra

Son los beiges más tranquilos, más cercanos al crema y al greige. Hacen excelentes fondos para fotos de producto y lecturas largas, porque se quedan atrás y dejan que todo lo demás lleve la voz cantante. El lino es el más sutil, apenas un degradado; el beige rubor trae el subtono rosa; la piedra es el más frío, casi gris.

- Lino: `linear-gradient(180deg, #faf6ef 0%, #f1e8da 100%)`
- Latte de avena: `linear-gradient(150deg, #f5ede1 0%, #e6d5bf 55%, #cdb59a 100%)`
- Beige rubor: `linear-gradient(160deg, #f8ece6 0%, #ecd3c6 55%, #d4ae9c 100%)`
- Piedra: `linear-gradient(160deg, #f2efea 0%, #ddd6cc 50%, #b9b0a3 100%)`

Neutros suaves. Si un degradado beige parece un color plano en tu pantalla, el rango es demasiado pequeño: profundiza la última parada.

Para la familia más amplia de tonos serenos, consulta las [paletas de colores neutros](https://gradiently.design/es/guide/neutral-color-palettes) y los [colores tierra](https://gradiently.design/es/guide/earth-tone-colors). Cuando quieras el extremo más profundo de la misma familia, café y caramelo, los códigos de [degradados marrones](https://gradiently.design/es/guide/brown-gradient) continúan donde estos acaban.

## Por qué los degradados beige forman bandas y cómo arreglarlo

Los degradados claros de poco rango solo pasan por un puñado de valores de color distintos, así que la pantalla los dibuja como escalones visibles, y una compresión fuerte lo empeora. El beige es especialmente propenso. Una capa de grano fino rompe los escalones y, de regalo, hace que el beige parezca papel, yeso o tela en lugar de un color de pantalla. El [banding en degradados](https://gradiently.design/es/guide/gradient-banding) explica la causa en detalle.

```css
.sand {
  position: relative;
  background: linear-gradient(160deg, #f6ead6 0%, #e8cfa8 50%, #c9a273 100%);
}

.sand::after {
  content: "";
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0.18;
  mix-blend-mode: multiply;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='160' height='160'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E");
}
```

Un degradado arena con una capa de ruido SVG multiplicada encima. Sube la opacidad para una superficie más áspera y papelera.

Más recetas de grano, y hasta dónde llegar, están en los [degradados con grano](https://gradiently.design/es/guide/grainy-gradients). Los Marks de Gradiently llevan el grano como parte de su receta, así que un Mark beige llega con su textura ya equilibrada en cada tamaño.

## Colores de texto que van bien con el beige

| Tinta | Hex | Efecto | Úsalo para |
| --- | --- | --- | --- |
| Espresso | `#3b2a1e` | Cálido y suave, aún muy legible | Titulares y cuerpo sobre cualquier beige |
| Carbón | `#2b2b2b` | Nítido y moderno | Fondos piedra y greige |
| Oliva profundo | `#3d4a2f` | Natural, algo inesperado | Fondos arena y avena |
| Terracota | `#a4502f` | Acento cálido | Solo titulares grandes y precios |
| Blanco | `#ffffff` | Débil sobre beige claro | Solo titulares grandes sobre las paradas más profundas de la sombra de la duna |

El negro funciona, pero el marrón espresso mantiene todo el diseño dentro de la misma familia cálida.

## Un beige sereno, no apagado

### Se ve apagado

- Beiges rosados, amarillos y grises en una misma mezcla
- Dos paradas tan cercanas que la mezcla es invisible
- Una superficie digital limpia con bandas visibles
- Texto negro puro y una composición recargada
- Texto blanco sobre arena clara

### Se ve sereno

- Un subtono en todas las paradas
- Un rango claro del crema a la arena tostada
- Un grano fino que se lee como papel o yeso
- Texto espresso y espacio generoso
- Tinta oscura, con un acento terracota

El beige premia la contención. Pocas palabras, mucho espacio y una buena foto de producto se verán más caros que cualquier cantidad de decoración. Ese es el aspecto detrás de la mayoría del buen [diseño de marcas de cuidado de la piel](https://gradiently.design/es/guide/skincare-brand-design), y se traslada bien a papelería de boda y estudios de interiorismo.

Una publicación vertical sobre un fondo de color arena cálido con las palabras Menos, pero mejor en texto marrón oscuro

Una publicación de lanzamiento de cuidado de la piel en un Mark arena. Texto espresso, una línea, mucho aire.

## Dónde se gana su sitio un degradado beige

El beige trabaja más donde apoya algo más: un producto, una fotografía, unas pocas palabras cuidadas. Algunos lugares donde brilla, con los tamaños para diseñar:

- **Fotos de producto:** un degradado lino o avena detrás de un frasco o una pieza de cerámica, a 2048×2048 para una imagen de producto de Shopify, mantiene al objeto como protagonista.
- **Papelería de boda:** beige rubor o arena para invitaciones de 5×7 in (1500×2100 a 300 ppp), con texto espresso u oliva profundo. Más ideas en [paletas de colores para bodas](https://gradiently.design/es/guide/wedding-color-palettes).
- **Interiorismo y arquitectura:** degradados piedra y greige para portadas de porfolio y publicaciones de proyectos, donde la fotografía aporta el color. Consulta el [branding para interioristas](https://gradiently.design/es/guide/interior-designer-branding).
- **Secciones web:** un degradado lino detrás de un testimonio o una tabla de precios lo separa de las secciones blancas sin un borde duro.
- **Un feed de Instagram sereno:** alterna publicaciones arena con fotos y el feed se lee como un todo meditado.

Como el beige es tan sutil, el mismo degradado puede verse bien en una story y deslavazado en un banner ancho. Renderízalo para cada formato en lugar de estirar un archivo, y comprueba la parada más clara en un móvil a brillo máximo, donde el beige pálido puede derivar hacia el blanco liso.

## FAQ

### ¿Qué colores forman un degradado beige?

Tonos crema, arena, avena y lino que comparten un subtono, por ejemplo #f6ead6 a #e8cfa8 a #c9a273 para un degradado arena cálido.

### ¿Por qué mi degradado beige se ve sucio?

Normalmente mezcla subtonos, como un beige rosado junto a uno gris. Mantén todas las paradas en la misma familia.

### ¿Qué color de fuente va sobre un fondo beige?

Un marrón oscuro cálido como el espresso #3b2a1e se lee con claridad y es más suave que el negro. El carbón va bien con los tonos greige más fríos.

### ¿Cómo evito que un degradado claro forme bandas?

Amplía el rango entre la primera y la última parada, añade una capa de grano fino sobre el degradado y exporta como PNG en lugar de un JPEG comprimido.