HEX zu RGB, HSL & OKLCH Farbraum-Konverter & CSS-Palettenarchitektur
Technischer Leitfaden zu digitalen Farbmodellen, mathematischen Transformationen zwischen sRGB, HSL, HSV, CMYK und OKLCH, WCAG 2.1 Barrierefreiheit und Tailwind-Skalen.
01. Mathematische Farbraum-Architektur: HEX, RGB, HSL & OKLCH
Digitale Bildschirme stellen Farben durch additive Farbmischung von Rot-, Grün- und Blau-Subpixeln (sRGB-Farbraum) dar. Jeder 8-Bit-Kanal reicht von 0 bis 255.
Die HEX-Schreibweise ist die hexadezimale Darstellung zur Basis 16 dieser Bytes. So entspricht #3B82F6 den Werten 59 Rot, 130 Grün und 246 Blau.
Das HSL-Modell ordnet Farben nach Farbton (Hue 0-360°), Sättigung (0-100%) und Helligkeit (0-100%), was das Erstellen harmonischer Farbthemen intuitiv macht.
DevOmniTools führt alle Umrechnungen 100% clientseitig im Browser gemäß W3C CSS Color Module 4 durch.
- Echtzeit-Synchronisierung zwischen HEX, RGB, RGBA, HSL, HSLA, HSV, CMYK und OKLCH.
- 11-stufige Nuancen- und Schattierungsskala kompatibel mit Tailwind CSS 50–950.
- Farbharmonien: Komplementär, Triadisch, Analog und Tetradisch.
- Integrierter WCAG 2.1 Kontrastrechner gegen Weiß und Schwarz mit AA/AAA-Prüfung.
02. Schritte zur Farbkonvertierung und CSS-Token-Generierung
1. Geben Sie einen beliebigen Farbcode ein oder wählen Sie eine Farbe über den visuellen Farbwähler.
2. Das Tool aktualisiert sofort alle 9 Farbformate mit 1-Klick-Kopierfunktion.
3. Nutzen Sie die Tailwind-Farbskala für konsistente UI-Zustände.
4. Prüfen Sie die WCAG-Kontrastwerte für barrierefreie Lesbarkeit.
5. Exportieren Sie die CSS-Root-Variablen direkt in Ihr Projekt.
Häufig gestellte Fragen (FAQ)
Wie wird ein 3-stelliger HEX-Code in einen 6-stelligen umgewandelt?
Jedes Zeichen wird verdoppelt: #ABC wird zu #AABBCC.
Was unterscheidet HSL von OKLCH?
OKLCH bietet wahrnehmungsbezogene Gleichförmigkeit: Die scheinbare Helligkeit bleibt über alle Farbtöne hinweg identisch.
Werden Farbeingaben an Server übertragen?
Nein, alle Transformationen laufen zu 100% privat im lokalen Arbeitsspeicher Ihres Browsers.