Paleta Orchid Color Palette

Orchid Color Palette built around #DA70D6, a dark neutral purple anchor (WCAG contrast 7.27:1 against black). The set combines a light tint + a deep shade + a softened complement + a neutral ground. Its strongest pairing is #FCC9F7 on #783176 at 5.94:1, which meets WCAG AA for body text.

violetavibrantefloralfrío
#DA70D6
#FCC9F7
#783176
#88C28A
#DF7FDA
#da70d6 #fcc9f7 #783176 #88c28a #df7fda
#DA70D6 #FCC9F7 #783176 #88C28A #DF7FDA

Roles semánticos

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

background#FCC9F7
surface#88C28A
text#783176
text-muted#DA70D6
primary#DA70D6
secondary#88C28A
accent#DF7FDA

Variables CSS

:root {
  --background: #fcc9f7;
  --surface: #88c28a;
  --text: #783176;
  --text-muted: #da70d6;
  --primary: #da70d6;
  --secondary: #88c28a;
  --accent: #df7fda;
}
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#DA70D6#FCC9F7#783176#88C28A#DF7FDA
#DA70D6
1.0
2.0
2.9
1.4
1.1
#FCC9F7
2.0
1.0
5.9
1.5
1.8
#783176
2.9
5.9
1.0
4.0
3.3
#88C28A
1.4
1.5
4.0
1.0
1.2
#DF7FDA
1.1
1.8
3.3
1.2
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 Orchid Color Palette en CSS?

Copia las variables CSS de abajo en :root y usa var(--primary), var(--background), etc. Paleta completa: #DA70D6, #FCC9F7, #783176, #88C28A, #DF7FDA.

¿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.

Orchid Color Palette — #DA70D6 #FCC9F7 #783176 #88C28A #DF7FDA — Tintiva