# 30 ideas de colores de marca con códigos

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

Una paleta de marca son cuatro o cinco colores con funciones, no un color favorito y unos cuantos amigos. Aquí tienes 30 puntos de partida por ambiente y sector, con códigos para copiar y una forma de probarlos.

## The short version

- Una paleta de marca que funciona tiene cuatro o cinco colores con funciones fijas: un fondo, un color principal, un tono de apoyo, un neutro para el texto y un acento.
- El acento es el color que la gente recuerda, así que debe aparecer en una sola cosa a la vez, como un botón, un precio o el símbolo del logo.
- Las paletas propias de un sector ayudan a los clientes a entender lo que vendes, pero un único color inesperado es lo que hace reconocible a una marca.
- Prueba una paleta en diseños reales a tamaños reales, en claro y oscuro, antes de comprometerte, porque las muestras sobre una página blanca esconden casi todos los problemas.
- Comprueba que el color de tu texto sobre tu fondo cumple el contraste WCAG, o el texto corrido será difícil de leer para mucha gente.

Las buenas **ideas de colores de marca** empiezan por las funciones, no por los favoritos. Elige un color de fondo sobre el que se apoyen la mayoría de tus diseños, un color principal que diga qué tipo de negocio eres, un tono de apoyo para dar profundidad, un neutro para el texto y un acento por el que te recuerden. Debajo tienes 30 paletas construidas así, seis por ambiente con muestras y 24 por sector con códigos, además de un método rápido para probar la que elijas.

## Cómo se construye una paleta de colores de marca

La mayoría de las paletas fallidas son cinco colores del mismo peso: nada lidera, así que nada es reconocible. Una paleta funciona cuando cada color tiene su parte del espacio: el fondo cubre la mayor parte, el color principal una buena parte y el acento solo una pizca. La [regla 60 30 10](https://gradiently.design/es/guide/60-30-10-rule) es una proporción de partida útil, aunque luego la flexibilices.

| Función | Parte de un diseño | Cometido |
| --- | --- | --- |
| Fondo | Cerca del 60% | Fondos, zonas grandes, el ambiente |
| Principal | Cerca del 25% | Titulares, formas, el color que la gente asocia contigo |
| Apoyo | Del 5 al 10% | Profundidad, paneles secundarios, ilustraciones |
| Neutro | Solo texto | Texto corrido que tiene que leerse sobre el fondo |
| Acento | Menos del 5% | Un botón, un precio, un símbolo por diseño |

Cinco funciones, cinco proporciones. El acento funciona porque es escaso; extiéndelo por todas partes y se convierte en un segundo color principal.

## Paletas de colores de marca por ambiente

Empieza aquí si sabes cómo quieres que se sienta la gente. Las asociaciones de color son culturales, no universales, como explica [psicología del color](https://gradiently.design/es/guide/color-psychology).

- Azul marino profundo: #0b2545
- Puerto: #13315c
- Azul bruma: #8da9c4
- Salvia pálida: #eef4ed
- Latón: #e0a458

1. Calma y confianza. El azul marino transmite firmeza; un acento latón evita que parezca un extracto bancario. Va bien con finanzas, salud y consultoras.

- Espresso: #3d2314
- Terracota: #c8553d
- Albaricoque: #f28f3b
- Crema: #f6e7cb
- Verde azulado salvia: #588b8b

2. Cálido y cercano. Los rojos terrosos sobre crema parecen hechos a mano. El acento fresco de verde azulado salvia evita que parezca otra cafetería más.

- Bosque: #1b3a2f
- Musgo: #4f772d
- Helecho: #90a955
- Lima suave: #ecf39e
- Tiza: #fdfcf6

3. Fresco y natural. Verdes de profundo a vivo, sobre tiza, para marcas de bienestar y sostenibilidad.

- Tinta: #0d0d1a
- Ultramar: #3a0ca3
- Violeta: #7209b7
- Rosa intenso: #f72585
- Cielo eléctrico: #4cc9f0

4. Atrevido y moderno. Un fondo casi negro deja brillar el color saturado. Usa el cielo eléctrico con moderación.

- Negro suave: #1a1a1a
- Sombra tostada: #4a3f35
- Oro antiguo: #b08d57
- Lino: #e8dcc8
- Marfil: #f7f3ee

5. Lujo discreto. Poca saturación y mucho espacio. El oro parece caro solo cuando es apagado y se usa con moderación.

- Tinta: #2b2d42
- Rojo coral: #ff6b6b
- Girasol: #ffd93d
- Hoja: #6bcb77
- Azul piscina: #4d96ff

6. Divertido. Cuatro colores vivos unidos por una tinta oscura. Deja que lidere un color por diseño.

## Ideas de colores de marca por sector

Cada paleta de sector enumera cuatro códigos, normalmente del más oscuro al más claro, y la última columna nombra el color que hace de acento. Las convenciones existen por algo: un dentista en verde azulado y una panadería en marrones cálidos se entienden de un vistazo. Cumple la convención con tu color principal y rómpela con suavidad con tu acento.

| Negocio | Paleta | Códigos | Por qué funciona |
| --- | --- | --- | --- |
| Asesoría contable | Libro mayor | `#1d3557` `#457b9d` `#f1faee` `#e63946` | Azul marino para la confianza, un acento rojo reservado a la cifra que importa |
| Despacho de abogados | Bufete | `#2b2d42` `#8d99ae` `#edf2f4` `#9c6644` | Pizarra y papel con un acento marrón cuero |
| Dentista | Sonrisa limpia | `#03363d` `#17a398` `#e6f4f1` `#ffb703` | El verde azulado se ve clínico pero no frío; el amarillo es cercano |
| Clínica de fisioterapia | Recuperación | `#264653` `#2a9d8f` `#e9f5f2` `#f4a261` | Verdes azulados tranquilos con un acento cálido que anima |
| Cafetería | Tueste de la mañana | `#4a2c2a` `#c08552` `#f3e9dc` `#5e8b7e` | Marrones de café con un verde inesperado |
| Panadería | Crumb | `#7f4f24` `#dda15e` `#fefae0` `#bc4749` | Corteza, mantequilla y harina, con un rojo mermelada para las ofertas |
| Restaurante de noche | Cena privada | `#1b1b1e` `#7a1e2c` `#d4a373` `#f5ebe0` | Fondo oscuro y rojo vino evocan una cena, con un acento caramelo |
| Floristería | Tallo | `#2d4a3e` `#e5989b` `#ffcdb2` `#fffaf5` | El verde hoja profundo hace que el acento rosa suave parezca fresco |
| Estudio de yoga | Aliento | `#5e548e` `#9f86c0` `#e0b1cb` `#fbf8f3` | Violetas crepusculares que frenan la mirada, con rosa como acento |
| Gimnasio | Repetición | `#111111` `#3a3a3a` `#f2f2f2` `#e4ff1a` | Negro y gris con un único amarillo ácido muy fuerte |
| Cuidado de la piel | Rocío | `#6b4e3d` `#e8b4a0` `#f6e3d8` `#fdf8f4` | Tonos de piel y blancos cálidos, marrón cacao para el texto, melocotón como acento |
| Marca de moda | Atelier | `#0f0f0f` `#c9c1b6` `#f4f1ec` `#8a1c1c` | Negro y piedra con un único rojo sangre de toro |
| Joyería | Terciopelo | `#14213d` `#2e1a47` `#f5f0e6` `#c9a227` | Los azules de medianoche realzan un acento dorado como lo hace una vitrina |
| Inmobiliaria | Puerta de entrada | `#22333b` `#5e503f` `#eae0d5` `#c6ac8f` | Los tonos carbón y madera evocan un hogar cuidado; la arena es el acento |
| Estudio de arquitectura | Hormigón | `#262626` `#7d7d7d` `#d9d9d9` `#ff5a1f` | Grises como materiales, un naranja de seguridad |
| Herramienta para desarrolladores | Terminal | `#0b1021` `#1f6feb` `#e6edf3` `#7ee787` | Azules de interfaz oscura con un acento verde código |
| Fintech | Libro de menta | `#0a2e2a` `#00b37e` `#d7f9ec` `#1e1e24` | Verde profundo con un acento menta vivo sugiere dinero sin clichés de dólares |
| Producto de IA | Señal | `#0e0b16` `#5b5bd6` `#a78bfa` `#f0abfc` | Índigo sobre casi negro, con orquídea como acento contenido |
| Pódcast | En el aire | `#1a1423` `#ff7b54` `#ffb26b` `#ffd56b` | Un fondo de estudio oscuro con una rampa cálida de atardecer, con el coral al frente |
| Marca infantil | Patio de juegos | `#118ab2` `#06d6a0` `#ffd166` `#ef476f` | Colores vivos y claros suavizados justo lo necesario; el rosa es el acento |
| ONG | Terreno común | `#2f3e46` `#52796f` `#cad2c5` `#f4a259` | Verdes sobrios con un naranja esperanzador |
| Equipo para exterior | Inicio del sendero | `#283618` `#606c38` `#fefae0` `#dd6b20` | Oliva y lona con un naranja de alta visibilidad |
| Organizador de bodas | Votos | `#6d597a` `#b56576` `#e8c2ca` `#fbf6f0` | Ciruela con un acento rosa que queda bien fotografiado sobre papel |
| Artista musical | Madrugada | `#090014` `#3c096c` `#ff006e` `#fb5607` | Oscuridad de club con dos acentos calientes y conectados |

Copia los códigos en tu [kit de marca](https://gradiently.design/es/guide/brand-kit) y ajusta un color hasta que lo sientas tuyo.

## Cómo hacer que una paleta se sienta como tu marca

Lo que convierte una paleta de lista en una identidad es una decisión que nadie más en tu calle ha tomado, normalmente el acento: un despacho de abogados en marrón cuero, un gimnasio en amarillo ácido. Cambia primero el acento y conserva el fondo y el color del texto, así ganas personalidad sin perder legibilidad.

### Evita

- Cinco colores vivos usados por igual
- Elegir primero el color del logo y el resto a ojo
- Un acento en cada elemento de cada diseño
- Texto gris claro sobre fondo crema
- Elegir desde muestras sobre una página blanca

### Haz

- Un fondo que cubra la mayor parte del espacio
- Primero las funciones, luego los colores que las cumplen
- Una sola cosa con acento por diseño
- Un neutro oscuro que pase el contraste
- Probar en una publicación, una story y un banner reales

Una paleta fundida en un degradado suave te da un fondo inconfundiblemente tuyo, siempre que los colores estén emparentados.

- Aliento como degradado: `linear-gradient(160deg, #5e548e 0%, #9f86c0 50%, #e0b1cb 100%)`
- Azul marino sereno como degradado: `linear-gradient(160deg, #0b2545 0%, #13315c 55%, #8da9c4 100%)`
- Resplandor de terracota cálido: `radial-gradient(circle at 80% 20%, #f28f3b 0%, #c8553d 40%, #3d2314 85%)`

Tres de las paletas de arriba como fondos. Los colores vecinos se mezclan con limpieza; deja el acento fuera de la mezcla y úsalo encima.

## Prueba los colores de tu marca antes de comprometerte

1. **Haz tres diseños reales** Una publicación cuadrada, una story de 1080×1920 y una cabecera de 1500×500, con palabras reales y tu logo.
2. **Comprueba el contraste del texto** Tu neutro sobre tu fondo debe pasar WCAG AA. [Contraste de color y accesibilidad](https://gradiently.design/es/guide/color-contrast-accessibility) muestra cómo medirlo.
3. **Míralo pequeño** Reduce la publicación al tamaño de una miniatura. Si aún se nota que es tuya, la paleta cumple su función.
4. **Pruébalo junto a la competencia** Pon tu publicación al lado de tres rivales locales. Si la tuya se confunde, cambia el acento, no toda la paleta.
5. **Anota los códigos** Registra cada código hex y su función en un solo sitio.

Una publicación vertical de panadería que dice Pan fresco desde las siete sobre un fondo degradado cálido

Probar una paleta en una publicación real: el titular, el detalle y el fondo tienen que funcionar juntos a 1080×1350.

Si quieres ayuda para elegir, [cómo elegir colores de marca](https://gradiently.design/es/guide/how-to-choose-brand-colors) recorre la decisión desde cero, y [combinaciones de colores para logos](https://gradiently.design/es/guide/color-combinations-for-logos) la reduce a los dos o tres colores que debería usar el propio logo.

## Convertir los colores de marca en un estilo

Cinco códigos hex los puede copiar cualquiera. En Gradiently, un Mark lleva una paleta como un fondo vivo con su propia luz, grano y movimiento, y no hay dos Marks iguales. Busca en el Mercado con palabras de color como «verde azulado profundo» para encontrar uno cercano a tu paleta, diseña con él gratis y reserva el tuyo para que solo tú puedas exportar con él. Tu kit de marca guarda los códigos exactos para texto y acentos.

## FAQ

### ¿Cuántos colores debe tener una marca?

Cuatro o cinco bastan para la mayoría de las marcas: un fondo, un color principal, un tono de apoyo, un neutro para el texto y un acento. Más que eso es difícil de usar con coherencia.

### ¿Cuál es el mejor color para una marca nueva?

No hay un único mejor color. Elige un color principal que encaje con lo que vendes y luego un acento que tus competidores no usen, para que los clientes te distingan.

### ¿Deben mis colores de marca coincidir con mi sector?

Coincidir con el sector con tu color principal ayuda a que te entiendan rápido. Romperlo con tu acento es lo que te hace memorable.

### ¿Cómo compruebo que los colores de mi marca son accesibles?

Mide el contraste del color de tu texto sobre tu fondo con un verificador de contraste WCAG. El texto corrido debe alcanzar al menos 4,5:1.

### ¿Puedo usar un degradado como color de marca?

Sí, siempre que se construya con colores emparentados de tu paleta y conserves una versión plana para usos pequeños como favicons y texto.