Paleta Plum Color Palette

Plum Color Palette built around #DDA0DD, a dark neutral purple anchor (WCAG contrast 10.15:1 against black). The set combines a light tint + a deep shade + a softened complement + a neutral ground. Its strongest pairing is #F8DAF7 on #754D75 at 5.32:1, which meets WCAG AA for body text.

violetasuaveafrutadofrío
#DDA0DD
#F8DAF7
#754D75
#AECFAE
#E1AAE0
#dda0dd #f8daf7 #754d75 #aecfae #e1aae0
#DDA0DD #F8DAF7 #754D75 #AECFAE #E1AAE0

Roles semánticos

Asignados de forma determinista: el más claro = fondo, el más oscuro = texto, el más saturado = primario.

background#F8DAF7
surface#AECFAE
text#754D75
text-muted#DDA0DD
primary#DDA0DD
secondary#AECFAE
accent#E1AAE0

Variables CSS

:root {
  --background: #f8daf7;
  --surface: #aecfae;
  --text: #754d75;
  --text-muted: #dda0dd;
  --primary: #dda0dd;
  --secondary: #aecfae;
  --accent: #e1aae0;
}
Vista previa en interfaces →

Matriz de accesibilidad

Color del texto (filas) sobre el fondo (columnas). Verde = cumple WCAG AA para texto normal (≥4.5:1).

Texto \ Fondo#DDA0DD#F8DAF7#754D75#AECFAE#E1AAE0
#DDA0DD
1.0
1.6
3.3
1.2
1.1
#F8DAF7
1.6
1.0
5.3
1.3
1.5
#754D75
3.3
5.3
1.0
4.0
3.6
#AECFAE
1.2
1.3
4.0
1.0
1.1
#E1AAE0
1.1
1.5
3.6
1.1
1.0

Bajo deuteranopía

Simulación de Machado et al. (2009), severidad 1.0 — aproximación, no es una herramienta médica.

Colores de esta paleta

Paletas similares

Preguntas frecuentes

¿Cómo uso la paleta Plum Color Palette en CSS?

Copia las variables CSS de abajo en :root y usa var(--primary), var(--background), etc. Paleta completa: #DDA0DD, #F8DAF7, #754D75, #AECFAE, #E1AAE0.

¿Estos colores pasan las comprobaciones de accesibilidad?

Consulta la matriz WCAG de esta página: cada combinación texto-sobre-fondo con ratio ≥ 4.5 cumple AA para texto normal; ≥ 3 cumple AA para texto grande y componentes de interfaz.

Plum Color Palette — #DDA0DD #F8DAF7 #754D75 #AECFAE #E1AAE0 — Tintiva