# Paletas de colores neutros que aun así tienen carácter

[Canonical HTML page](https://gradiently.design/es/guide/neutral-color-palettes)

El beige, el gris y el blanco pueden parecer caros o parecer que nadie tomó una decisión. La diferencia es la temperatura, el rango y una pequeña sorpresa. Aquí tienes ocho paletas neutras con códigos y las reglas que las mantienen vivas.

## The short version

- Una paleta de colores neutros se construye con colores de baja saturación como blanco, marfil, beige, topo, gris, carbón y casi negro.
- Los neutros tienen temperatura: los neutros cálidos se inclinan al amarillo, al rojo o al marrón, y los neutros fríos al azul o al verde.
- Una paleta neutra se ve plana cuando todos los colores tienen la misma luminosidad, así que incluye al menos un tono muy claro, uno medio y uno muy oscuro.
- La mayoría de las paletas neutras necesitan un color de acento en pequeñas cantidades para darles un punto de atención.
- Los neutros medios como el topo y la piedra suelen fallar el contraste para texto corrido sobre fondo claro, así que compón el texto con el tono más oscuro.

Una buena **paleta de colores neutros** usa colores con muy poca saturación, como marfil, arena, topo, piedra, carbón y casi negro, y les da carácter de tres maneras: se compromete con una temperatura, recorre todo el camino de claro a oscuro y añade un pequeño acento. Sáltate eso y obtienes el beige que parece un valor por defecto. Abajo tienes ocho paletas con códigos copiables y el razonamiento de cada una, para que puedas ajustarlas en lugar de copiarlas.

## Neutros cálidos, fríos y verdaderos

Muy pocos neutros carecen de color de verdad, y los que lo hacen pueden resultar fríos. La mayoría se inclina hacia algún lado, y esa inclinación marca el ambiente. Mezclar por accidente un beige cálido con un gris azulado frío es la razón más común de que un esquema neutro se sienta algo raro.

| Familia | Se inclina hacia | Sensación | Códigos de ejemplo |
| --- | --- | --- | --- |
| Neutros cálidos | Amarillo, rojo, marrón | Suave, vivido, hospitalario | Marfil `#F3EEE6`, arena `#D9CBB4`, topo `#8A8178` |
| Neutros fríos | Azul, verde | Limpio, técnico, callado | Neblina `#ECEEEF`, pizarra `#6B7075`, grafito `#1F2326` |
| Greige | Equilibrado entre gris y beige | Calmado, adaptable | Greige `#BDB6AC`, piedra `#A39A8F` |
| Gris verdadero | Casi nada | Neutro, a veces frío | `#F2F2F2`, `#8C8C8C`, `#222222` |

Elige una familia como base. Un solo color de la familia opuesta puede funcionar como acento deliberado, nunca como un casi acierto.

[Colores cálidos y fríos](https://gradiently.design/es/guide/warm-and-cool-colors) profundiza en la temperatura, y [temperatura de color](https://gradiently.design/es/guide/color-temperature) explica cómo la desplazan la iluminación y las pantallas.

## Ocho paletas neutras con códigos hex

Cada paleta tiene un fondo claro, uno o dos medios, un oscuro para el texto y, en la mayoría de los casos, un acento. Lee los nombres como un briefing: describen el lugar donde la paleta se sentiría en casa.

- Lino: #f3eee6
- Arena: #d9cbb4
- Topo: #8a8178
- Espresso: #2b2724
- Acento terracota: #b5543a

Café de galería. Cálida del fondo al texto, con terracota para un botón, un precio o una línea.

- Neblina: #eceeef
- Peltre: #c3c8cc
- Pizarra: #6b7075
- Grafito: #1f2326
- Acento azul señal: #3d6bff

Estudio de software. Grises fríos con un único azul saturado, la paleta clásica de las interfaces de producto.

- **Avena y oliva:** avena `#E9E1D2`, lino crudo `#CDBF9F`, oliva `#6E6B4A`, corteza `#2F2A22`. Natural sin el tópico de las hojas verdes.
- **Casa de piedra:** tiza `#F5F3EF`, greige `#BDB6AC`, piedra `#A39A8F`, carbón `#34312D`, latón `#B08D57`. Interiores, arquitectura, lujo discreto.
- **Papel y tinta:** papel `#FAF7F0`, papel prensa `#E4DED2`, lápiz `#5C544C`, tinta `#151515`, rojo editor `#C8372D`. Editorial y serio.
- **Gris de vidrio marino:** niebla `#EEF1EF`, vidrio marino `#B9C6C0`, puerto `#5E6F6A`, profundo `#1C2624`. Frío, pero suavizado por el verde.
- **Neutro rubor:** porcelana `#F7F0EC`, piedra rubor `#DCC7BE`, topo malva `#8C7470`, cacao `#33221F`. Cálido y suave, bueno para belleza y bienestar.
- **Neutro nocturno:** ónix `#121212`, humo `#2A2826`, ceniza `#77716B`, hueso `#E9E2D6`. Un fondo oscuro con texto de luz cálida.

Antes de decidirte por una, pruébala con material real. Pon tu logotipo, una foto de producto y un párrafo de texto sobre cada fondo. Las fotografías suelen traer su propia calidez o frialdad, y una paleta que pelea con tu fotografía nunca se sentirá calmada, por muy cuidadosamente que la hayas elegido.

## Cómo dar carácter a una paleta neutra

1. **Comprométete con una temperatura** Elige cálida o fría y comprueba cada color con ella. Pon tus muestras una al lado de otra: todo lo que se vea algo verdoso junto a un beige cálido está en la familia equivocada.
2. **Estira el rango** Incluye un tono cercano al blanco, un tono medio y un tono cercano al negro. Las paletas neutras hechas solo de beiges medios no tienen profundidad ni un color de texto legible.
3. **Añade un acento** Un solo color saturado en dosis pequeñas da al ojo un sitio donde posarse. [Color de acento](https://gradiently.design/es/guide/accent-color) muestra cuánto es suficiente.
4. **Aporta textura** Los neutros lucen más ricos con grano, papel o un cambio suave de luz. Un rectángulo beige plano parece inacabado; el mismo beige con un poco de textura parece un material.
5. **Usa la proporción, no más colores** La mayor parte de la superficie se queda clara, los tonos medios se llevan las formas grandes y el oscuro carga con las palabras. La [regla 60 30 10](https://gradiently.design/es/guide/60-30-10-rule) es un buen reparto inicial.

## Degradados neutros que no aburren

Un degradado neutro funciona cuando el cambio está en la luz y no en el matiz. Piensa en la luz del día cayendo sobre una pared de yeso: el color apenas se mueve, el brillo sí. Mantén cerca las paradas y añade grano para ocultar el banding, que se nota con facilidad en mezclas pálidas y de bajo contraste.

- Luz de yeso: `radial-gradient(circle at 25% 20%, #fbf8f3 0%, #eae1d3 50%, #cdbf9f 100%)`
- Cielo cubierto: `linear-gradient(170deg, #eceeef 0%, #c3c8cc 60%, #8f969b 100%)`
- Ocaso espresso: `radial-gradient(circle at 70% 30%, #5c544c 0%, #2b2724 50%, #121212 100%)`
- Piedra rubor: `linear-gradient(160deg, #f7f0ec 0%, #dcc7be 55%, #b5948a 100%)`

Cuatro degradados neutros. Cada uno se mueve sobre todo en luminosidad, que es lo que los mantiene calmados.

Para más, mira [degradados sutiles](https://gradiently.design/es/guide/subtle-gradients), [degradados beige](https://gradiently.design/es/guide/beige-gradient) y [degradados grises](https://gradiently.design/es/guide/grey-gradient).

## Texto y contraste sobre fondos neutros

Las paletas neutras parecen suaves, lo que tienta a usar texto suave. El topo `#8A8178` sobre lino `#F3EEE6` mide solo 3,31:1, por debajo del 4,5:1 que pide WCAG para el texto corrido. El espresso `#2B2724` sobre el mismo lino llega a 12,82:1. Usa tu neutro más oscuro para todo lo que la gente necesite leer y guarda los tonos medios para formas, bordes y texto de exhibición grande.

Una publicación vertical de panadería en colores neutros suaves donde el texto pequeño de apoyo apenas se ve

Las palabras de bajo contraste sobre un fondo neutro pálido pierden primero la línea de apoyo.

La misma publicación de panadería con texto claro y legible sobre una zona más calmada del fondo neutro

Con el fondo más calmado detrás de las palabras, se lee cada línea y la paleta sigue siendo suave.

Gradiently lo resuelve automáticamente: un Mark se asienta detrás de tus palabras y elige tipografía clara u oscura línea a línea a partir de su propia paleta, así que un fondo neutro y tranquilo nunca te cuesta legibilidad. Comprueba tú mismo cualquier pareja de colores con [contraste de color](https://gradiently.design/es/guide/color-contrast-accessibility).

## FAQ

### ¿Qué colores hay en una paleta de colores neutros?

Blanco, marfil, crema, beige, arena, topo, greige, gris, carbón y casi negro, además de las versiones ligeramente teñidas de cada uno. La mayoría de las paletas neutras incluyen también un color de acento.

### ¿Qué es el greige?

El greige es una mezcla de gris y beige que se sitúa entre lo cálido y lo frío, como `#BDB6AC`. Funciona como puente cuando una paleta tiene que encajar tanto en entornos cálidos como fríos.

### ¿Qué color de acento va con los neutros?

Los neutros cálidos van con terracota, óxido, oliva o latón. Los neutros fríos van con un azul saturado, un verde claro o un rojo profundo. Usa el acento con mesura para que siga siendo especial.

### ¿Cómo evito que una paleta neutra resulte aburrida?

Comprométete con una temperatura, recorre de claro a oscuro, añade un único acento y da textura a las superficies. Lo que aburre son los beiges medios planos sin rango.

### ¿Son buenos los colores neutros para el branding?

Sí, sobre todo para marcas premium, editoriales y de interiorismo. Como muchas marcas usan neutros, dale a la tuya algo distintivo, como un acento, una tipografía o un material de fondo concretos.