Color Palette Generator
Understand Color Palette Generator
Genera paletas complementarias, análogas, triádicas, tetrádicas, complementarias divididas y monocromáticas a partir de un solo color base.
How it works
El hexadecimal base se convierte a HSL y el esquema se produce rotando el tono mientras se mantienen la saturación y la luminosidad. La complementaria rota 180°, la análoga toma ±30°, la triádica toma 120° y 240°, la tetrádica toma 90°, 180° y 270°, y la complementaria dividida toma 150° y 210°, los dos tonos que flanquean al complementario, lo que aporta el contraste de un par complementario sin su dureza. La monocromática es la excepción: mantiene el tono y la saturación y recorre la luminosidad por una escala fija de 20 %, 35 %, 50 %, 65 % y 80 %.
When to use it
- Derivar un primer conjunto de colores de acento y secundarios a partir de un único color de marca
- Encontrar un color que destaque sobre un fondo con el que ya se ha comprometido, usando el modo complementario o el complementario dividido
- Generar una rampa monocromática de cinco pasos para una escala de superficie, estado activo y borde
- Explorar alternativas con rapidez antes de dedicar tiempo a afinar una paleta a mano
Watch out for
- La rotación de tono en HSL no es perceptualmente uniforme. Un salto de 120° desde un amarillo brillante aterriza en un color mucho más oscuro con la misma saturación y luminosidad nominales, así que los conjuntos triádicos necesitan a menudo una corrección manual de la luminosidad.
- Una paleta no dice nada sobre la legibilidad. Revise en el comprobador de contraste cada par de texto sobre fondo que piense usar: los colores armónicos suelen no llegar a 4,5:1.
- El modo monocromático descarta la luminosidad del color base. La sustituye por la escala fija, así que el color que introdujo puede no aparecer en su propia paleta.
- Como color base solo se aceptan hexadecimales de 6 y de 3 dígitos; rgb(), hsl() y los nombres de color, no.
Frequently Asked Questions
¿Qué es un esquema de colores complementarios?
Los colores complementarios están justo enfrente en el círculo cromático (a 180°). Crean el máximo contraste y una vibración visual notable. Ejemplo: azul (#0000FF) y naranja (#FF8000). Se usan en botones de llamada a la acción que necesitan destacar sobre un fondo.
¿Qué es un esquema de colores análogos?
Los colores análogos están contiguos en el círculo cromático (±30°). Son armónicos y de bajo contraste, ideales para fondos, degradados e interfaces tranquilas. Una paleta azul-turquesa-verde es análoga y se usa mucho en marcas de salud y bienestar.
¿Cómo genero pares de colores accesibles a partir de una paleta?
Después de generar su paleta, revise cada combinación de primer plano y fondo con la herramienta de contraste WCAG. Para cumplir el nivel AA, la relación de contraste debe ser de al menos 4,5:1 en el texto de cuerpo; muchas paletas generadas necesitan un ajuste de luminosidad para aprobar.
How to Use Color Palette Generator
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.