# Cómo elegir los colores de una marca: un método paso a paso

[Canonical HTML page](https://gradiently.design/es/guide/how-to-choose-brand-colors)

Los colores de una marca se eligen, no se encuentran. Un método claro te lleva de la página en blanco a una paleta distintiva, legible y que siga siendo la adecuada dentro de dos años.

## The short version

- Para elegir los colores de una marca, parte del carácter y del público de la marca y mira después qué colores usa ya tu categoría.
- Una paleta de marca sólida se construye en torno a un color protagonista que la gente pueda asociar contigo, no a varios colores de igual peso.
- La mayor parte de una paleta de marca son neutros: un oscuro con matiz para el texto, un claro con matiz para los fondos y uno o dos colores de apoyo discretos.
- Un color de acento, usado con moderación, da a los botones y a los elementos destacados un lugar donde sobresalir.
- Toda paleta de marca debe probarse en cuanto al contraste del texto y en formatos reales, a tamaños pequeños y en impresión, antes de dejarla por escrito.

**Cómo elegir los colores de una marca**, en resumen: decide qué debe transmitir la marca, mira los colores que ya ocupan tus competidores, elige un color protagonista que te distinga, rodéalo de neutros y de un pequeño acento y prueba el conjunto en contraste y en diseños reales. Los pasos de abajo lo convierten en un método que puedes terminar en una tarde. El resultado es una paleta en la que cada color tiene una función, y no cinco colores que te gustan sin más.

Si eres nuevo en el tono, la saturación y la luminosidad, lee antes la [teoría del color básica](https://gradiently.design/es/guide/color-theory-basics). Cada paso te resultará más fácil.

## El método de un vistazo

1. **Escribe el carácter de la marca en tres palabras** Calma, precisión, calidez. Atrevida, juguetona, local. Estas palabras deciden la temperatura, la saturación y el contraste antes de que mires una sola muestra.
2. **Conoce a quien mira** Piensa en tu público, en dónde te verá y, si trabajas en varios países, en lo que significan allí los colores. Los [significados de los colores en el mundo](https://gradiently.design/es/guide/color-meanings-around-the-world) te ayudan.
3. **Explora tu categoría** Reúne los logotipos, las webs y los envases de diez competidores y anota sus colores principales. Buscas lo que está saturado y lo que está libre.
4. **Elige un color protagonista** Un color que la gente asocie contigo. Debe encajar con tus tres palabras y destacar en tu mapa de la categoría.
5. **Añade neutros** Un casi negro con matiz para el texto y un casi blanco con matiz para los fondos, más un tono de apoyo discreto.
6. **Añade un acento** Un color de contraste para botones, precios y elementos destacados, usado con moderación.
7. **Prueba el contraste** Comprueba cada pareja de texto y fondo con las relaciones de las WCAG.
8. **Prueba en contexto y déjalo por escrito** Pon la paleta en formatos reales y anota luego cada código y la función de cada color.

## Pasos 1 a 3: carácter, público y categoría

La mayoría de las paletas de marca fallan antes de elegir un color, porque nadie decidió qué debía transmitir la marca. Tres palabras bastan. *Cálida, artesanal, sin prisa* apunta a colores terrosos y apagados con contraste suave. *Afilada, rápida, técnica* apunta a colores fríos y saturados con contraste fuerte. La [psicología del color](https://gradiently.design/es/guide/color-psychology) trata lo que suelen señalar los colores y por qué el contexto importa más que las reglas.

Después, mira a la competencia. Supón que eres un pequeño tostador de café y los tostadores de tu zona usan sobre todo marrón, crema y negro. Otro marrón pasará desapercibido. Un mapa de la categoría lo hace visible.

| Competidor | Color principal | Transmite |
| --- | --- | --- |
| Tostador A | Marrón espresso | Tradicional |
| Tostador B | Crema y negro | Minimalista, clásico |
| Tostador C | Marrón kraft | Artesano |
| Tostador D | Verde bosque | Natural |
| Hueco | Naranja cálido, verde azulado profundo | Nadie cercano los usa |

Un mapa de categoría ilustrativo. Los colores saturados se ven con claridad en cuanto se escriben en un mismo sitio.

Ser distinto no significa ser aleatorio. Los mejores huecos siguen encajando con tus tres palabras. Un tostador cálido y artesanal podría tomar un naranja tostado; un azul eléctrico brillante sería distinto pero equivocado.

## Pasos 4 a 6: protagonista, neutros y acento

Un **color protagonista** es el que la gente recordará. Dale la mayoría de los momentos de color de la marca: el logotipo, el envase, el primer fotograma de cada post. Elegir dos o tres protagonistas iguales diluye el reconocimiento; uno solo es más fuerte.

Los neutros hacen la mayor parte del trabajo. El negro y el blanco puros se sienten genéricos; dales un ligero matiz hacia tu protagonista o hacia lo cálido o lo frío, y toda la paleta se siente emparentada. Después añade un color de apoyo discreto para paneles e ilustración, y un acento para las pocas cosas que deben destacar.

- Protagonista: naranja tostado: #c2410c
- Tinta: negro cálido: #1c1917
- Papel: blanco cálido: #faf7f2
- Apoyo: avena: #e7dccb
- Acento: verde azulado profundo: #0f766e

La paleta del tostador: un protagonista, dos neutros con matiz, un apoyo discreto y un acento frío del otro lado del círculo.

### Evita

- Cinco colores de igual importancia
- `#000000` y `#ffffff` puros como neutros
- Un acento usado en todas partes
- Elegir por tu color favorito personal

### Haz

- Un protagonista que lidere con claridad
- Neutros con matiz hacia la marca
- Un acento reservado para acciones y elementos destacados
- Elegir por el carácter y el hueco de la categoría

La [regla 60-30-10](https://gradiently.design/es/guide/60-30-10-rule) es una guía práctica de proporción: más o menos un 60 % de neutro, un 30 % de protagonista y apoyo, y un 10 % de acento. Los números exactos importan menos que tener un orden claro.

## Paso 7: prueba el contraste

Las WCAG piden una relación de contraste de al menos 4,5:1 para el texto normal y 3:1 para el texto grande. Comprueba cada pareja que pienses usar. Los colores de marca en el medio del rango de luminosidad, como muchos naranjas y verdes, suelen funcionar con texto blanco pero no con negro, o solo a tamaños grandes.

| Texto sobre fondo | Relación | Úsalo para |
| --- | --- | --- |
| Tinta sobre papel | 16,4:1 | Todo el texto |
| Papel sobre naranja tostado | 4,9:1 | Texto normal y grande |
| Tinta sobre naranja tostado | 3,4:1 | Solo texto grande |
| Verde azulado profundo sobre papel | 5,1:1 | Enlaces y texto normal |
| Tinta sobre avena | 12,9:1 | Todo el texto |

Relaciones de contraste de la paleta de ejemplo, calculadas con la fórmula de las WCAG.

El [contraste de color](https://gradiently.design/es/guide/color-contrast-accessibility) explica las relaciones y cómo medirlas. Si tu protagonista falla tanto con texto claro como con oscuro, oscurécelo un poco en vez de renunciar a él; unos pocos puntos de luminosidad casi nunca se notan.

## Paso 8: prueba en contexto y déjalo por escrito

Las muestras mienten. Un color que se ve refinado como un cuadrado pequeño puede abrumar en toda una historia, y un neutro sutil puede desaparecer en un móvil bajo el sol. Pon la paleta en los formatos que realmente vas a usar.

- Post de Instagram: 1080 × 1350
- Historia: 1080 × 1920
- Portada web: 1920 × 1080
- Tarjeta de visita: 1050 × 600

Cuatro formatos en los que merece la pena probar una paleta nueva, de altos a pequeños.

- **Tamaños pequeños:** ¿sigue leyéndose el protagonista como protagonista en un favicon o en una foto de perfil?
- **Impresión:** ¿se reproducirá el protagonista en tinta? Los colores de pantalla muy vivos suelen imprimirse más apagados. Mira los [degradados para impresión](https://gradiently.design/es/guide/print-gradients).
- **Modo oscuro:** ¿se invierten bien los neutros?
- **Junto a la competencia:** pon tu post junto al de ellos. ¿Sabes a simple vista cuál es el tuyo?

Por último, déjalo por escrito: el nombre, el HEX y el RGB de cada color, los equivalentes CMYK o de tinta plana si imprimes, la función de cada color y sus combinaciones de texto aprobadas. Ponlo en tu [guía de estilo de marca](https://gradiently.design/es/guide/brand-style-guide) y en tu kit de marca para que se use igual en todas partes.

> **Más allá del color plano** Un color protagonista puede convertirse en un degradado o material protagonista, que es más difícil de tomar prestado para cualquier otro. El [degradado como marca](https://gradiently.design/es/guide/gradient-branding) explica cómo hacerlo propio.

## FAQ

### ¿Cuántos colores de marca debo tener?

Normalmente un color protagonista, dos neutros, un color de apoyo y un acento. Más que eso se vuelve difícil de usar con coherencia.

### ¿Cómo elijo un color de marca que destaque?

Mapea los colores principales de tus competidores, encuentra un color que no esté saturado en tu categoría y comprueba que sigue encajando con el carácter de tu marca.

### ¿Deben basarse los colores de marca en la psicología del color?

Usa las asociaciones como guía, no como regla. El significado del color depende mucho de la cultura, la categoría y el contexto, así que ser distintivo y coherente suele importar más.

### ¿Qué contraste necesitan los colores de marca para el texto?

Las WCAG recomiendan al menos 4,5:1 para el texto normal y 3:1 para el texto grande. Comprueba cada pareja de texto y fondo que pienses usar.

### ¿Puedo cambiar los colores de mi marca más adelante?

Sí, pero el reconocimiento construido sobre los colores antiguos se pierde poco a poco. Los pequeños ajustes de luminosidad o saturación son más fáciles que cambiar de tono.