HTML/CSS CSS3 HSL-Farbmodell hsla()

[dominicbauer]

Tag,

Ich hab mir heute die hsla()-Funktion angeschaut, die ja im Grunde genommen das Aquivalent zu rgba() darstellt.
Ist eigentlich auch recht cool, vor allem weil ich es als einfacher empfinde, sich einen Farbkreis vorzustellen, als sich mit hexadezimalen Angaben herumzuschlagen.

Mein Problem: Die Farben sind nicht identisch!
Theoretisch könnte ich ja auch einfach rgb() und hsl() verwenden, aber das funktioniert genausowenig.

Versucht hab ich das mit diesem Blau:

RGB-Anteile: 29, 127, 210
HSL: 208°, 86%, 82%

So. Sieht jedenfalls in Photoshop identisch aus:

Müsste also theoretisch das identische Blau sein.

Mein komplettes Markup liegt hier, wie folgt meine CSS-Regeln:

div#rgba {
     background-color: rgba(29, 127, 210, 1);
}

div#hsla {
     background: hsla(208, 86%, 82%, 1);
}

Und das Resultat (hier gerendert im Safari5):

Also: Woran liegts?

 

[wahnsinn]

Ganz einfach: Dein Monitor kann nur RGB, alles andere muss umgerechnet werden. Und für diese Umrechnung gibt es keine Norm, sondern wird von jeder Software, abhängig von irgendwelchen Farbprofilen, anders durchgeführt und kommt somit auch zu anderen Ergebnissen.

Die sauberste Variante: Farbe im Grafikprogramm deines Vertrauens auswählen und weiterhin mit RGB arbeiten.

 

[theHacker]

Das is nicht dasselbe Farbschema, was Photoshop benutzt:

HSL takes three values:

• Hue is a degree on the color wheel; 0 (or 360) is red, 120 is green, 240 is blue. Numbers in between reflect different shades.
• Saturation is a percentage value; 100% is the full colour.
• Lightness is also a percentage; 0% is dark (black), 100% is light (white), and 50% is the average.

Quelle: https://www.css3.info/preview/hsl/

Photoshop liefert HSB-Werte. Umrechnungen siehe hier:
https://de.wikipedia.org/wiki/HSL-Farbraum#Abgewandelte_Farbmodelle_HSL.2C_HSB.2C_HSI

 

[dominicbauer]

danke an euch beide!

Die sauberste Variante: Farbe im Grafikprogramm deines Vertrauens auswählen und weiterhin mit RGB arbeiten.

klar, produktiv einsetzen will ich das sowieso nicht.

Das is nicht dasselbe Farbschema, was Photoshop benutzt:

stimmt, hätte ich auch selbst draufkommen können.

… Umrechnungen …

im grunde genommen wurde doch ein property implementiert, das abgesehen von ein paar printlern vollkommen ungenutzt bleiben wird, oder!?

 

[theHacker]

im grunde genommen wurde doch ein property implementiert, das abgesehen von ein paar printlern vollkommen ungenutzt bleiben wird, oder!?

Ich persönlich empfinde es einfacher, mir Farbkegel, als den Farbdoppelkegel vorzustellen.

Hier hab ich noch einen Link, wo man die beiden Farbräume schön visualisiert sieht:
https://ian-albert.com/graphics/hsb.php

Und sicher auch empfehlenswert:
https://en.wikipedia.org/wiki/HLS_color_space

 

[dominicbauer]

Ich persönliche empfinde es einfacher, mir Farbkegel, als den Farbdoppelkegel vorzustellen.

mag sein, aber da ich ja scheinbar nicht die möglichkeit habe in photoshop mit hsl-werten zu arbeiten, müsste ich also theoretisch alle werte manuell umrechnen, bevor ich sie mit hsl() nutzen könnte.

mir will sich der sinn irgendwie nicht so wirklich auftun … mal ausprobiert haben ja, in irgendeiner weise damit arbeiten, eher nein

edit: ich bin sicher das geht in gimp und $grafikprogramm, also wirds schon seine daseinsberechtigung haben