Vista previa del diseño
Detalles de los colores
01Principal
ContrasteAa 12.9Aa 1.6
02Secundario
ContrasteAa 9.2Aa 2.3
03Acento
ContrasteAa 6.3Aa 3.4
04Fondo
ContrasteAa 3.8Aa 5.6
Usa esta paleta
Variables CSS
:root {
--royal-purple-1: #4B0082;
--royal-purple-2: #6A0DAD;
--royal-purple-3: #7F00FF;
--royal-purple-4: #9370DB;
}Colores de Tailwind
module.exports = {
theme: {
extend: {
colors: {
'royal-purple': {
100: '#4B0082',
200: '#6A0DAD',
300: '#7F00FF',
400: '#9370DB',
},
},
},
},
};Combinaciones de color accesibles
Combinaciones de texto y fondo de esta paleta que cumplen WCAG AA (4.5:1) para texto normal.
Ninguna combinación de esta paleta alcanza 4.5:1. Usa texto negro o blanco para el texto principal.
Colores con nombre en esta paleta
El color CSS con nombre más cercano a cada muestra.