Mix Colors Like a Designer

#color-mix()color-mix

Generate tonal variants with color-mix() directly in CSS.

live_demo

code

.sw-light {
  background: color-mix(in oklch, var(--mint), white 40%);
}
.sw-dark {
  background: color-mix(in oklch, var(--mint), black 40%);
}
.sw-fade {
  background: color-mix(in oklch, var(--mint), transparent 60%);
}
.sw-mix-v {
  background: color-mix(in oklch, var(--mint) 50%, var(--violet));
}