Generador de paletas de color
- Los archivos no salen de tu dispositivo
- Se ejecuta en el navegador
- Gratis, sin registro ni marca de agua
3b82f6
e24956
3ba01b
Cómo usar Generador de paletas de color
Crea paletas de color de tres maneras: reglas de armonía a partir de un color base, paletas aleatorias que puedes fijar y volver a generar, o una escala de 11 tonos del 50 al 950 como la de Tailwind. Los colores se calculan en OKLCH, y cada paleta se exporta a CSS, Tailwind v3 o v4, JSON, .gpl o .ase.
- 1
Elige un Modo: Armonía, Aleatorio o Tonos.
- 2
Para Armonía o Tonos, define el Color base y luego elige una Regla, o un Nombre de color y el paso en el que Conservar la base.
- 3
Para Aleatorio, haz clic en Generar o pulsa Espacio, y fija los colores que quieras conservar antes de generar otra vez.
- 4
Pasa el cursor sobre un color y haz clic en el icono de copiar; en Armonía también puedes convertirlo en el nuevo color base.
- 5
En Exportar, elige HEX, CSS, Tailwind v3, Tailwind v4 o JSON y copia el código, o descarga .gpl o .ase.
Preguntas frecuentes
¿Por qué las armonías se calculan en OKLCH?
Los tonos se rotan en OKLCH, así que cada color conserva la luminosidad y la viveza percibidas del color base. Rotar en HSL haría que los amarillos se vieran mucho más claros que los azules.
¿Cómo se construyen los tonos del 50 al 950?
La luminosidad sigue una curva cercana a las paletas propias de Tailwind, y el croma alcanza su máximo alrededor de 500–600. Tu color base se conserva exactamente en su paso; Automático elige el paso más cercano a su luminosidad.
¿Puedo volver a una paleta aleatoria anterior?
Sí. Usa Paleta anterior y Paleta siguiente; se conservan las últimas 50 paletas mientras la página está abierta, pero no se guarda nada cuando la cierras.
¿Cuántos colores puede tener una paleta?
Las paletas aleatorias tienen de 2 a 10 colores (usa los botones − y +). Las reglas de armonía dan un número fijo, por ejemplo 2 para complementarios y 5 para análogos o monocromo, y Tonos siempre da 11.
¿Cómo es la exportación de Tailwind v4?
Un bloque @theme de variables --color-*, listo para pegar en tu CSS. Los tonos se escriben como valores oklch() con nombres como --color-brand-500; los demás modos usan HEX.