Farbpaletten-Generator & Harmonien

Harmonische Farbschemata und Paletten direkt berechnen. Komplementäre, analoge, triadische und Split-Paletten mit WCAG-Kontrastprüfung in Echtzeit und CSS-Export erstellen.

Vorlagen

Ankerfarben-Steuerung

Basisfarbe#0F172A

Harmoniemodus

Farbraum

Farbton-Tendenz

Palettenstufen

WCAG-Strengegrad

Sättigungsmodifikator0%

Farbtemperatur-Verschiebung0°

Helligkeitskurve

Berechnungs-Engine bereit

Delta-E (ΔE) 0%Farbfelder 5

Primäre Ankerfarbe

#0F172A

RGB15, 23, 42

HSL222°, 47%, 11%

OKLCH0.208, 0.04, 266°

Relative Leuchtdichte0.0088

Akkordfarbe 1

#C0B8DB

RGB192, 184, 219

HSL254°, 33%, 79%

OKLCH0.8, 0.05, 296°

Relative Leuchtdichte0.506

Akkordfarbe 2

#D8B69F

RGB216, 182, 159

HSL24°, 42%, 74%

OKLCH0.8, 0.051, 56°

Relative Leuchtdichte0.5056

Akkordfarbe 3

#BCC29E

RGB188, 194, 158

HSL70°, 23%, 69%

OKLCH0.8, 0.049, 115°

Relative Leuchtdichte0.5174

Akkordfarbe 4

#A0C3DA

RGB160, 195, 218

HSL204°, 44%, 74%

OKLCH0.799, 0.05, 237°

Relative Leuchtdichte0.5157

Mittlerer WCAG-Wert4.43:1|Bewertung106

5 FarbfelderOKLCH

Aktive FarbregelSPLIT-COMPLEMENTARY

Durchschnittlicher Kontrast4.43:1

FarbmodellOKLCH (266°)

Sicherheitsstatus0 B (Kein Server-Upload)

Technische Referenz & Architektur-Leitfaden

Farbpaletten-Generator & Harmonien — Referenzhandbuch

Erstellen Sie harmonische Farbschemata in Echtzeit. Generieren Sie komplementäre, analoge, triadische und Split-Paletten mit sofortiger WCAG-Kontrastprüfung und direktem CSS-Export.

Wichtige Parameter & Einstellungen

Basis-Farbtonwinkel (θ)CIE-Farbkreiswinkel [0° – 360°]

Winkelposition auf dem kontinuierlichen 360-Grad-Farbkreis nach CIE/Munsell zur Bestimmung der primären Spektralwellenlänge (0° Rot, 60° Gelb, 120° Grün, 180° Cyan, 240° Blau, 300° Magenta). Wird in O(1)-trigonometrischer Laufzeit als Ursprungskoordinate für harmonische Rotationen innerhalb der isolierten V8-Browser-Laufzeitumgebung berechnet.

Standard: 240° (Königsblau)

Geometrischer Winkelversatz (Δθ)Trigonometrisches Sehnenintervall

Geometrischer Winkelversatz zur Definition klassischer Harmonietopologien: Komplementär (180°), Triadisch (120° / 240°), Analog (±30° / ±60°), Split-Komplementär (150° / 210°) und Tetradisch (60° / 180° / 240°). Berechnet modulo 360° durch reine mathematische Rotation ohne externe Abhängigkeiten.

Standard: 180° (Komplementär)

Wahrnehmungsbezogene Helligkeit (L*)CIE L* / OKLCH L [0,00 – 1,00]

Wahrnehmungsgleichförmige Helligkeitsskala von 0,0 (absolutes Absorptionsschwarz) bis 1,0 (rein diffuses Weiß). Verhindert die für HSL typischen Helligkeitsverzerrungen zwischen Gelb und Blau und stellt sicher, dass Farben mit identischem L-Wert über alle Farbtöne hinweg die gleiche empfundene Helligkeit aufweisen.

Standard: 0,55

Buntton / Farbsättigung (C*)OKLCH-Chroma [0,00 – 0,37] / Reinheitsmetrik

Radialer Abstand von der unbunten Neutralgrau-Achse zum Spektralfarbenzug. Hohe Buntheit (>0,20 in OKLCH, >80 % in sRGB) verursacht visuelle Ermüdung und Chromostereopsis; barrierefreie UI-Oberflächen erfordern reduzierte Buntheit (<0,08), während interaktive Bedienelemente 0,12–0,18 anvisieren.

Standard: 75 % (0,18 OKLCH)

Relative WCAG-Leuchtdichte (Y)Linearisiertes photometrisches Verhältnis [0,00 – 1,00]

Linearisierte photometrische Helligkeit nach W3C WCAG 2.1 §1.4.3 sowie DIN EN ISO 9241-300, berechnet als Y = 0,2126R_lin + 0,7152G_lin + 0,0722B_lin. Bestimmt das Kontrastverhältnis (L1 + 0,05) / (L2 + 0,05) mit verbindlichen Vorgaben von ≥4,5:1 für Standardtext (AA) und ≥7,0:1 für erhöhten Kontrast (AAA).

Standard: 0,21

Farbraum-Transformations-EngineIEC 61966-2-1 sRGB ↔ OKLCH / Display-P3

Clientseitige Matrixtransformations-Pipeline mit 3x3-Matrixfaltungen: Gamma-Expansion [0, 255] ➔ lineares sRGB ➔ CIE XYZ (Standardlichtart D65) ➔ LMS-Zapfenraum ➔ OKLCH-Polarkoordinaten. Ausführung in deterministischer O(1)-Zeitkomplexität innerhalb der isolierten Browser-Sandbox ohne Server-Telemetrie.

Standard: OKLCH (W3C Color 4)

Profi-Tipps & Best Practices

Helmholtz-Kohlrausch-Wahrnehmungsverzerrung eliminieren

Klassische HSL-Mathematik behandelt 100 % gesättigtes Gelb (L=50 %) und 100 % gesättigtes Blau (L=50 %) als gleich hell, obwohl das menschliche Auge im photopischen Bereich Gelb als dramatisch heller wahrnimmt. Wechseln Sie bei der Abstimmung von Textlesbarkeit auf Hintergrundflächen stets in den wahrnehmungsbasierten OKLCH-Farbraum: Identische L-Werte in OKLCH garantieren über alle 360 Grad des Farbkreises eine gleichbleibend empfundene Helligkeit.

Chromatische Flimmereffekte durch neutrale Stege verhindern

Werden hochgesättigte Komplementärfarben (z. B. reines Rot #FF0000 und reines Cyan #00FFFF) direkt aneinandergesetzt, entstehen durch physiologische Lateralinhibition und Akkommodationskonflikte störendes Kantenflimmern und Augenermüdung. Fügen Sie zwischen gesättigte Komplementärpaare stets einen neutralen Steg ein (eine Abtönung mit Chroma < 0,02 oder eine dunkle Fläche mit L < 0,20 bei einem Leuchtdichteabstand von ΔY ≥ 0,30).

60-30-10-Aufteilungsregel im UI-Design durchsetzen

Verteilen Sie harmonische Palettenfarben niemals zu gleichen Teilen auf der Benutzeroberfläche. Weisen Sie 60 % der sichtbaren Fläche der dominanten Neutral- oder Hintergrundfarbe zu, 30 % dem sekundären strukturellen Markenton und reservieren Sie die verbleibenden 10 % strikt für komplementäre Akzent- und Interaktionsfarben (Buttons, Badges, aktive Fokus-Zustände).

Kollisionen bei Farbenfehlsichtigkeit (CVD) absichern

Rund 8 % der Männer und 0,5 % der Frauen im DACH-Raum sind von Deuteranopie oder Protanopie betroffen. Komplementäre Rot-Grün-Paletten kollabieren bei dichromatischem Sehen in ununterscheidbare bräunlich-gelbe Töne. Gewährleisten Sie zwischen kritischen Statusanzeigen stets eine Leuchtdichtedifferenz von mindestens 3,0:1 statt reiner Farbtöne und stützen Sie Zustände gemäß WCAG 2.1 SC 1.4.1 und BITV 2.0 durch Typografie oder Icons ab.

Hardware-Entropie der Web Crypto API für Paletten-Exploration nutzen

Das standardmäßige Math.random() basiert auf deterministischen PRNG-Algorithmen, die für Modulo-Verzerrungen und Häufungen in bestimmten Farbsektoren anfällig sind. Schöpfen Sie für unverfälschte Paletten-Exploration kryptografische Hardware-Entropie über die Web Crypto API mit window.crypto.getRandomValues(new Uint32Array(1)) / 4294967296 * 360 ab – dies garantiert eine perfekte Gleichverteilung über das gesamte 360°-CIE-Spektrum.

Häufige Fehlerquellen & Fehlerbehebung

⚠️Generierte Komplementärpalette verfehlt den WCAG-AA-Kontrast auf weißem oder dunklem Hintergrund

Komplementäre Farbtöne erzeugen chromatische Spannung, garantieren jedoch keine Leuchtdichtekompatibilität. Passen Sie den Regler für wahrgenommene Helligkeit (L*) des Akzentfarbtons für weiße Hintergründe auf ≤0,35 an bzw. erhöhen Sie ihn für dunkle Anthrazit-Hintergründe auf ≥0,75, um das geforderte Mindestkontrastverhältnis von 4,5:1 zu erreichen.

⚠️Zwischenstufen von Verläufen und analogen Farben wirken schmutzig, stumpf oder grau

Lineare RGB-Interpolation schneidet geradlinig durch den ungesättigten Kern des Farbzylinders. Schalten Sie den Berechnungsraum des Generators von sRGB/HSL auf OKLCH um; dies führt die Farbmischung entlang konstanter wahrgenommener Buntheit und eliminiert graue Totzonen vollständig.

⚠️Farbverschiebungen oder Clipping beim CSS-Export für Wide-Gamut Display-P3 oder im CMYK-Druck

Hochgesättigte synthetische RGB-Werte (wie neonfarbenes Cyan oder Grün) liegen außerhalb des sRGB-Dreiecks bzw. des CMYK-Druckfarbraums. Aktivieren Sie den Farbraum-Clipping-Schutz, um Werte auf den sRGB-Standard [0, 255] zu begrenzen, oder nutzen Sie moderne Display-P3-Tokens mittels CSS color(display-p3 r g b).

⚠️Triadische und tetradische Paletten wirken in UI-Karten unruhig und visuell überladen

Identische Sättigung über 3 oder 4 unterschiedliche Farbtöne erzeugt konkurrierende visuelle Ankerpunkte. Belassen Sie lediglich einen dominanten Leitton bei hoher Sättigung (>70 %) und entsättigen Sie sekundäre sowie tertiäre Harmoniefarben gezielt auf 20–35 % Chroma, damit diese als harmonische Stütztöne fungieren.

Häufig gestellte Fragen (FAQ)

Wie werden komplementäre, triadische und analoge Farbharmonien mathematisch berechnet?▼

Farbharmonien werden berechnet, indem sRGB-Werte in Polarkoordinaten transformiert werden (Farbtonwinkel θ von 0° bis 360°, Sättigung, Helligkeit). Komplementärfarben addieren 180° (θ + 180° mod 360°). Triadische Harmonien rotieren in 120°-Schritten (θ + 120°, θ + 240°). Analoge Schemata berechnen benachbarte Farbtöne bei ±30° und ±60° (θ ± 30° mod 360°). Das Split-Komplementär-Schema kombiniert den Basisfarbton θ mit zwei dem exakten Gegenpol benachbarten Winkeln: θ + 150° und θ + 210°. Sämtliche Transformationen laufen in O(1)-Rechenzeit ab.

Welches Mindestkontrastverhältnis verlangt die WCAG für barrierefreie Button-Texte und Hintergründe?▼

Gemäß WCAG 2.1 Konformitätsstufe AA erfordern Standard-Fließtext und Button-Beschriftungen unter 18 pt (bzw. unter 14 pt fett) ein Mindestkontrastverhältnis von 4,5:1 gegenüber dem Hintergrund. Für großen Text (≥18 pt bzw. ≥14 pt fett) sowie essenzielle grafische UI-Komponenten (wie Button-Umrandungen, Formularfeldrahmen und aktive Reiter) gilt ein Mindestverhältnis von 3,0:1. Die strengere Stufe AAA hebt die Kontrastanforderungen für Standardtext auf 7,0:1 und für großen Text auf 4,5:1 an.

Worin liegt der Unterschied zwischen klassischer HSL-Farbmischung und wahrnehmungsgerechter OKLCH-Harmonie?▼

HSL (Farbton, Sättigung, Helligkeit) ist eine rein zylindrische Umrechnung von sRGB-Werten ohne Berücksichtigung der menschlichen Netzhautempfindlichkeit, weshalb Gelb (50 % Helligkeit) für das Auge weitaus heller strahlt als Blau (50 % Helligkeit). OKLCH basiert auf den Farbwahrnehmungsmodellen CIECAM02 und CAM16 (entwickelt von Björn Ottosson) und entkoppelt empfundene Helligkeit (L), Buntheit (C) und Bunttonwinkel (h) gleichförmig. Dadurch besitzen zwei Farben mit identischem L-Wert über alle 360 Grad des Farbkreises stets dieselbe wahrgenommene Leuchtkraft.

Warum flimmern Komplementärfarben oder wirken matschig, wenn sie direkt nebeneinander platziert werden?▼

Optisches Flimmern (Chromostereopsis) entsteht, wenn hochgesättigte Komplementärfarben mit identischer Leuchtdichte benachbarte Rezeptoren der Netzhaut gegensätzlich stimulieren, sodass die Trennkante im Auge oszilliert. Ein matschiger Eindruck bei Verläufen rührt von linearer RGB-Interpolation her, da Zwischenfarben zum dunklen, ungesättigten Zentrum des RGB-Farbwürfels hin abfallen. Abhilfe schaffen ein gezielter Helligkeitsabstand (ΔL ≥ 0,3) oder neutrale Trennlinien.

Werden bei der Palettenerstellung vertrauliche Marken-Hex-Codes an externe Server übertragen?▼

Nein. Sämtliche mathematischen Farbraumtransformationen (sRGB, CIE XYZ, OKLCH, Display-P3), WCAG-Kontrastberechnungen und Simulationen von Sehschwächen laufen zu 100 % clientseitig in der isolierten V8-JavaScript-Engine Ihres Browsers ab. Weder Hex-Codes, Farbwerte noch hochgeladene Marken-Assets verlassen Ihr lokales Endgerät. Dies garantiert vollständige Offline-Fähigkeit, null Server-Telemetrie und höchste Datensicherheit nach DSGVO- und Unternehmensstandards.