4 colores
Chocolate Mint
Vista previa del diseño
Detalles de los colores
01Principal
ContrasteAa 13.8Aa 1.5
02Secundario
ContrasteAa 9.3Aa 2.3
03Acento
ContrasteAa 1.9Aa 10.8
04Fondo
ContrasteAa 1.3Aa 16.6
Usa esta paleta
Variables CSS
:root {
--chocolate-mint-1: #3E2723;
--chocolate-mint-2: #5D4037;
--chocolate-mint-3: #00CED1;
--chocolate-mint-4: #98FB98;
}Colores de Tailwind
module.exports = {
theme: {
extend: {
colors: {
'chocolate-mint': {
100: '#3E2723',
200: '#5D4037',
300: '#00CED1',
400: '#98FB98',
},
},
},
},
};Combinaciones de color accesibles
Combinaciones de texto y fondo de esta paleta que cumplen WCAG AA (4.5:1) para texto normal.
- Aa #3E2723 / #98FB98 10.9:1
- Aa #98FB98 / #3E2723 10.9:1
- Aa #5D4037 / #98FB98 7.4:1
- Aa #98FB98 / #5D4037 7.4:1
- Aa #3E2723 / #00CED1 7.1:1
- Aa #00CED1 / #3E2723 7.1:1
- Aa #5D4037 / #00CED1 4.8:1
- Aa #00CED1 / #5D4037 4.8:1
Colores con nombre en esta paleta
El color CSS con nombre más cercano a cada muestra.