Generador de paletas de colores
Genera paletas de colores desde un color base con armonías complementaria, análoga, triádica, tetrádica, cuadrada o monocromática. Bloquea colores y exporta a CSS/Tailwind.
Ajustes de la paleta
Tono base + el tono opuesto (180°).
Bloquea los colores que te gusten; Regenerar elige un nuevo color base aleatorio y conserva los bloqueados.
Exportar
Paleta
:root {
--palette-1: #3b82f6;
--palette-2: #b07d00;
}Herramientas Relacionadas
Ver Todas¿Qué es Generador de paletas de colores?
Crea una paleta a partir de un color base usando las armonías clásicas de la rueda de color. La rotación del tono se puede hacer en OKLCH perceptivo (mantiene igual la luminosidad percibida) o en HSL clásico. Los colores se pueden bloquear antes de regenerar, y la paleta se exporta como variables CSS, SCSS, configuración de Tailwind v3, @theme de Tailwind v4 o JSON.
Cómo usar Generador de paletas de colores
- Introduce un Color base (hex, rgb(), hsl() u oklch()) o haz clic en Regenerar para obtener uno aleatorio.
- Elige una Armonía de color y si el tono se rota en OKLCH o en HSL.
- Bloquea los colores que quieras conservar; Regenerar solo sustituye los no bloqueados.
- Haz clic en una muestra para copiar su valor hex.
- Elige un Formato de exportación y un Nombre del token y copia el código.
Ejemplo
Base #ff0000, Triádica, HSL
:root {
--palette-1: #ff0000;
--palette-2: #00ff00;
--palette-3: #0000ff;
} Cuándo usar Generador de paletas de colores
Úsalo para explorar esquemas de color para una marca, un tema de interfaz o una ilustración. Una armonía es un punto de partida, no una comprobación de accesibilidad: verifica aparte el contraste entre texto y fondo. Para ampliar un solo color a una escala 50–950, usa el Generador de tonalidades de color.
Cómo funciona Generador de paletas de colores
Las armonías rotan el tono base en ángulos fijos manteniendo la saturación/croma y la luminosidad: complementaria 0°/180°, análoga 0°/±30°/±60°, triádica 0°/120°/240°, complementaria dividida 0°/150°/210°, tetrádica 0°/60°/180°/240°, cuadrada 0°/90°/180°/270°. La monocromática mantiene el tono y cambia la luminosidad en −30, −15, 0, +15, +30 (% HSL) o ±0,15/±0,3 (L de OKLCH). Los colores OKLCH fuera de sRGB se ajustan a la gama reduciendo el croma. Regenerar elige una base aleatoria con tono 0–360°, saturación 55–85 % y luminosidad 45–60 %.
Casos de Uso Comunes
- Explorar colores de marca a partir del color de un logotipo
- Colores de acento para un tema de interfaz
- Colores de categorías para visualización de datos
- Exportar una paleta como propiedades personalizadas de CSS
- Configurar un tema de Tailwind
Preguntas Frecuentes
¿Debo rotar el tono en OKLCH o en HSL?
OKLCH mantiene igual la luminosidad percibida de todos los colores, lo que da paletas más equilibradas. HSL coincide con la rueda de color clásica de muchas herramientas de diseño, pero sus colores pueden diferir mucho en brillo.
¿Qué hace el bloqueo?
Una muestra bloqueada conserva su color cuando cambias el color base o la armonía, o pulsas Regenerar.
¿Las paletas son accesibles?
Las armonías no dicen nada del contraste. Comprueba las combinaciones de texto y fondo con las relaciones de contraste de WCAG antes de usarlas.