𝗙𝗿𝗲𝗲𝗧𝗼𝗼𝗹 DEV

Generador de Paletas de Colores

Crea paletas de colores armoniosas online. Genera colores aleatorios o por tema, bloquea los favoritos, visualiza escalas de tonos, comprueba el contraste y la simulación de daltonismo, y exporta en CSS, SCSS, JSON, Tailwind, HEX, RGB, HSL u OKLCH.

Haz clic en una paleta para abrirla en el editor

Editar color

Sobre esta herramienta

Crea paletas de colores armoniosas en segundos. Explora la galería de paletas generadas automáticamente o abre el editor para crear variaciones, bloquear colores favoritos, ajustar la cantidad de colores y exportar para tus proyectos. Los colores se calculan en el espacio perceptual Okhsl, lo que mantiene los tonos visualmente equilibrados y evita las distorsiones comunes del HSL tradicional.

Funcionalidades principales

Genera paletas aleatorias o por tema: pastel, vibrante, oscuro, vintage y tierra
Bloquea colores favoritos, genera nuevas variaciones y ajusta el tamaño de la paleta
Visualiza escalas de tonos perceptuales, comprueba el contraste WCAG y simula el daltonismo
Exporta en HEX, RGB, HSL, OKLCH, CSS, SCSS, JSON o Tailwind y comparte por enlace

Usos comunes

  • Descubrir nuevas paletas y combinaciones para interfaces y design systems, con tonos perceptualmente equilibrados y listos para usar
  • Definir esquemas de color para presentaciones, publicaciones y materiales de marketing con armonía visual
  • Copiar valores de color en HEX, RGB, HSL u OKLCH directamente en el CSS, sin calcular los colores manualmente
  • Probar diferentes armonías de color (análogas, monocromáticas, complementarias, triádicas, tetrádicas) en rediseños de interfaz antes de finalizar el proyecto
  • Verificar la accesibilidad del contraste y visualizar cómo perciben la paleta las personas con daltonismo

Cómo usar

1

Explora la galería

La página se abre con varias paletas generadas automáticamente. Elige entre el modo aleatorio y temático, pulsa la tecla Espacio para generar nuevas opciones, o haz clic en 'Cargar más' para ampliar la galería.

2

Abre en el editor

Haz clic en una paleta para abrirla en el editor. Bloquea los colores que quieras mantener y genera de nuevo para variar solo los demás.

3

Ajusta y exporta

Ajusta el número de colores, visualiza las escalas de tonos, comprueba el contraste y el daltonismo, y exporta en el formato que necesites o comparte por enlace.

Notas técnicas

Algunos detalles ayudan a entender cómo se generan los colores y por qué se mantienen equilibrados:

Los colores se generan en el espacio Okhsl, que es perceptualmente uniforme: variar la luminosidad produce pasos visualmente regulares, a diferencia del HSL, donde el mismo valor de luminosidad parece más claro en el amarillo que en el azul
Al hacer clic en 'ver escala de colores' de un color, se genera una rampa de 50 a 900 manteniendo el matiz y la saturación fijos y variando solo la luminosidad perceptual — lista para escalas de design system y copiable en CSS o Tailwind
La verificación de contraste usa la razón WCAG entre el color y el texto legible sobre él; la marca AA indica una razón de al menos 4,5:1
La simulación de daltonismo es una aproximación para revisión rápida y no sustituye las pruebas con usuarios reales

Preguntas frecuentes

¿Cómo genero una paleta de colores?

La página ya se abre con varias paletas generadas automáticamente. Pulsa la barra espaciadora (o el botón Generar nuevas) para crear más, o elige un tema como pastel u oscuro. Al hacer clic en una paleta, se abre el editor para bloquear colores y ajustar como quieras.

¿Cuál es la diferencia entre el modo aleatorio y el modo por tema?

En el modo aleatorio, los colores pueden venir de cualquier punto del espectro. En el modo por tema, la generación está orientada hacia un aspecto específico — pastel usa colores claros y suaves, oscuro usa tonos de baja luminosidad, vintage usa tonos envejecidos y desaturados, y así sucesivamente.

¿Qué es el espacio de color Okhsl y por qué importa?

Okhsl es un modelo de color perceptualmente uniforme. En la práctica, esto significa que ajustar la luminosidad de un color produce cambios que el ojo percibe como pasos regulares, generando paletas y tonos más equilibrados que el HSL tradicional, especialmente al comparar colores muy diferentes como el amarillo y el azul.

¿Cómo guardo o comparto una paleta?

En el editor, el botón Compartir copia un enlace con los colores codificados en la URL. Quien abra ese enlace verá exactamente la misma paleta en el editor. También puedes exportar los colores en CSS, SCSS, JSON, Tailwind o como lista de HEX.

Ver también