Generador de paleta de colores

Cómo usar el generador de paletas

1. Pulsa Nueva paleta (o la barra espaciadora en un teclado) para obtener cinco colores que siguen una armonía de color. Cada pulsación genera una paleta nueva al azar.
2. Bloquea los colores que te gusten con el candado debajo de cada muestra. Los colores bloqueados se quedan en su sitio mientras los demás cambian; en el modo aleatorio, el primer color bloqueado se convierte en el ancla de los colores nuevos, que siguen combinando con él.
3. Parte de tu propio color: cambia Empezar desde a Mi color base y elígelo — el color de tu marca, por ejemplo. Cada paleta incluirá exactamente ese color.
4. Elige una armonía (análoga, monocromática, complementaria, complementaria dividida, triádica, tetrádica o tintes y sombras), o déjala en Cualquiera para que cambie cada vez.
5. Ajusta un color con el lápiz, que abre el selector de color de tu dispositivo; el color editado queda bloqueado automáticamente.
6. Saca los colores de una foto: pulsa Colores de una imagen, suelta el archivo sobre la herramienta o pega una captura de pantalla. Se encuentran y bloquean los cinco colores principales de la imagen.
7. Copia y exporta: toca cualquier código para copiarlo, cambia entre HEX, RGB, HSL y OKLCH, copia la paleta completa como variables CSS o JSON, o descarga un PNG con las cinco muestras. Copiar enlace te da una dirección que abre exactamente esta paleta.

Todo funciona en tu navegador. La imagen que cargas se lee en tu dispositivo, se reduce a 100 píxeles como máximo en su lado mayor y se analiza ahí mismo; nunca se sube a ningún servidor.

Por qué las paletas se generan en OKLCH

Las ruedas de color más comunes — HSL en CSS, HSV/HSB en los programas de diseño — son simples reordenamientos de los canales rojo, verde y azul, no modelos de cómo vemos. Con la misma luminosidad HSL del 50%, el amarillo puro se ve mucho más claro que el azul puro, así que una paleta que gira el tono en HSL salta entre colores chillones y apagados. Este generador trabaja en OKLCH, la forma polar de OKLab, un espacio de color perceptual publicado por Björn Ottosson en 2020 y adoptado en CSS Color Module Level 4 como la función oklch(). Sus tres números son L (luminosidad percibida, 0–100%), C (croma, qué tan vivo es el color: 0 es gris; los colores sRGB llegan a unos 0.32) y H (ángulo del tono en grados). Pasos iguales en L se ven como pasos iguales de claridad, sea cual sea el tono.

La conversión tiene tres pasos: deshacer la curva gamma de sRGB para obtener luz lineal, multiplicar por una matriz fija y sacar raíces cúbicas, y multiplicar por una segunda matriz para llegar a L, a y b. El croma es √(a² + b²) y el tono es atan2(b, a). Valores de referencia de esta herramienta, que coinciden con los publicados:

No todos los colores OKLCH existen en una pantalla. Cuando un color planeado cae fuera de la gama sRGB, el generador conserva su luminosidad y su tono y baja el croma hasta que cabe — la misma idea del mapeo de gama de CSS Color 4 —, así que la paleta nunca cambia de tono solo porque un color se recortó.

Cómo se arma una paleta

Cada paleta parte de un ancla: tu color base, el primer color bloqueado o un color aleatorio con luminosidad entre 45% y 80% y croma moderado. Los otros cuatro colores reciben los tonos de la armonía elegida y niveles de luminosidad repartidos entre 30% y 90% (se omite el nivel más cercano al ancla, así que todos se distinguen de ella en claridad). El croma varía hasta un 30% alrededor del del ancla y se reduce en los colores muy claros y muy oscuros, que se ven chillones cuando están muy saturados. Un número aleatorio que se sortea con cada Nueva paleta decide todo, y el mismo número siempre da la misma paleta: así un enlace copiado reproduce tus colores.

Como los ángulos se miden en la rueda OKLCH, el complementario de un color puede ser distinto del que muestra una rueda HSL o el círculo cromático de pintura (rojo-amarillo-azul): el complementario OKLCH del azul marino #1f4e79 (tono 249°) es un tono cálido entre oliva y naranja, cerca de 69°.

Ejemplo: una paleta triádica a partir de #1f4e79

Con el color base #1f4e79 (luminosidad OKLCH 41.4%, croma 0.088, tono 249.1°) y la armonía triádica, la semilla inicial de la página produce estos colores. Los tonos quedan cerca de 249°, 9° y 129°, separados 120°, y la luminosidad va de 28.7% a 92.9%:

Las columnas de contraste indican qué texto funciona sobre cada color. El vino oscuro admite texto blanco con 14.66:1, el rosa pálido admite texto negro con 16.79:1 y el verde intermedio solo llega a 3.64:1 con blanco: sirve para títulos grandes, no para texto normal.

Contraste y accesibilidad

Cada muestra indica el mejor de texto blanco o negro sobre ella, con su razón y su nivel, y la tabla de contraste bajo la paleta muestra ambos. Los números siguen las Pautas de Accesibilidad para el Contenido Web (WCAG) 2.2 del W3C: la luminancia relativa es 0.2126 R + 0.7152 G + 0.0722 B de los canales linealizados, y la razón es (más clara + 0.05) / (más oscura + 0.05), de 1:1 a 21:1. El texto normal necesita 4.5:1 para el nivel AA y 7:1 para AAA; el texto grande (24 px, o 18.7 px en negrita) necesita 3:1 para AA. Las razones se truncan, no se redondean, en dos decimales, así que un color nunca aparece como aprobado si no lo está.

Consejos para usar una paleta

• Dale un papel a cada color. Un reparto habitual es 60% para el fondo o color dominante, 30% para el secundario y 10% para el acento; el color más oscuro suele servir para el texto.
• Revisa el texto antes de decidir. Usa la tabla de contraste o pega cualquier par en el selector de colores para ver sus códigos y su contraste.
• No dependas solo del tono. Alrededor de 1 de cada 12 hombres tiene una deficiencia de visión del color rojo-verde; varía también la luminosidad.
• Usa la exportación CSS como punto de partida para tus tokens de diseño: cambia --color-1 y los demás por funciones como --marca o --fondo.

Preguntas frecuentes

Última actualización: 15 de octubre de 2026