Wie der Farbpaletten-Generator auf farbpalette-generieren.de arbeitet

Die sechs Farbschemata im HSL-Farbkreis

Der HSL-Farbkreis (Hue 0 bis 360°, Saturation 0 bis 100 Prozent, Lightness 0 bis 100 Prozent) ist die klassische Repräsentation von Farb-Beziehungen. Die sechs unterstützten Schemata folgen den Regeln aus Johannes Ittens "Kunst der Farbe" (Bauhaus-Verlag 1961) und der modernen Designpraxis:

• Komplementär: Basis + Farbe bei +180° (zwei Gegensätze, maximaler Kontrast)
• Triade: Basis + zwei Farben bei +120° und +240° (drei gleichmäßig verteilte Töne)
• Analog: Basis + Farben bei +30° und -30° (zwei benachbarte Töne, weiche Harmonie)
• Monochrom: gleicher Hue, variierende Lightness und Saturation (Schattierungen)
• Split-Komplementär: Basis + Farben bei +150° und +210° (gemildertes Komplementär)
• Tetradisch: vier Farben im Rechteck bei +60°, +180°, +240° (vier Töne in Balance)

Konvertierung Hex ↔ RGB ↔ HSL

Die Engine konvertiert verlustfrei zwischen den drei gängigen Formaten nach W3C CSS Color Module Level 4. Hex (#3B82F6) ist eine Sechs-Stellen- Hexadezimalnotation für die drei sRGB-Kanäle. RGB (59, 130, 246) ist die direkte ganzzahlige Darstellung im sRGB-Raum (IEC 61966-2-1). HSL (217°, 91 Prozent, 60 Prozent) ist eine perzeptuelle Umrechnung auf Farbton, Sättigung und Helligkeit über die Formeln der CSS-Spezifikation (Max/Min-Kanal-Methode mit Lightness = (Max + Min) / 2).

K-Means-Clustering für die Bild-Extraktion

Beim Upload eines Bildes (JPG, PNG, WebP, max. 5 MB) wandelt die Engine das Bild zunächst auf 200 mal 200 Pixel (höchstens) herunter, samplet die RGB-Werte aller Pixel und gruppiert sie mit dem klassischen Lloyd-Algorithmus (K-Means, k=5 bis k=10 wählbar). Die k Cluster-Zentroide sind die k dominantesten Farben des Bildes. Die Berechnung läuft komplett im Browser über die Canvas-2D-API. Es werden keine Bilder an einen Server übertragen, gespeichert oder weiterverarbeitet.

CIE-Farbräume und der Sprung zu OKLCH

sRGB (IEC 61966-2-1, 1996) ist der Standard-Web-Farbraum mit dem für seine Zeit klassischen Gamut. Display-P3 (Apple/SMPTE RP 431-2, seit iPhone 7) erweitert den Gamut um etwa 25 Prozent in Richtung gesättigter Rot- und Grüntöne. Der neuere OKLCH-Raum (Björn Ottosson, 2020, im W3C-Standard CSS Color Module Level 4) ist wahrnehmungslinear: gleiche Schritte in Lightness oder Chroma werden vom menschlichen Auge als gleich groß empfunden. Das macht OKLCH ideal für barrierefreie und sehbehinderten-freundliche Paletten. Die aktuelle Generator-Version arbeitet primär im HSL-Raum (für Rückwärts-Kompatibilität); eine OKLCH-Erweiterung ist auf der Roadmap.

Validierungs-Regeln

Das Tool prüft bei jeder Eingabe folgende Regeln und gibt bei Verstoß eine konkrete Fehlermeldung aus:

• Hex-Eingabe: nur # + 3 oder 6 Hex-Ziffern (0-9, A-F, case-insensitive)
• RGB-Eingabe: drei Ganzzahlen im Bereich 0 bis 255
• HSL-Eingabe: Hue 0 bis 360, Saturation und Lightness 0 bis 100
• Bild-Upload: MIME-Type image/jpeg, image/png oder image/webp; max. 5 MB; Magic-Bytes-Check
• k-Wert für K-Means: ganzzahlig 5 bis 10

WCAG-Kontrast und das BFSG

Das Web Content Accessibility Guidelines 2.2 Success Criterion 1.4.3 fordert in Konformitätsstufe AA ein Kontrastverhältnis von mindestens 4,5:1 zwischen Textfarbe und Hintergrund (3:1 für große Schrift ab 18pt bzw. 14pt fett). AAA verlangt 7:1. Seit dem 28.06.2025 macht das deutsche Barrierefreiheitsstärkungsgesetz (BFSG, BGBl. 2021 I S. 2970) die Umsetzung der EU-Richtlinie 2019/882 (European Accessibility Act) verbindlich, was für viele B2C-Websites und mobile Apps eine WCAG-AA-Konformität einschließt. Das Tool liefert keine eingebaute Kontrast-Prüfung; nutze dafür Tools wie den WebAIM Contrast Checker oder Browser-Devtools.

Markenrecht für Farben in Deutschland

Abstrakte Farbmarken sind in Deutschland nach § 3 Abs. 1 MarkenG grundsätzlich schutzfähig, brauchen aber außergewöhnliche Verkehrsdurchsetzung (BGH-Leitentscheidungen: Magenta für Deutsche Telekom, BGH I ZB 21/03; Lila für Milka, BGH I ZR 100/02; Gelb für Langenscheidt, BGH I ZB 65/13). Wer eine Marke aufbaut, sollte vor dem Launch eine DPMA-Recherche durchführen, insbesondere bei sehr gesättigten oder ungewöhnlichen Farbtönen in regulierten Branchen (Telekommunikation, Versandhandel, Lebensmittel).

Quellen und Referenzwerke

• W3C CSS Color Module Level 4: Spezifikation für Hex/RGB/HSL und OKLCH
• IEC 61966-2-1: sRGB Default RGB Colour Space (1996)
• ISO 11664: Colorimetry (CIE-Farbräume, Mehrteilenorm)
• Johannes Itten: Kunst der Farbe (Bauhaus-Verlag 1961): Sieben Farbkontraste
• Johann Wolfgang von Goethe: Zur Farbenlehre (1810): Wahrnehmungsphysiologischer Ansatz
• Isaac Newton: Opticks (1704): Erstes Farbspektrum aus Prismen-Experiment 1666
• Albert Henry Munsell: A Color Notation (1905): Hue/Value/Chroma 3D-System
• WCAG 2.2: Web Content Accessibility Guidelines, W3C-Empfehlung Oktober 2023
• BFSG: Barrierefreiheitsstärkungsgesetz, BGBl. 2021 I S. 2970, in Kraft seit 28.06.2025
• MarkenG § 3: Markengesetz, BGH-Leitentscheidungen Magenta/Lila/Gelb

Review-Zyklus

Wir prüfen halbjährlich die folgenden Punkte:

• Aktualität der W3C-CSS-Color-Spezifikation (laufende Fortschreibung)
• Änderungen an den WCAG-Empfehlungen und an der BFSG-Auslegung
• Neue BGH- oder EuGH-Entscheidungen zu Farbmarken
• Reproduzierbarkeit aller Beispielpaletten über die Generator-Engine

Korrektur-Policy

Wir machen Fehler. Wenn dir eine fehlerhafte Berechnung, eine veraltete Quelle oder eine inhaltliche Unstimmigkeit auffällt, schreib an info@akara-solutions.de. Bestätigte Korrekturen dokumentieren wir öffentlich auf Korrekturen.

Was wir nicht machen

farbpalette-generieren.de ersetzt keine WCAG-Konformitäts-Prüfung, keine Markenrechts-Recherche und keine kalibrierte Farbprofilierung für den Druck. Für Print-Produktionen sind CMYK-Konvertierung und ICC-Profil-Management zusätzlich nötig; für rechtssichere Marken-Anmeldung wende dich an eine Patent- und Markenrechts-Kanzlei.

Verantwortung

Für die hier beschriebene Methodik und ihre redaktionelle Pflege sind Mateusz Viola (Generator-Engine + K-Means-Bild-Extraktion), Jan-Tristan Rudat (Farbtheorie-Geschichte + CIE-Farbräume + Wahrnehmungsphysiologie) und Eike-Christian Ramcke (WCAG/BFSG + Markenrecht) zuständig. Inhaltlich Verantwortlicher gem. § 18 Abs. 2 MStV ist Eike-Christian Ramcke, Geschäftsführer der AKARA Solutions GmbH (vollständige Angaben im Impressum).