vordefinierte Farbe ändern

[ich]

Hallo. 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?

Gruß, ich

[ich]

Ahhh! Die Überschrift passt natürlich nicht. sorry.

[Gunnar Bittersmann]

@@ich

Ahhh! Die Überschrift passt natürlich nicht. sorry.

Kannst du sie nachträglich nicht mehr ändern?

Wenn nicht, sag, was du stattdessen haben willst, dann ändere ich die Überschrift.

🖖 Live long and prosper

[ich]

Kannst du sie nachträglich nicht mehr ändern?

Leider nicht.

Vielleicht "vordefinierte Farbe ändern". Aber da bin ich offen. Mach einfach. Danke

[Ryuno-Ki]

Moin ich,

Kannst du sie nachträglich nicht mehr ändern?

Leider nicht.

Vielleicht "vordefinierte Farbe ändern". Aber da bin ich offen. Mach einfach. Danke

Weil du Weiß reinmischst, wird es im Englischen als Tint bezeichnet.

Im Deutschen sprechen wir da wohl von Aufhellen.

Gruß,

[Gunnar Bittersmann]

@@Ryuno-Ki

Weil du Weiß reinmischst, wird es im Englischen als Tint bezeichnet.

Im Deutschen sprechen wir da wohl von Aufhellen.

Ich hatte „etwas weniger Farbe in der Farbe“ so verstanden, dass ich („ich“, nicht ich) die Sättigung verringern will.

Kannst du („ich“) mal beschreiben, was du da vorhast?

🖖 Live long and prosper

[Ryuno-Ki]

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ß,

[ich]

Das mit dem HSL ist eine gute Idee.

Danke

[Gunnar Bittersmann]

@@ich

Das mit dem HSL ist eine gute Idee.

Ja, mit der entsprechenden Funktion dafür: hsl().

Du kannst auch oklch() verwenden, wenn das für deine Zwecke bessere Ergebnisse liefert.

Beispiel

🖖 Live long and prosper

[Rolf B]

Hallo ich,

HSL ist dann und nur dann eine gute Idee, wenn Du Browser supporten willst, die OKLCH nicht unterstützen.

Das HSL-Modell entspricht nicht dem Sehverhalten des menschlichen Auges, OKLCH hingegen schon.

Rolf

[Ryuno-Ki]

Moin Rolf,

HSL ist dann und nur dann eine gute Idee, wenn Du Browser supporten willst, die OKLCH nicht unterstützen.

Das HSL-Modell entspricht nicht dem Sehverhalten des menschlichen Auges, OKLCH hingegen schon.

Ist mir bekannt. Daher die Einschränkung

Persönlich nehme ich aber nicht HEX, sondern etwa HSL (im Wesentlichen auch RGB, aber umgerechnet).

(Ich habe mitbekommen, dass ich hier nicht direkt adressiert wurde und fasse es auch nicht als Kritik, sondern als Ergänzung auf)

Lea Verou hat das vor einigen Jahren einmal schön aufgedröselt.

Allein: ich hab mich noch nicht hingesetzt und damit genauer beschäftigt.

Gruß,

[Der Martin]

Hallo,

Moin Rolf,

Persönlich nehme ich aber nicht HEX, sondern etwa HSL (im Wesentlichen auch RGB, aber umgerechnet).

(Ich habe mitbekommen, dass ich hier nicht direkt adressiert wurde und fasse es auch nicht als Kritik, sondern als Ergänzung auf)

ich hatte dazu schon diverse Diskussionen mit Gunnar - dennoch: Als physikalisch geprägter Ingenieur kann ich mir im RGB-Modell noch am ehesten vorstellen, wie die Farbe wohl aussehen mag. Auch Feintuning - oh, da noch ein bisschen mehr Blauanteil oder so.

Einen schönen Tag noch
 Martin

[JürgenB]

Hallo Mertin,

... Als physikalisch geprägter Ingenieur kann ich mir im RGB-Modell noch am ehesten vorstellen, wie die Farbe wohl aussehen mag. Auch Feintuning - oh, da noch ein bisschen mehr Blauanteil oder so.

mir geht es ähnlich. Aber ein Farbraum mit orthogonalen Werten - ein Wert nur für den Farbton, ein Wert nur für die Helligkeit, und ein Wert nur für die Sättigung - ist schon was feines. Versuch mal im RGB-Raum den Farbton zu ändern, die Helligkeit aber nicht.

Gruß
Jürgen

PS Zum spielen: https://wiki.selfhtml.org/extensions/Selfhtml/example.php/Beispiel:Oklch-2.html

[Gunnar Bittersmann]

@@Der Martin

ich hatte dazu schon diverse Diskussionen mit Gunnar - dennoch: Als physikalisch geprägter Ingenieur kann ich mir im RGB-Modell noch am ehesten vorstellen, wie die Farbe wohl aussehen mag.

Ein Fall von Old habits die hard?

Auch Feintuning - oh, da noch ein bisschen mehr Blauanteil oder so.

Damit änderst du aber nicht nur den Farbton. Wenn du mehr Blau in den Mix gibst, erhöhst du die Helligkeit.

Das dürfte oft unerwünscht sein. Eine Farbe blauer machen, ohne die Helligkeit zu ändern – kein Problem im HSL-Modell. Einfach ein bisschen am Rad gedreht, d.h. am Farbkreis (hue).

Und noch besser in Oklch, was unserer Wahrnehmung besser entspricht.

🖖 Live long and prosper

[Der Martin]

Hallo,

ich hatte dazu schon diverse Diskussionen mit Gunnar - dennoch: Als physikalisch geprägter Ingenieur kann ich mir im RGB-Modell noch am ehesten vorstellen, wie die Farbe wohl aussehen mag.

Ein Fall von Old habits die hard?

auf jeden Fall, ja. Was man einmal gelernt hat, versucht man beizubehalten.

Auch Feintuning - oh, da noch ein bisschen mehr Blauanteil oder so.

Damit änderst du aber nicht nur den Farbton. Wenn du mehr Blau in den Mix gibst, erhöhst du die Helligkeit.

Moooment - dass man dabei gleichzeitig den R- und den G-Anteil etwas reduziert, ist ja selbstverständlich. Denn die Helligkeit ist ja die gewichtete Summe der Komponenten.

Aber letztendlich wähle ich Farben oder Farbmixe immer nach dem subjektiven Eindruck. Was anderes steht mir nicht zur Verfügung.

Und noch besser in Oklch, was unserer Wahrnehmung besser entspricht.

Mag sein; damit hab ich noch keine Erfahrung.

Einen schönen Tag noch
 Martin

[Rolf B]

Hallo Martin,

Moooment - dass man dabei gleichzeitig den R- und den G-Anteil etwas reduziert, ist ja selbstverständlich. Denn die Helligkeit ist ja die gewichtete Summe der Komponenten

Hassu aba nich gsagt 😉

Oklch übernimmt die nötige, physiologisch richtige Gewichtung für dich. Was in Grenzbereichen zu Farben führt die dein Bildschirm nicht darstellen kann, aber da hilft auch old school HSL oder RGB (die am Leuchtverhalten der Phosphorpunkte einer Bildröhre ausgerichtet sind) nicht.

Rolf

[Gunnar Bittersmann]

@@Der Martin

Damit änderst du aber nicht nur den Farbton. Wenn du mehr Blau in den Mix gibst, erhöhst du die Helligkeit.

Moooment - dass man dabei gleichzeitig den R- und den G-Anteil etwas reduziert, ist ja selbstverständlich.

Nein, ist es nicht. Wenn du eine Sache (den Farbton) ändern willst, dann ist es nicht selbstverständlich, dass du dafür drei Werte änderst. Das mag für dich so gewohnt sein; aber selbstverständlich und intuitiv ist was ganz anderes.

🖖 Live long and prosper

[Der Martin]

Moin,

Moooment - dass man dabei gleichzeitig den R- und den G-Anteil etwas reduziert, ist ja selbstverständlich.

Nein, ist es nicht. Wenn du eine Sache (den Farbton) ändern willst, dann ist es nicht selbstverständlich, dass du dafür drei Werte änderst.

wenn du in einem Whisky-Cola-Mix einen höheren Whisky-Anteil haben willst^[1], musst du doch auch den Cola-Anteil verringern, wenn die Gesamtmenge gleich bleiben soll.

Das mag für dich so gewohnt sein; aber selbstverständlich und intuitiv ist was ganz anderes.

Ich kenn es halt auch aus dem echten Leben so. 🤷

Einen schönen Tag noch
 Martin

---

1. Nicht machen! Nie Whisky mit Cola schänden! Das ist Sünde. ↩︎