Playground de contrast-color() en CSS

Explora contrast-color() con un selector de color de fondo. El ejemplo aplica el color elegido a un botón y deja que CSS resuelva automáticamente si el texto debe ser blanco o negro, con una salida de código inspirada en MDN.

Tu navegador todavía no soporta contrast-color(). Se muestra un fallback.

HTML

<button class="contrast-color-demo" type="button">
  contrast-color()
</button>

CSS

.contrast-color-demo {
  --button-color: #660066;

  padding: 0.75rem 1.25rem;
  border: 0;
  background-color: var(--button-color);
  color: contrast-color(var(--button-color));
}