HSB-Farben

Beschreibung durch Farbton, Sättigung und Helligkeit

Das HSB-System beschreibt die gleichen Farben wie das RGB-System, jedoch auf andere Weise.
HSB steht für Hue (Farbton), Saturation (Sättigung) und Brightness (Helligkeit).
Die HSB-Beschreibung hat Bedeutung im Bereich professioneller Grafik. 		HSB Diese HSB-Scheibe zeigt den Verlauf von Farbton (0..360°) und Sättigung (innen 0%, außen 100%) bei konstanter Helligkeit 100%.
Diese Grafik wurde mit PHP 'berechnet'.
Farbe Das komplexe Thema 'Farbe' in der Informatik
HSB-Demo Live-Einstellung von HSB-Farben
Sonderfälle Weiß, Grau, Schwarz und gesättigte Farben
Hue Farbton
Umrechnung HSB <-> RGB

HSB-Demonstration
180°
 
Sättigung (S) 0%
Helligkeit (B) 100%
Farbton (Hue)   Zufalls-Farbe Zufalls-Farbe
   
Hue Saturation Brightness
Klicken sie die Regler-Pfeile, um Farben nach dem HSB-System einzustellen. Der Farbton wird mit einem Kreis-Regler eingestellt und hat daher weder Anfang noch Ende.
Die 3 Eigenschaften werden hintereinander angewendet (rechts):
Zuerst wird der Farbton mit gesättigten Farben eingestellt, danach die Sättigung, und zuletzt die Helligkeit.
test,
HSB RGB
H180°R255
S0%G255
B100%B255
 
#FFFFFF
Die eingestellten Farb-Werte im HSB- und RGB-System

HSB - Sonderfälle
Das HSB-System hat u.a. den Vorteil, dass sich in bestimmten Fällen die Farben mit einem einzigen Zahlenwert einstellen lassen:

Grauwerte:

Bei Sättigung S=0% ergibt sich die Grauskala. Nur der Wert der Helligkeit B bestimmt die Farbe von schwarz (B=0%) bis weiss (B=100%). Im RGB-System bedeutet das gleiche Zahlenwerte für die 3 Grundfarben. Beachten sie, dass in diesem Fall der Farbton H keine Rolle spielt.

Gesättigte Farben:

Nur mit dem Farbton H lassen sich alle möglichen gesättigten Farben einstellen, wenn gleichzeitig S=100% und B=100% ist.

Schwarz:

Helligkeit B=0% ergibt immer schwarz, unabhängig von H und S.

Weiss:

Helligkeit B=100% ergibt nur dann weiss, wenn gleichzeitig S=0% ist, dann jedoch unabhängig von H.

Farbton (Hue)
Wenn man den Farbton mit einem Winkel 0..360° beschreibt, dann erhält man an Stelle einer linearen Skala (z.B. 0..255 für RGB-Farben) eine unendlich lange periodische Skala.
Das hat für einige Anwendungen besondere Vorteile. Dieser Absatz zeigt, wie der Farbton definiert ist:

Jede der 3 RGB-Grundfarben Rot, Grün, Blau ist in einem Kreis-Sektor von 120° abgeschaltet (RGB-Wert 0), im gegenüber liegenden Sektor von 120° in Sättigung (RGB-Wert 255), zwei weitere Sektoren von je 60° beschreiben die Übergänge (Zunahme 0→255 bzw. Abnahme 255→0).
Hue-red Hue-green Hue-blue Hue-RGB

Die 3 Grundfarben werden um je 120° gegeneinander verdreht. Durch Überlagerung der 3 gezeigten Scheiben ergibt sich die 'Farbton'-Scheibe.

Durch die Anordnung entstehen sämtliche möglichen RGB-Farben entlang des Kreis-Umfangs.
Die Farb-Scheiben werden hier mit Sättigung S=100% und Helligkeit B=100% gezeigt.
Alle Grafiken dieser Seite wurden mit → PHP 'berechnet'. 		Man kann in einer Scheibe noch einen weiteren Parameter darstellen, z.B. Sättigung oder Helligkeit von innen nach außen. Ein Beispiel dafür sehen sie ganz oben auf dieser Seite.

Umrechnung HSB ↔ RGB
Jedes professionelle Grafik-Programm kann Farben in mehreren verschiedenen Systemen definieren und umrechnen. Die hier gezeigten vereinfachten Beispiele arbeiten rasch und zufriedenstellend, die Verwendung erfolgt jedoch auf eigenes Risiko.

Umrechnung HSB → RGB

• Funktion hsb_to_rgb führt die gesamte Umrechnung durch. Als Argument wird ein Array der 3 Werte H,S,B verwendet (hsb).
• Die Umrechnung wird hier mit 3 einzelnen Funktionen ausgeführt. So ist besser erkennbar, was die einzelnen Faktoren von HSB bewirken.
• Jede der 3 Teil-Funktionen erhält das Array rgb als Argument und verändert es auf ihre Weise. Keine der 3 Teil-Funktionen gibt ein Ergebnis zurück. Wegen der Array-Eigenschaften bearbeiten sie direkt das als Argument übergebene Array.
♦ Details zu → Javascript-Arrays
• Die Funktion liefert insgesamt ein Array der 3 Werte R.G.B.
• Ganz unten ein Beispiel für die Anwendung.

Für einige spezielle Fälle sind die HSB-Werte undefiniert:
● S=0 ergibt die Skala der Grauwerte von B=0 (schwarz) bis B=100 (weiss). Für alle Grauwerte ist H undefiniert. Das ist korrekt, denn der Sinn von Grauwerte liegt genau darin, dass sie eben keinen Farbton haben. Sie müssen selbst entscheiden, ob ihre Funktion in diesem Fall einen Fehlerwert oder einen beliebigen anderen Wert 0..H..360 angeben soll.
● B=0 ergibt immer Schwarz, unabhängig von H und S.   Sie müssen selbst entscheiden, ob ihre Funktion in diesem Fall einen Fehlerwert angeben soll oder einen beliebigen anderen Wert für 0..H..360 und 0..S..100
function hsb_to_rgb(hsb) {
var rgb = new Array(0,0,0);
hsb_hue(rgb,hsb[0]);
hsb_saturation(rgb,hsb[1]);
hsb_brightness(rgb,hsb[2])
return rgb;
}

function hsb_hue(rgb,hue) {
var h=hue;
var hc=255/60;
var f=0;
// Rot
if(h<=60) {f=255;}
else if(h<120) {f=255-(h-60)*hc;}
else if(h<240) {f=0;}
else if(h<300) {f=(h-240)*hc;}
else {f=255;}
rgb[0]=f;
// Gruen
if(h<60) {f=h*hc;}
else if(h<=180) {f=255;}
else if(h<240) {f=255-(h-180)*hc;}
else {f=0;}
rgb[1]=f;
// Blau
if(h<120) {f=0;}
else if(h<180) {f=(h-120)*hc;}
else if(h<300) {f=255;}
else{f=255-(h-300)*hc;}
rgb[2]=f;
}

function hsb_saturation(rgb,sat) {
var s=sat/100;
for(var i=0;i<3;i++) {
rgb[i]=s*(rgb[i]-255)+255;
}
}

function hsb_brightness(rgb,bri) {
var b=bri/100;
for(var i=0;i<3;i++) {
f[i]=b*rgb[i];
}
}
Anwendung:
var hsb = new Array(180,100,100);
rgb = hsb_to_rgb(hsb);
// Ergebnis:
rgb[0] = 0; // rot
rgb[1] = 0; // grün
rgb[2] = 0; // blau

Umrechnung RGB → HSB

• Funktion rgb_to_hsb führt die Umrechnung durch.
Das Beispiel rechts zeigt eine nicht getestete Roh-Version !

Zunächst werden die RGB-Werte auf den Bereich 0..r,g,b..1 normalisiert (Variable rn,gn,bn).
Um mit HSB die relativen Verhältnisse zwischen den 3 Grundfarben anzugeben, wird Minimum (minn), Maximum (maxn) und maximale Differenz (d) berechnet - alles im normalisierten Bereich 0..1
Die Berechnung von Hue richtet sich danach, welche der 3 Grundfarben das Maximum liefert.
Zuletzt werden die HSB-Zahlenwerte in ihren üblichen Werte-Bereich umgerechnet.

Für einige spezielle Fälle sind die HSB-Werte undefiniert:
● Wenn (R=G=B) ergibt sich die Skala der Grauwerte. In diesem Fall ist Hue undefiniert. Sie müssen selbst entscheiden, ob ihre Funktion in diesem Fall einen Fehlerwert oder einen beliebigen anderen Wert für H angeben soll.
● Wenn RGB=(0,0,0) = schwarz, dann ist nur der Wert B=0 definiert. Die beiden anderen Werte H,S sind undefiniert. Sie müssen selbst entscheiden, ob ihre Funktion in diesem Fall Fehlerwerte oder beliebige andere Werte für H und S angeben soll.

Die beiden Hilfs-Funktionen amin und amax geben den kleinsten bzw. größten Wert eines Arrays von Zahlen zurück.
function rgb_to_hsb(rgb) {
var rn=rgb[0]/255;
var gn=rgb[1]/255;
var bn=rgb[2]/255;
var maxn=amax(rgb);
var minn=amin(rgb);
var bn=maxn;
var sn=0;
if(maxn!=0){sn=(maxn-minn)/maxn}
var hn=0;
if(sn) {
var d=maxn-minn;
if(maxn==rn) {hn=(gn-bn)/d;}
else if(maxn=rg) {hn=2+(bn-rn)/d;}
else {hn=4+(rn-gn)/d;}
hn*=60;
while(h<0) {h+=360;}
}
else {hn=-1;}
var hsb=new Array(0,0,0);
hsb[0]=hn;
hsb[1]=sn*100;
hsb[2]=bn*100;
return hsb;
}
function amin(ar) {
var m=ar[0];
for(var i=1;i<ar.length;i++) {
if(ar[i]<m) {m=ar[i];}
}
return m;
}
function amax(ar) {
var m=ar[0];
for(var i=1;i<ar.length;i++) {
if(ar[i]>m) {m=ar[i];}
}
return m;
}

Zum Inhaltsverzeichnis Homepage von PS-Trainer   >   Standards   >   Farbe   >   HSB
XHTML CSS