Visualization of Perceptual Color Spaces

Die folgenden Visualisierungen sollen die Farbräume HSV, HSI, HSL und HSB veranschaulichen. Dazu wurden jeweils 48 Farbkreise mit unterschiedlicher Sättigung und Farbwert/Helligkeit/Intensität/Leuchtdichte auf einer Fläche angeordnet. Die Sättigung fällt von oben nach unten hin, Farbwert/Helligkeit/Intensität fallen hingegen von links nach rechts. Bei den Darstellungen handelt es sich um Flashfilme, zur Berechnung wurde die Klasse PerceptualColor verwendet. Die Visualisierungen können auch im Vollbild betrachtet werden.

HSV-Farbraum

HSI-Farbraum

HSL-Farbraum

HSB-Farbraum

Color Space Transformations in ActionScript

Here is a small actionscript3 class for converting colors between different color spaces like RGB, HSV, HSL and HSB. You can input and output the colors either as integer or string value or as serperated color components (e.g. hue, saturation and lightness). The class has no other dependencies.

API

/*
 * Modes:
 * PerceptualColor.HSV, PerceptualColor.HSL, PerceptualColor.HSI
 */ 
 
var color:PerceptualColor;
 
// Konstruktoren
color = new PerceptualColor(mode:String = 'hsl');
color = PerceptualColor.fromInt(i:uint, mode = 'hsl');
color = PerceptualColor.fromHex(h:String, mode = 'hsl'); // format: "#RRGGBB"
color = PerceptualColor.fromRGB(r:uint, g:uint, b:uint, mode = 'hsl');
color = PerceptualColor.fromHSV(h:Number, s:Number, v:Number, mode = 'hsv');
color = PerceptualColor.fromHSL(h:Number, s:Number, l:Number, mode = 'hsl');
color = PerceptualColor.fromHSI(h:Number, s:Number, i:Number, mode = 'hsi');
 
// RGB-Setter (Getter äquivalent)
color.intValue = 0x00BBFF;
color.hexValue = "#00BBFF";
color.red = 0;
color.green = 125;
color.blue = 40;
color.setRGB(0, 125, 40);
 
// HSX-Setter (Getter äquivalent)
color.hue = 0;
color.saturation = 0.6;
// nur im HSV-Modus
color.value = 1;
color.setHSV(0, 0.6, 1);
// nur im HSL-Modus
color.lightness = 1;
color.setHSL(0, 0.6, 1);
 // funktioniert nur im HSV-Modus
color.intensity = 1;
color.setHSI(0, 0.6, 1);
 
// Modus ändern
color.mode = PerceptualColor.HSL;

Usage Examples

/*
 * Beispiel 1:
 * Einlesen einer Integer-Farbe, Sättigung auf 50% setzen, Hex-Farbe ausgeben
 */
var color:PerceptualColor = PerceptualColor.fromInt(0xFF0000);
color.saturation = 0.5;
trace(color.hexValue); // Ausgabe: "#BF3F3F"
 
/*
 * Beispiel 2:
 * Einlesen einer RGB-Farbe, Helligkeit auf 70% begrenzen, RGB-Were ausgeben
 */
color = PerceptualColor.fromRGB(220, 250, 180);
if (color.lightness > 0.7) color.lightness = 0.7;
trace(color.red, color.green, color.blue); // Ausgabe: "188 245 111"
 
/*
 * Beispiel 3:
 * Einlesen einer HSV-Farbe, Umwandlung in den HSL-Raum, Helligkeit auf 50% setzen,
 * zurück in den HSV-Raum umwandeln, Ausgabe
 */
color = PerceptualColor.fromHSV(0, .7, .9);
trace(color.hue, color.saturation, color.value); // Ausgabe: "0 0.7 0.9"
color.mode = PerceptualColor.HSL;
trace(color.hue, color.saturation, color.lightness); // Ausgabe: "0 0.755 0.582"
color.lightness = 0.5;
color.mode = PerceptualColor.HSV;
trace(color.hue, color.saturation, color.value); // Ausgabe: "0 0.861 0.874"

Download

Download: PerceptualColor.as (10,4 kB)