Color base
Modo de armonía
Variables CSS
:root {
--color-1: #3b82f6;
--color-2: #f63c83;
--color-3: #83f63c;
--color-4: #a8c4f0;
}Cómo funciona
El Generador de paletas de colores crea combinaciones armónicas a partir de un color base usando las relaciones de la teoría del color (complementaria, análoga, triádica, complementaria dividida, tetrádica y monocromática) y muestra todos los colores en hexadecimal, RGB y HSL.
La teoría del color define qué relaciones entre colores del círculo cromático resultan armónicas. Una pareja complementaria (colores separados 180°) crea un contraste fuerte y llamativo. Una paleta análoga (tres colores dentro de un margen de 30°) transmite cohesión y calma. Una paleta triádica (tres colores a 120° entre sí) es vibrante y equilibrada. Aplicar estas relaciones con criterio da paletas que parecen pensadas, no elegidas al azar.
Cómo usarlo: elige un color base con el selector o escribe un valor hexadecimal, RGB o HSL. Selecciona el tipo de armonía. La paleta se genera y se muestra con sus muestras de color, los valores en todos los formatos y una vista previa aplicada a una interfaz de ejemplo (botones, tarjetas, texto) para que la valores en contexto antes de usarla.
Tonos y matices: para cada color de la paleta, la herramienta genera 5 tonos más oscuros y 5 más claros ajustando la luminosidad HSL en saltos del 10 %. Así tienes un rango completo, de casi negro a casi blanco, para cada color: el mismo planteamiento que usan las escalas de color de Tailwind CSS.
Comprobación de accesibilidad: cada pareja de colores muestra su ratio de contraste sobre fondo blanco y negro, con indicadores de si cumple los niveles AA y AAA de las WCAG. Una paleta preciosa que no cumple los requisitos de contraste no sirve para texto.
Preguntas frecuentes
- La complementaria usa dos colores directamente opuestos en el círculo cromático (a 180°): mucho contraste, mucho impacto, pero puede resultar dura. La complementaria dividida usa un color base y dos colores situados a 150° a cada lado: contraste parecido, pero más cómodo a la vista y más fácil de manejar.
- Tres colores separados 120° entre sí en el círculo cromático. Las paletas triádicas son vibrantes y tienen mucha tensión visual sin perder el equilibrio. Ejemplos: rojo, amarillo y azul (los primarios) o naranja, verde y violeta (los secundarios).
- Elige 'Monocromática' y la herramienta genera entre 5 y 7 colores del mismo tono variando la saturación y la luminosidad. El resultado es cohesionado y profesional. Es la base de casi todos los sistemas de color de marca única (cincuenta tonos de azul).
- No necesariamente: la herramienta muestra el ratio de contraste de cada color sobre fondo blanco y negro. Las WCAG en nivel AA exigen 4,5:1 para texto normal y 3:1 para texto grande. Revisa esos valores antes de usar un color de la paleta para texto.
¿Qué diferencia hay entre complementaria y complementaria dividida?
¿Qué es una combinación triádica?
¿Cómo creo una paleta monocromática?
¿Las paletas generadas cumplen los requisitos de contraste de las WCAG?
Scrollshot — Full Page Screenshot & Annotate
Scrolls the page for you, captures it viewport by viewport and stitches the slices into one seamless image — then opens an editor so you can crop, annotate and blur before saving.