Paletas que definen marcas, no solo pantallas.
Elige un color base o extráelo de una imagen, ajusta la armonía, simula accesibilidad y genera modo claro/oscuro automáticamente.
Empieza abajoGenerador de paleta
Selecciona tu color base y ajusta el ángulo de armonía para pasar de análogos a tríada o tétrada.
Ángulo de armonía
Análogos · recálculo en tiempo real
Extraer paleta de una imagen
Analizamos los píxeles con K-means para obtener los 5 colores dominantes.
Accesibilidad visual
Simula deficiencias de visión de color y valida el contraste WCAG.
Simulador de visión
Cómo percibiría tu paleta una persona con visión normal.
Contraste WCAG · base de color
3.68
ratio de contraste
5.71
ratio de contraste
Matriz de contraste cruzado
Ratio WCAG de cada texto (fila) sobre cada fondo (columna).
| Texto \ Fondo | #3C83F6 |
#7766F4 |
#A418FB |
#7CE5F3 |
#00FF9D |
|---|---|---|---|---|---|
#3C83F6 |
Aa1.0 |
Aa1.2 |
Aa1.4 |
Aa2.5 |
Aa2.7 |
#7766F4 |
Aa1.2 |
Aa1.0 |
Aa1.2 |
Aa2.9 |
Aa3.2 |
#A418FB |
Aa1.4 |
Aa1.2 |
Aa1.0 |
Aa3.5 |
Aa3.8 |
#7CE5F3 |
Aa2.5 |
Aa2.9 |
Aa3.5 |
Aa1.0 |
Aa1.1 |
#00FF9D |
Aa2.7 |
Aa3.2 |
Aa3.8 |
Aa1.1 |
Aa1.0 |
Modo claro y oscuro automático
Generamos los tokens de UI ajustando la luminancia para cumplir el contraste WCAG AA en ambos modos.
Panel de control
Texto secundario legible en este modo de interfaz.
Panel de control
Texto secundario legible en este modo de interfaz.
Exportar para desarrolladores
Copia la lista de paletas para pegar en tu proyecto.
:root {
--color-base: #3C83F6;
--color-color-2: #7766F4;
--color-color-3: #A418FB;
--color-color-4: #7CE5F3;
--color-color-5: #00FF9D;
}Mi galería
Tus paletas guardadas en este navegador.
Aún no has guardado paletas.
Genera una combinación y pulsa «Guardar en galería».
¿Necesitas una identidad visual completa?
Descargue esta paleta en PDF lista para presentar. Y si buscas llevar tu marca al siguiente nivel, nuestro equipo de diseño puede ayudarte. Ingresa tu correo para recibir el documento.