Conversión de colores
#ca4e4e
≈ Chestnut Rose
Variaciones
La finalidad de esta sección es producir con precisión tintes (blanco puro añadido) y sombras (negro puro añadido) del color que hayas seleccionado en incrementos del 10%.
Consejo profesional: Utiliza tonos para los estados flotantes y las sombras, y tintes para las luces y los fondos.
Sombras
Variaciones más oscuras creadas añadiendo negro a tu color base.
Tintes
Variaciones más claras creadas añadiendo blanco a tu color base.
Casos de uso habituales
- • Estados de los componentes de la IU (flotante, activo, desactivado)
- • Crear profundidad con sombras y luces
- • Construir sistemas de color coherentes
Consejo sobre el sistema de diseño
Estas variaciones forman la base de una paleta de colores cohesionada. Expórtalas para mantener la coherencia en todo tu proyecto.
Combinaciones de colores
Cada armonía tiene su propio estado de ánimo. Utiliza las armonías para hacer una lluvia de ideas sobre combinaciones de colores que funcionen bien juntos.
Cómo utilizarlo
Haz clic en cualquier color para copiar su valor hexadecimal. Está demostrado matemáticamente que estas combinaciones crean armonía visual.
Por qué es importante
Las armonías de color crean equilibrio y evocan emociones específicas en tus diseños.
Complemento
Un color y su opuesto en la rueda cromática, +180 grados de matiz. Alto contraste.
Complementarios divididos
Un color y dos adyacentes a su complemento. Audaz como un complemento directo, pero más versátil.
Triádica
Tres colores espaciados uniformemente a lo largo de la rueda cromática, cada uno con 120 grados de diferencia. Lo mejor es dejar que domine un color y utilizar los otros como acentos.
Análogos
Tres colores de la misma luminancia y saturación con matices adyacentes en la rueda cromática, separados 30 grados. Transiciones suaves.
Monocromático
Tres colores del mismo tono con valores de luminancia +/-50%. Sutil y refinado.
Tetrádica
Dos conjuntos de colores complementarios, separados por 60 grados de matiz.
Principios de la Teoría del Color
Saldo
Utiliza un color dominante, apoya con secundarios y acentúa con moderación.
Contraste
Garantiza un contraste suficiente para la legibilidad y la accesibilidad.
Armonía
Los colores deben trabajar juntos para crear una experiencia visual unificada.
Comprobador de Contraste de Color
Prueba las combinaciones de colores para asegurarte de que cumplen las normas de accesibilidad WCAG para la legibilidad del texto.
Color del texto
Color de fondo
Contraste
Normas WCAG
Todo el mundo es un genio. Pero si juzgas a un pez por su capacidad para trepar a un árbol, vivirá toda su vida creyendo que es estúpido.