Skip to content

Automatic foreground color contrast based on the provided background color.

button {
  --background: black;
  --foreground: color(
    from var(--background) xyz round(up, min(1, max(0, 0.18 - y)))
      round(up, min(1, max(0, 0.18 - y))) round(up, min(1, max(0, 0.18 - y)))
  );

  background-color: var(--background);
  color: var(--foreground);
}

via blog.damato.design