Cómo usar el generador de paletas
El generador crea 5 colores cada vez. El flujo de trabajo es sencillo y rápido:
- Generar: pulsa la barra espaciadora o haz clic en el botón de generar para ver una combinación nueva. Genera varias seguidas hasta que alguna te llame la atención.
- Bloquear: ¿te gusta un color? Haz clic en su candado. Las siguientes generaciones mantienen los colores bloqueados y recalculan solo los demás, así construyes la paleta poco a poco.
- Partir de tu propio color: introduce el color de tu marca en el campo de color base. La regla de armonía elegida se calcula a partir de él.
- Copiar: cada color muestra su código HEX y el nombre de color más cercano. Haz clic en el color para copiar el HEX.
- Compartir: la URL se actualiza con los colores actuales, en el formato
?c=hex-hex-hex-hex-hex. Copia la dirección y envíala a tu cliente o a tu equipo: quien la abra verá exactamente la misma paleta.
Las reglas de armonía
Las reglas se basan en las posiciones del círculo cromático, medidas por el matiz (la H de HSL, de 0° a 360°). Cada una produce un efecto distinto:
| Regla | Cómo se calcula | Efecto |
|---|---|---|
| Aleatoria equilibrada | Colores variados, sin una relación fija de matiz, elegidos para formar un conjunto equilibrado | Útil para explorar sin una idea previa |
| Análoga | Matices vecinos, separados unos 30° | Tranquila y coherente, frecuente en la naturaleza y la fotografía |
| Complementaria | El color base y su opuesto, a 180° | Máximo contraste de matiz, ideal para destacar una acción |
| Tríada | Tres matices separados 120° | Vibrante y equilibrada |
| Tetrádica | Cuatro matices separados 90°, que forman dos pares complementarios | Rica, pero funciona mejor si un color domina |
| Complementaria dividida | La base y los dos vecinos de su complementario, a 150° y 210° | Contraste fuerte con menos tensión que la complementaria |
| Monocromática | Un solo matiz con distintas luminosidades y saturaciones | Sobria y elegante, fácil de aplicar |
Las reglas son un punto de partida, no una garantía: dos colores complementarios con la misma luminosidad, por ejemplo, vibran de forma incómoda uno junto al otro. La guía de armonía del color explica cada esquema con ejemplos y muestra cómo equilibrar la proporción entre los colores.
Cómo aplicar una paleta de 5 colores en una web
Una paleta generada tiene 5 colores de peso visual parecido, pero una web necesita jerarquía. La regla 60-30-10 es un buen punto de partida:
- 60% para el color dominante: en interfaces, casi siempre un neutro claro (u oscuro, en el modo oscuro) para los fondos. Si la paleta no tiene ningún neutro, créalo: toma el color más claro y bájale mucho la saturación, o usa algo como blanco roto.
- 30% para el color secundario: cabecera, pie de página, tarjetas y secciones alternas.
- 10% para el color de acción: botones principales, enlaces y destacados. Elige el color más saturado de la paleta y úsalo con moderación para que siga llamando la atención.
Los dos colores restantes pueden servir como variaciones de apoyo, por ejemplo el estado hover de un botón o el color de una etiqueta. Para el texto, usa un tono muy oscuro derivado de la paleta en lugar del negro puro, como gris marengo. La guía cómo crear la paleta de colores de una web detalla el papel de cada color, incluidos los colores de estado (error, aviso, éxito).
Revisa la accesibilidad antes de publicar
Una paleta bonita puede ser ilegible. Las WCAG exigen un contraste mínimo de 4,5:1 para texto normal y de 3:1 para texto grande y para componentes de la interfaz, como bordes de campos e iconos. Los tonos medios y saturados, justo los que suele producir un generador, rara vez funcionan como color de texto sobre fondo blanco.
Antes de usar la paleta, prueba cada par de texto y fondo en el comprobador de contraste. Si una combinación no cumple, oscurece o aclara el color manteniendo su matiz: la paleta conserva su identidad y se vuelve legible. Recuerda también que parte de tu público es daltónico; el simulador de daltonismo muestra si tus colores siguen distinguiéndose.
Exportar a código
Cuando la paleta esté lista, expórtala en uno de estos formatos:
- Variables CSS: cinco propiedades personalizadas, de
--color-1a--color-5, listas para pegar en tu hoja de estilos. - Tailwind: un fragmento para
theme.extend.colorsen el archivo de configuración, que genera clasesbg-ytext-con tus colores. - JSON: la lista de colores, útil para tokens de diseño, scripts u otras herramientas.
Un ejemplo de uso de las variables CSS, con papeles asignados:
:root {
--color-1: #264653;
--color-2: #2A9D8F;
--color-3: #E9C46A;
--color-4: #F4A261;
--color-5: #E76F51;
}
body { background: #FAF9F6; color: var(--color-1); }
.button { background: var(--color-5); color: #000000; }
.card { border-top: 4px solid var(--color-2); }Una buena costumbre es renombrar las variables según el papel que cumplen, como --color-primary o --color-surface, y no según su posición. Así, cambiar la paleta en el futuro no obliga a tocar cada componente. Fíjate en el texto del botón: el blanco sobre #E76F51 solo alcanza unos 3,1:1, por debajo del 4,5:1 necesario para texto normal, así que se usa texto negro. La otra opción es oscurecer el coral.