Tarjeta de ejemplo
Superficie con tipografía y acento de la paleta generada.
Generá una escala tonal desde un color base, comprobá contraste WCAG y exportá tokens.
Ratio: 8.34:1
El diseño centrado en personas necesita color con intención y contraste suficiente.
El diseño centrado en personas necesita color con intención y contraste suficiente.
Superficie clara
Texto de apoyo para evaluar legibilidad sobre superficies claras y oscuras.
Enlace de ejemploSuperficie con tipografía y acento de la paleta generada.
Tabulá hasta este botón para ver el anillo de foco.
Superficie oscura
Texto de apoyo para evaluar legibilidad sobre superficies claras y oscuras.
Enlace de ejemploSuperficie con tipografía y acento de la paleta generada.
:root {
--color-primary-50: #f0e9ff;
--color-primary-100: #e8e0ff;
--color-primary-200: #d7cdff;
--color-primary-300: #c1b3ff;
--color-primary-400: #a692ff;
--color-primary-500: #7e5eff;
--color-primary-600: #5d21fb;
--color-primary-700: #4500cd;
--color-primary-800: #33009d;
--color-primary-900: #22006f;
--color-primary-950: #180057;
}