colorPaletteFinder se basa en los principios clásicos de la teoría del color combinados con los requisitos del diseño digital moderno. Hemos diseñado una interfaz fluida en la que no necesitas calcular tonos manualmente ni verificar los ratios de contraste: la herramienta hace el trabajo pesado por ti.
1. La rueda de color interactiva
En el corazón de colorPaletteFinder está la rueda de color HSL interactiva. A diferencia de los selectores de color rectangulares habituales, nuestra rueda de color circular se corresponde directamente con la dinámica de la teoría del color.
- Tono (el ángulo): arrastra el punto por el borde exterior para cambiar la familia de color fundamental (rojo, azul, verde, etc.).
- Saturación (distancia desde el centro): arrastra el punto hacia el centro para hacer el color grisáceo y apagado, o hacia el borde para lograr la máxima viveza.
- Luminosidad: se ajusta de forma dinámica para garantizar que los colores de armonía generados conserven un peso visual equilibrado.
Mueve el punto del color principal y observa cómo todos los colores de armonía dependientes se adaptan al instante en tiempo real, manteniendo sus estrictas relaciones matemáticas.
2. Elegir una regla de armonía
Según la estética que quieras conseguir, puedes elegir entre siete reglas de armonía del color distintas y matemáticamente probadas:
Complementaria
Colores situados directamente opuestos entre sí en la rueda de color (a 180°). Crea el máximo contraste y una energía de gran impacto.
Análoga
Colores que están uno junto al otro en la rueda (separados 30°). Crea un diseño sereno, cómodo y de aspecto natural.
Triádica
Tres colores repartidos por igual alrededor de la rueda (a 120°). Ofrece un alto contraste a la vez que conserva un mejor equilibrio de color que los esquemas complementarios.
Complementaria dividida
Un color base más los dos colores adyacentes a su complemento. Ofrece el fuerte contraste visual del esquema complementario, pero con menos tensión.
Monocromática
Variaciones de luminosidad y saturación de un único tono. Produce un aspecto cohesionado, limpio y elegante.
3. Verificación del contraste WCAG
Crear una paleta bonita es solo la mitad del trabajo; los colores también deben ser accesibles para todos los usuarios. En concreto, el texto debe ser legible sobre los colores de fondo.
colorPaletteFinder incluye un verificador de contraste integrado al final de la herramienta. Selecciona dos colores generados cualesquiera (por ejemplo, un fondo y un color de texto) y calcula el ratio de contraste.
- Nivel AA: requiere un ratio de contraste de al menos 4.5:1 para el texto normal y 3:1 para el texto grande.
- Nivel AAA: el estándar de oro de la accesibilidad, que requiere un ratio de al menos 7:1 para el texto normal.
4. Copiar y exportar
Una vez generada tu paleta perfecta, integrarla en tu proyecto es muy sencillo.
Pasa el cursor sobre cualquier muestra de color de la tira de la paleta para ver su código HEX exacto. Al hacer clic en la muestra, se copia al instante el código HEX de seis dígitos a tu portapapeles (por ejemplo, #1A2B3C), listo para pegarlo directamente en CSS, configuraciones de Tailwind, Figma o Adobe Creative Cloud.