CSS contrast-color() playground

Explore contrast-color() with a background color picker. The example applies the selected color to a button and lets CSS automatically resolve whether the text should be black or white, with generated code inspired by MDN.

Your browser does not support contrast-color() yet; a fallback is shown.

HTML

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

CSS

.contrast-color-demo {
  --button-color: #660066;
  background-color: var(--button-color);
  color: contrast-color(var(--button-color));
}