| Muster | HEX | RGB | HSL | % |
|---|
Markenfarben-Extraktion fur DACH-Unternehmen
Design-Agenturen im deutschsprachigen Raum setzen die Farbpaletten-Extraktion ein, um aus einem vorhandenen Logo oder Bildmaterial die exakten HEX-Werte zu ermitteln. Das Corporate Design der deutschen Bundesregierung schreibt beispielsweise BundesBlau (#003399) und BundesRot (#CC0000) vor , ein schneller Abgleich mit extrahierten Paletten hilft, die Konformitat zu prufen. Auch fur Rebranding-Projekte in Österreich und der Schweiz liefert dieses Tool einen verlasslichen Ausgangspunkt, ohne Quelldateien in Photoshop oder Illustrator zu benotigen.
Die BITV 2.0 (Barrierefreie-Informationstechnik-Verordnung) schreibt fur offentliche Stellen in Deutschland ein Kontrastverhaltnis von mindestens 4,5:1 vor. Nach der Extraktion jede Farbkombination im Kontrast-Checker prufen, bevor sie in das CSS ubernommen wird.
Extrahierte Palettendaten
| Farbtyp | Typische Verwendung | Ausgabeformat |
|---|---|---|
| Dominant | Primarfarbe der Marke | HEX, RGB, HSL |
| Sekundar | Akzent, Aktions-Buttons | HEX, RGB, HSL |
| Neutral | Hintergrunde, Texte | HEX, RGB, HSL |
| Prozentsatz | Visuelle Gewichtung im Quellbild | % |
Grenzen der algorithmischen Extraktion
Der Algorithmus gruppiert Pixel in Farbcluster. Feine Details wie dunne Rahmen oder kleine Icons erscheinen moglicherweise nicht in der Palette. Verlaufe werden uber alle Pixel gemittelt, sodass ein Zwischenwert statt der exakten Start- oder Endfarbe ausgegeben wird. Fur den professionellen Druck ist eine separate HEX-zu-CMYK-Konvertierung notwendig, da Bildschirm- und Druckfarbraum unterschiedliche Wertebereiche haben.
Workflow: vom Bild zum Design-System
Palette aus dem Quellbild extrahieren, dann die HEX-Codes in den Farbpaletten-Generator ubertragen, um eine vollstandige Abstufungsskala (50-900, wie bei Tailwind CSS oder Material Design) zu erstellen. Die generierten CSS Custom Properties direkt in den :root-Block des Stylesheets kopieren.