# Generadores de paletas de colores: cómo lograr paletas que funcionen

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

Los generadores son geniales para sacar cinco muestras bonitas y malos para decirte qué hacer con ellas. Lo útil ocurre después de pulsar el botón.

## The short version

- Un generador de paletas de colores produce un conjunto de colores a partir de una regla, una semilla aleatoria, una foto o un texto, pero no decide qué función cumple cada color.
- La mayoría de las paletas generadas dan el mismo peso y una saturación parecida a todos los colores, lo que queda bien como muestras y estridente en un diseño real.
- Una paleta utilizable necesita un fondo claro u oscuro, un color de tinta para el texto, uno o dos colores principales y un pequeño acento.
- Comprueba que la paleta abarque un rango amplio de luminosidad, porque los colores de luminosidad parecida se emborronan y no pasan las pruebas de contraste.
- Prueba siempre una paleta generada en una maqueta real con palabras reales antes de quedarte con ella.

Un **generador de paletas de colores** es una herramienta que sugiere un conjunto de colores que quedan bien juntos, usando reglas de teoría del color, el azar, una foto o una indicación escrita. Úsalo para desatascarte y luego edita el resultado: añade un fondo neutro y un color de texto, dale a cada color una función y pruébalo en un diseño real. Las cinco muestras del generador son un punto de partida. La paleta que funciona es la que tú moldeas a partir de ellas.

## Los tipos principales de generador de paletas

Todo generador hace por dentro una de cuatro cosas. Saber qué tipo estás usando te dice en qué es bueno y qué tendrás que arreglar.

| Tipo | Cómo funciona | Bueno para | Cuidado con |
| --- | --- | --- | --- |
| Círculo de armonías | Elige colores a ángulos fijos desde un tono base: complementario, análogo, triádico | Aprender, y construir alrededor de un color que ya tienes | Cinco colores con la misma saturación, que se ven artificiales |
| Aleatorio con bloqueo | Mezcla colores; bloqueas los que te gustan y vuelves a mezclar | Descubrir, y romper una costumbre | Combinaciones agradables sin ninguna estructura detrás |
| A partir de una imagen | Toma muestras de los colores dominantes de una foto | Igualar un producto, un lugar o la foto de una campaña | Tonos medios turbios, y colores que no sirven para texto |
| A partir de un prompt | Un modelo de IA sugiere colores para palabras como panadería tranquila | Ideas rápidas para un ambiente o un briefing de marca | Tópicos populares, y códigos cuyo contraste nadie ha comprobado |

Adobe Color es un círculo de armonías muy conocido; Coolors es un generador aleatorio con bloqueo muy conocido. La mayoría de las herramientas combinan varios enfoques.

Si quieres entender las reglas que hay detrás de los círculos de armonías, lee [armonía del color](https://gradiently.design/es/guide/color-harmony). Para el enfoque fotográfico, [paleta de colores a partir de una imagen](https://gradiently.design/es/guide/color-palette-from-image) explica cómo tomar mejores muestras, y [generadores de paletas con IA](https://gradiently.design/es/guide/ai-color-palette-generator) trata la escritura de prompts.

## Por qué las paletas generadas suelen fallar en diseños reales

Un generador muestra los colores como cinco franjas iguales. Los diseños reales no se parecen en nada: un color ocupa la mayor parte del espacio, otro lleva las palabras y el resto aparece en pequeñas cantidades. Aquí tienes un resultado aleatorio típico junto a la misma idea después de editarla.

- Rojo: #e63946
- Amarillo: #f1c40f
- Verde: #2ecc71
- Azul: #3498db
- Morado: #9b59b6

Tal como sale: cinco tonos saturados de intensidad parecida. Nada sobre lo que leer texto, nada tranquilo y nada al mando.

- Fondo #f7f3ec: #f7f3ec
- Tinta #1c2321: #1c2321
- Verde azulado principal #2a6f68: #2a6f68
- Salvia de apoyo #a8c5b8: #a8c5b8
- Acento coral #e07a5f: #e07a5f

Después de editarla: un fondo blanco roto cálido, una tinta casi negra (14,5:1 sobre el fondo), un verde azulado que sostiene el color del fondo como texto a 5,3:1, un apoyo discreto y un acento.

## Cinco ajustes que convierten cualquier paleta generada en una utilizable

1. **Quédate con el único color que de verdad te gusta** Bloquéalo y trátalo como el color principal. Todo lo demás existe para apoyarlo. Si nada destaca, vuelve a generar en lugar de conformarte.
2. **Añade un fondo y una tinta** Los generadores casi nunca los incluyen. Elige un fondo claro (un blanco roto cálido o frío) u oscuro, y un color de tinta para el texto que contraste mucho con él. Tiñe ambos ligeramente hacia tu color principal para que encajen.
3. **Reparte la luminosidad** Pasa las muestras a escala de grises, mentalmente o en pantalla. Quieres valores claros, medios y oscuros, no cinco medios. Ajusta la luminosidad hasta que cada color se distinga con claridad.
4. **Baja la saturación de todos menos uno** Deja que el acento siga vivo y calma los demás. Un color de apoyo más suave que el principal hace que el principal se vea más rico.
5. **Asigna proporciones** Un buen reparto para empezar es la [regla 60 30 10](https://gradiently.design/es/guide/60-30-10-rule): fondo en torno al 60%, color principal en torno al 30%, acento en torno al 10%. Ajústalo a ojo cuando lo veas en una maqueta.

Para hacer estos ajustes con precisión, trabaja en un formato de color que separe la luminosidad del tono. [HSL](https://gradiently.design/es/guide/hsl-colors) es fácil de leer; [OKLCH](https://gradiently.design/es/guide/oklch-explained) mantiene la luminosidad más fiel entre tonos distintos.

## Prueba la paleta en una maqueta real

Las muestras esconden problemas que aparecen en cuanto llegan las palabras. Pon tu paleta sobre algo que harías de verdad, como un post, una carta o una sección principal de una web, y mírala al tamaño al que la verá la gente. Después comprueba cada combinación de texto con un [verificador de contraste](https://gradiently.design/es/guide/color-contrast-accessibility).

Un post vertical de Instagram que anuncia una nueva carta, con una familia de colores tranquila y un texto claro y legible

Una paleta se gana su sitio en un formato real con palabras reales. Si el titular sufre aquí, cambia la paleta, no el titular.

Un degradado es una prueba extra rápida. Mezcla el fondo, el color principal y el de apoyo: si la mezcla se vuelve gris en el centro, dos de los colores se están peleando, como explica [degradados turbios](https://gradiently.design/es/guide/muddy-gradients).

La paleta editada como degradado: `linear-gradient(160deg, #f7f3ec 0%, #a8c5b8 45%, #2a6f68 85%, #1c2321 100%)`

Del fondo a la salvia, al verde azulado y a la tinta, sin manchas grises por el camino. El coral se queda fuera, reservado para pequeños acentos.

## Guárdala como tokens, no como una captura

Cuando la paleta funcione, nombra los colores por su función y no por su tono, para poder cambiar el verde azulado más adelante sin renombrarlo todo. En código eso significa variables CSS; en herramientas de diseño, estilos con nombre; en Gradiently, el kit de marca, donde paletas, fuentes y voz viven juntas y el Designer las aplica a lo que crea.

```css
:root {
  --color-ground:  #f7f3ec;
  --color-ink:     #1c2321;
  --color-main:    #2a6f68;
  --color-support: #a8c5b8;
  --color-accent:  #e07a5f;
}

.button {
  background: var(--color-main);
  color: var(--color-ground);
}
```

Los nombres por función sobreviven a un cambio de marca. Una variable llamada --teal no.

## Buscar por color en lugar de generar

A veces lo que de verdad quieres no son cinco códigos, sino un fondo terminado en una familia de colores. El Mercado de Gradiently te permite buscar Marks con palabras de color como «verde azulado profundo» o «melocotón cálido» y filtrar por aspecto. Cada Mark es un fondo vivo de degradado y material con su propia paleta y su propia voz tipográfica, comparado con todos los demás para que no haya dos iguales, y puedes diseñar gratis con cualquiera que no esté reservado. Es otra ruta hacia el mismo objetivo: colores que van juntos y que ya cumplen su función.

## FAQ

### ¿Cuál es el mejor generador de paletas de colores?

Depende de cómo trabajes: los círculos de armonías sirven para construir alrededor de un color, los generadores aleatorios con bloqueo para descubrir y los que muestrean imágenes para igualar una foto. Todos necesitan edición después.

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

A la mayoría de las marcas les funciona un fondo, una tinta, uno o dos colores principales y un acento, así que cuatro o cinco en total. Más que eso cuesta mantenerlo coherente.

### ¿Por qué mi paleta generada se ve mal en mi diseño?

Normalmente los colores tienen una luminosidad y una saturación parecidas y ninguna función clara. Añade un fondo neutro y un color de texto, reparte la luminosidad y deja un solo acento vivo.

### ¿Cómo compruebo la accesibilidad de una paleta?

Prueba cada combinación de texto y fondo con un verificador de contraste, apuntando a al menos 4,5:1 para el texto principal, y mira la paleta en escala de grises para asegurarte de que los colores se distinguen.