Moin ich,

In css habe ich eine Farbe definiert: :root { --color:#E6E4C8;}

Diese möchte ich sehr oft genau so anzeigen. Aber diese Farbe möchte ich an ein paar Stellen abgeschwächt anzeigen. Also nicht transparen, sondern nur etwas weniger Farbe in der Farbe.

Bisher mache ich das so: color-mix(in oklab, var(--color) 60%, white);

Was würdet Ihr sagen? Ist das so ok oder gibt es eine andere/einfachere Möglichkeit?

Das tut (und erfüllt damit schon einmal einen wichtigen Punkt). Persönlich nehme ich aber nicht HEX, sondern etwa HSL (im Wesentlichen auch RGB, aber umgerechnet). Da kann ich dann zum einen für die drei Bestandteile eine CSS Custom Property definieren und diese dann in einer weiteren als HSL kombinieren:

body {
  --hue: 56;
  --saturation: 37.5;
  --lightness: 84.3;
  --color: hsl(var(--hue) calc(var(--saturation) * 1%) calc(var(--lightness) * 1%));
}

Hier kann ich dann gezielt die Bestandteile manipulieren, um den Wert anzupassen. Unser Wiki weiß einiges über Farbmodelle.

Gruß,