Generador de paletas de color

Parte de un color base y obtén paletas armónicas (complementaria, análoga, triada…) o una escala completa de tonos 50–950, con valores HEX, RGB y HSL, contraste de accesibilidad y variables listas para CSS, Tailwind o SCSS.

¿Cómo se arma una paleta armónica?

Los colores se pueden ubicar en una rueda de color. En CSS eso se ve muy claro con hsl():

H (tono): la posición en la rueda, de 0° a 360° (0 = rojo, 120 = verde, 240 = azul).
S (saturación): qué tan intenso es el color (0% = gris).
L (luminosidad): qué tan claro u oscuro es (0% = negro, 100% = blanco).

Las armonías clásicas son simplemente giros del tono:

Armonía	Cómo se calcula	Sensación
Complementario	tono + 180°	Alto contraste, llamativo.
Análogos	tono ± 30° y ± 60°	Tranquilo, natural.
Triada	tono + 120° y + 240°	Vibrante y equilibrado.
Tétrada	cada 90°	Muy variado; elige uno dominante.
Complementario dividido	tono + 150° y + 210°	Contraste más suave que el complementario.
Monocromático	mismo tono, distinta luminosidad	Elegante y fácil de combinar.

css

:root {
  --marca: hsl(262, 83%, 58%);
  --marca-complementario: hsl(82, 83%, 58%); /* 262 + 180 - 360 */
}

La escala de tonos 50–950 (como la de Tailwind) es la más útil en proyectos reales: te da versiones muy claras para fondos (50–100), intermedias para bordes (200–300), el color principal (500–600) y oscuras para texto (800–950).

Generador

Elige un color base (o pulsa Aleatorio), cambia el modo arriba y haz clic en cualquier valor para copiarlo. La estrella ★ marca tu color base.

Color base

ColorTono (H)°Saturación (S)%Luminosidad (L)%

Salida

Nombre de la paleta

Se usa para las variables: --marca-50

Haz clic en cualquier valor (HEX, RGB o HSL) para copiarlo. Las etiquetas indican el contraste WCAG del color con texto blanco y negro.

Aa 1.1 · No pasaAa 19.04 · AAA

Aa 1.28 · No pasaAa 16.41 · AAA

Aa 1.73 · No pasaAa 12.16 · AAA

Aa 2.65 · No pasaAa 7.91 · AAA

Aa 5.7 · AAAa 3.69 · AA grande

Aa 7.01 · AAAAa 3 · AA grande

Aa 9.06 · AAAAa 2.32 · No pasa

Aa 11.28 · AAAAa 1.86 · No pasa

Aa 13.95 · AAAAa 1.51 · No pasa

Aa 16.29 · AAAAa 1.29 · No pasa

Aa 18.39 · AAAAa 1.14 · No pasa

:root {
  --marca-50: #f6f2fd;
  --marca-100: #e9dffb;
  --marca-200: #d1bbf7;
  --marca-300: #b18cf3;
  --marca-400: #7c3aed; /* color base */
  --marca-500: #6a20e9;
  --marca-600: #5615c6;
  --marca-700: #4612a1;
  --marca-800: #360e7b;
  --marca-900: #280b5b;
  --marca-950: #1a083b;
}

/* Ejemplo de uso */
.boton {
  background-color: var(--marca-400);
}

Consejos de uso

Regla 60-30-10: usa un color neutro en el 60% de la interfaz, tu color principal en el 30% y un acento en el 10% (botones y enlaces importantes).
Revisa el contraste. Para texto normal necesitas al menos 4.5:1 (nivel AA); para texto grande (24 px o 18.66 px en negritas), 3:1. Las etiquetas de cada muestra te dicen si funciona con texto blanco o negro.
Para modo oscuro no inviertas los colores sin más: usa los tonos 800–950 como fondo y los 200–400 como acentos, y baja un poco la saturación.
Ponle a las variables nombres por función (--color-primario, --color-peligro) además de por color: así puedes cambiar la marca sin renombrar nada.
Las paletas armónicas son un punto de partida. Ajusta la luminosidad de cada color a mano hasta que se vean bien juntos.
Prueba tus colores en componentes reales con el diseñador de botones o el generador de degradados.

Buena práctica

Define la paleta una sola vez en :root y úsala en todo el sitio con var(--marca-500). Si el cliente cambia de color de marca, sólo editas un lugar.

Error común

Elegir colores sólo "porque se ven bonitos" sin revisar el contraste. Un texto gris claro sobre blanco puede verse elegante en tu monitor, pero es ilegible al sol en un celular y no cumple las pautas de accesibilidad.

Generador de paletas de color ​

¿Cómo se arma una paleta armónica? ​

Generador ​

Consejos de uso ​

Generador de paletas de color

¿Cómo se arma una paleta armónica?

Generador

Consejos de uso