U9 Farbcodierung

Farbcodierung

Welche Möglichkeiten zur Farbcodierung gibt es? durch den Namen [red : green : blue] durch die hexadezimale Notation [#FF000 : #00FF00 : #0000FF] durch RGB-Werte (dezimal) [rgb (255,0,0) : rgb (0,255,0) : rgb (0,0,255)] durch HSL-Werte [hsl ( 0,100%,50%) : hsl (120, 100%, 50%) : hsl (240, 100%, 50%)] Welche Angaben von Farbwerten sind nicht zulässig?Nicht zulässig ist die Angabe von Farben als HSL-Werte. HSL-Werte werden von den älteren Versionen des Internet Explorers nicht interpretiert. Erst IE9 kann Farbwerte in HSL-Notation anzeigen.Welche Farbcodierung wird am häufigsten verwendet?Hexadezimale Notation (z.B. #FF0000)

Welche Erweiterung von RGB und HSL gibt es? RGBA (red, green, blue, alpha) HSLA (hue,saturation, lightness, alpha) Das A hinter RGB und HSL steht für Alphakanal, also einer zusätzlichen Angabe, die die Deckkraft einer Farbe regelt.Ein Wert von 0.0 = vollständige TransparenzEin Wert von 1.0 = vollig undurchsichtigBeispiele:background-color: rgb (0,255,0,0.2) /*Grün mit wenig Deckkraft*/background-color: rgb (0,255,0,0.5) /*Grün mit mittelmäßiger Deckkraft*/background-color: rgb (0,255,0,0.9) /*Grün mit starker Deckkraft*/background-color: hsla (120,100%,50%,0.3) /*Grün mit wenig Deckkraft*/

additive Farbmischung (alle 3 Farben addieren sich zu weiß) auch physiologische Farbmischung genannt / oder auch Lichtfarben für jede Farbe (Rot, Grün, Blau) wird ein Wert von 0-255 angegeben--> 0 = keine Farbe--> 255 = alle Teile Farbe 256³ = 16,7 Mio. verschiedene Farbtöne geräteabhängig Verwendung bei: Monitor, Scanner, Kamera, menschliches Farbansehen

RGB

verschiedene Farbräume--> sRGB (Standard RGB)--> CIE RGB (umfasst größeren RGB-Farbraum, nicht durch alle Komponenten realisierbar)--> ECI RGB (empfohlener Basisfarbraum für Color Management-Workflow)--> PAL / SECAM (aktueller TV-Standard) alle Werte auf 0 = schwarz alle Werte auf 255 = weiß

6e666c98-9732-4221-9747-b1ee990d08b2 (image/jpg)

RGB

CMYK

subtraktive Farbmischung (alle 3 Farben subtrahieren sich zu weiß) auch physikalische Farbmischung genannt / oder auch Druckfarben Farbwerte sind prozentuale Rastertonwerte zwischen 0 und 100 % kennzeichnen nicht nur Farben, sondern auch den Farbaufbau (Unbunt, Bunt) alle Werte auf 100% = schwarz alle Werte auf 0 % = weiß

2a004881-f748-41b5-bb21-db3dcb910107 (image/png)

Caption: : CMY sind keine spektral reinen Farben, deswegen wird K (Key = Schwarz) dazu genommen

CIE L*a*b*

wurde von Internationaler Beleuchtungskommission CIE festgelegt geht aus dem CIE-XYZ-Modell hervor geräteunabhängig 3D-Farbmodell Farbunterschiede werden numerisch bestimmt medienneutralter Farbraum objektives Farbmodell, wird dem menschlichen Wahrnehmungsvermögen nahezu gerecht größere Auswahl von Farbtönen als RGB und CMYK

Vorteile Freie Berechenbarkeit Eindeutige Kommunikation/Eindeutige Definierung Urheber- und Lizenzfrei als Farbton vorstellbar Weltweite Verbreitung Nachteile keine verbindlichen Farbmuster Angabe (z.B. 20/30/40) ist schwer unübesichtlicher Farbraum

CIE L*a*b*-Aufbau

c21676a9-efbb-4810-9f4c-fb91408f417e (image/jpg)

3 Koordinaten, Achsen stehen rechtwinklig aufeinanderL* = Luminance (Helligkeit)a* = rot-grün-Achse--> negative Werte = grün--> positive Werte = rotb* = gelb-blau-Achse--> negative Werte = blau--> positive Werte = gelb an den Rändern liegen die bunten Farben in der Mitte befindet sich unbuntes Grau Besser verständliche Werte:H = Hue (Farbton, als Winkel angegeben)L = Lightness (Helligkeit)C = Chroma(zität) (Buntheit/Sättigung)0° = Rot90° = Gelb180° = Grün270° = Blau

leitet sich vom RGB-Farbmodell ab auch additive Farbmischung beschreibt die Farbe anschaulicher als RGB Modell: zylinderförmiges Gebilde geräteabhängig H = Hue (Farbton)-> Gradzahl 0-259° gegen den Uhrzeigersinn-> Grundlage: additiver 6-teiliger FarbkreisS = Saturation (Sättigung / Farbreinheit)Abstand einer Farbe zum Mittelpunkt in %-Wert angegeben 0% Sättigung = Grauton (Mitte vom Kreis) 100 % Sättigung = maximal gesättigte Farbe wird die Sättigung reduziert, wird der Farbton unbunter (grauer)

HSB

B = Brightness (Helligkeit) vertikale Achse durch Kreismittelpunkt--> Unbuntachse / Helligkeitsachse wird in %-Werten angegeben 0% Helligkeit = Schwarz 100% Helligkeit = hellstmöglichster Farbton--> wenn der Farbton ein Unbuntton ist (0% Sättigung), dann 100 % Helligkeit = weiß

HSB

761b2d64-0d6d-451b-b307-5301a07e92f6 (image/png)

HSV-Farbmodell Transformationen des RGB-Farbraums 3D-Farbmodelle geräteabhängig Farbrad genauso wie bei HSBH = Hue (Farbton)S = Saturation (Sättigung)V = Value (Dunkelton) Darstellung als Zylinder oder Kegel Farben nehmen mit dem Wert ab

HSV und HSL

HSL-Farbmodell ähnelt dem HSV-FarbmodellH = Hue (Farbton)S = Saturation (Sättigung)L= Lightness (Helligkeit) Darstellung als Doppelkegel Maximum an Farbe liegt bei 50%

9821dfe4-e0f6-46ff-a5dc-a6eeb8a7cd0d (image/png)

HSV und HSL

Hexadezimales Zahlensystem

HEX - Zahlensystem bei Webfarben genutzt (für HTML/CSS erforderlich) Umrechnung erfolgt von RGB in HEX es werden 16 Zeichen zur Darstellung verwendet (0-9 und A-F) übliche Farbdefinition: 6 aneinander gereihte Zeichen 3 Gruppen à 2 Stellen #RRGGBB pro Gruppe können 2^8 verschiedene Zustände definiert werden = 256 Farbwerte 0 = komplett „ausgeschaltete“ Farbe = schwarz 255 (FF) = 100% Farbsättigung #FFFFFF = weiß #000000 = schwarz #FF0000 = rot #880000 = dunkelrot

e94d730c-173c-4aa3-956a-8279ebf09d81 (image/png)

Umrechnungen von Farbmodellen

RGB in CMYK RGB sind Ausgangswerte zur Berechnung der komplementären DruckfarbeRot --> CyanGrün --> MagentaBlau --> Yellow hohe Werte bei RGB werden zu niedrigen Werten bei CMY Umrechnung in % ist erforderlich!

Beispiel:RGB (235/35/28)Cyan: 255-235 = 20 --> (20:255) x 100% = 8%Magenta: 255-35 = 220 --> (220:255) x 100% = 86%Yellow: 255-28 = 226 --> (227:255) x 100% = 89 %--> man zieht den jeweiligen Komplementärwert von 255 ab--> das Ergebnis teilt man durch 255 und rechnet es in % um

Umrechnungen von Farbmodellen

CMYK in RGBCyan --> RotMagenta --> GrünYellow --> BlauBeispiel:CMY (80/0/0) --> RGB in % wäre (20/100/100)Es sind immer die umgedrehten Werte!Dann den RGB %-Wert in den Zahlenwert (0-255) umrechnen:20 % von 256 = 51100 % von 256 = 255--> RGB (51/255/255)Wenn bei CMYK noch ein Schwarz-Prozentwert hinzukommt, wird der bei allen RGB-%-Werten abgezogen

Beispiel: CMYK (80/0/0/10)--> RGB in % (20/100/100) minus jeweils 10%--> RGB in % (10/90/90)--> RGB (26/230/230)

RGB in HEXhexadezimales Zahlensystem:dezimal: 0 1 2 3 4 5 6 7 8 9 10 11 12 13 14 15hexadezimal: 0 1 2 3 4 5 6 7 8 9 A B C D E FUmrechnung von dezimal in hexadezimal:Beispiel: die Zahl 4.9594.959 : 16 = 309 Rest 15 --> F hex309 : 16 = 19 Rest 5 --> 5 hex Die Zahl wird von unten nach oben gelesen --> 135F hex19 : 16 = 1 Rest 3 --> 3 hex1 : 16 = 0 Rest 1 --> 1 hex• bei RGB wird die hex-Zahl in 3x2er Gruppen gegliedert--> #RRGGBB

Beispiel:(136/25/255) --> #RRGGBBRot: 136 : 16 = 8 Rest 8 --> 8 hex8 : 16 = 0 Rest 8 --> 8 hexGrün: 25 : 16 = 1 Rest 9 --> 9 hex1 : 16 = 0 Rest 1 --> 1 hexBlau: 255 : 16 = 15 Rest 15 --> F hex15 : 16 = 0 Rest 15 --> F hex --> #8819FF hex

Umrechnungen von Farbmodellen

HEX in RGB Basis stellt die Zahl 16 dar es wird von hinten angefangen, aufzulösen letzte und vorletzte für BLAU, die beiden mittleren für GRÜN, die beiden ersten für ROT von rechts wird jeweils mit dem Exponenten 0 begonnen

Umrechnungen von Farbmodellen

Beispiel: #321B93 Blau: 3x16° + 9x16¹ = 3 + 144 = 147Grün: 11x16° + 1x16¹ = 11 + 16 = 27Rot: 2 x 16° + 3x16¹ = 2 + 48 = 50RGB: 50 / 27 / 147Beispiel: #8819FFBlau: 15x16° + 15x16¹ = 15 + 240 = 255Grün: 9 x 16° + 1 x 16¹ = 9 + 16 = 25Rot: 8 x 16° + 8 x 16¹ = 8 + 128 = 136RGB: 136 / 25 / 255