CSS & JAVASCRIPT FARBGUIDE

HEX in RGB und RGBA mit Deckkraft in CSS & JavaScript umwandeln

Farbmodelle präzise konvertieren: Mathematische Grundlagen, performante JavaScript-Funktionen für 3-, 6- und 8-stellige Hex-Codes und modernes CSS color-mix().

Moderne Webentwicklung und UI-Designsysteme erfordern regelmäßig die Umrechnung statischer Hexadezimal-Farbcodes (wie #3b82f6) in RGB- oder RGBA-Werte, um Transparenzen dynamisch anzupassen (rgba(59, 130, 246, 0.5)), barrierefreie WCAG-Kontraste zu berechnen oder CSS Custom Properties zu steuern. Dieser Leitfaden bietet mathematische Formeln, native JavaScript-Hilfsfunktionen, die Handhabung 8-stelliger HEX-Alphakanäle und moderne CSS-Farbfunktionen.

Interaktives Lösungs-Werkzeug

100% Client-Side • Keine Telemetrie Vollständiges Tool öffnen →

Geben Sie unten einen HEX-Farbcode ein, um RGB, RGBA mit individueller Deckkraft, HSL und CSS-Variablen direkt im Browser zu berechnen:

100% clientseitige Farbraum-Transformation • W3C CSS Color 4 konform • Keine Netzwerkanfragen
CSS- & Design-Werkzeuge
Beliebte Design-Voreinstellungen
gegen Weiß (#FFFFFF)
3.68:1
AA Large Only
gegen Schwarz (#000000)
5.71:1
AA Pass

Konvertierte Farbformate

HEX (6-digit)
#3B82F6
HEX8 (Alpha)
#3B82F6FF
RGB
rgb(59, 130, 246)
RGBA
rgba(59, 130, 246, 1)
HSL
hsl(217, 91%, 60%)
HSLA
hsla(217, 91%, 60%, 1)
HSV / HSB
hsv(217, 76%, 96%)
CMYK (Print)
cmyk(76%, 47%, 0%, 4%)
CSS OKLCH
oklch(62% 0.19 255)

Nuancen- & Schattierungsskala (Tailwind 50 - 950)

Click any swatch to copy

Farbharmonien

CSS- und Code-Snippets exportieren

:root {
  --color-primary: #3B82F6;
  --color-primary-rgb: 59, 130, 246;
  --color-primary-hsl: 217deg 91% 60%;
}

1. Mathematische Grundlagen: Von HEX zu RGB

Hexadezimalwerte kodieren die Rot-, Grün- und Blau-Kanäle im 16er-System (0 bis F). Jedes zweistellige Hex-Paar entspricht einer 8-Bit-Ganzzahl von 0 bis 255 (16² - 1 = 255). Um ein Paar wie `3B` umzurechnen: `R = (3 × 16¹) + (11 × 16⁰) = 48 + 11 = 59`. Für den gesamten Hex-Code `#3B82F6` ergibt sich exakt `rgb(59, 130, 246)`.
javascript Code-Beispiel
// Manuelle Zerlegung in JavaScript:
const hex = "3B82F6";
const r = parseInt(hex.slice(0, 2), 16); // 59
const g = parseInt(hex.slice(2, 4), 16); // 130
const b = parseInt(hex.slice(4, 6), 16); // 246
console.log(`rgb(${r}, ${g}, ${b})`);

Zerlegung mit parseInt zur Basis 16.

2. Native JavaScript-Hilfsfunktion für 3-, 6- und 8-stellige Hex-Codes

Robuste Webanwendungen müssen dreistellige Kurzschreibweisen (`#fff`), standardmäßige 6-stellige Codes (`#3b82f6`) und 8-stellige Codes mit Transparenz (`#3b82f680`) unterstützen. Bei Kurzcodes wird jedes Zeichen verdoppelt (`#abc` zu `#aabbcc`).
javascript Code-Beispiel
function hexToRgba(hex, overrideAlpha) {
  let clean = hex.replace(/^#/, "").trim();
  if (clean.length === 3) {
    clean = clean.split("").map(c => c + c).join("");
  }
  if (clean.length === 6) {
    const num = parseInt(clean, 16);
    const r = (num >> 16) & 255;
    const g = (num >> 8) & 255;
    const b = num & 255;
    const a = overrideAlpha !== undefined ? overrideAlpha : 1;
    return `rgba(${r}, ${g}, ${b}, ${a})`;
  }
  if (clean.length === 8) {
    const num = parseInt(clean, 16);
    const r = (num >> 24) & 255;
    const g = (num >> 16) & 255;
    const b = (num >> 8) & 255;
    const a = overrideAlpha !== undefined ? overrideAlpha : +(num & 255) / 255;
    return `rgba(${r}, ${g}, ${b}, ${Number(a.toFixed(2))})`;
  }
  throw new Error("Ungültiges HEX-Format");
}

Optimierte bitweise Umwandlung für alle gängigen Hex-Formate.

3. 8-stellige Farbcodes (#RRGGBBAA) und Alpha-Transparenz

Im CSS Color Module Level 4 wurden 8-stellige Hexadezimal-Codes standardisiert. Die letzten beiden Ziffern steuern die Deckkraft von 00 (0% transparent) bis FF (100% deckend). Wichtige Alpha-Hex-Werte: - `100%` = `FF` (255) - `80%` = `CC` (204) - `50%` = `80` (128) - `25%` = `40` (64) - `10%` = `1A` (26) - `0%` = `00` (0)

4. Moderne CSS-Syntax & color-mix() ohne JavaScript

Modernes CSS erlaubt die kommalose Schreibweise mit Schrägstrich für Deckkraft (`rgb(59 130 246 / 50%)`). Darüber hinaus ermöglicht die native Funktion `color-mix()` das Hinzufügen von Transparenz zu Hex-Variablen ganz ohne JavaScript.
css Code-Beispiel
:root {
  --primary-color: #3b82f6;
}

.box {
  /* Moderne CSS Color 4 Syntax */
  background: rgb(59 130 246 / 0.5);

  /* Native Deckkraft via CSS ohne JS */
  border-color: color-mix(in srgb, var(--primary-color) 50%, transparent);
}

Einsatz von color-mix() in CSS für dynamische Transparenz.

5. Umrechnung von RGB in HSL (Farbton, Sättigung, Helligkeit)

Während RGB die Hardware-Lichtintensität beschreibt, bildet HSL die menschliche Farbwahrnehmung ab. Die Erstellung von Interface-Zuständen (Hover, Active, Dark Mode) ist in HSL durch einfaches Anpassen der Helligkeit (L) besonders intuitiv.

6. Barrierefreie Kontrastverhältnisse nach WCAG 2.1

Zur Einhaltung von Accessibility-Standards werden RGB-Werte in relative Leuchtdichte (Luminanz) umgerechnet. Die WCAG 2.1 verlangt für normalen Text ein Mindest-Kontrastverhältnis von 4,5:1 und für großen Text 3:1.

01. Zero-Telemetry-Architektur & Unabhängige DevTools-Verifizierung

DevOmniTools verarbeitet sämtliche Daten ausschließlich im flüchtigen Arbeitsspeicher Ihres Browsers. Im Gegensatz zu herkömmlichen Online-Diensten, die Token, Passwörter und Datenbankabfragen an externe Cloud-Server übertragen, arbeiten unsere Werkzeuge vollständig clientseitig über WebAssembly, JavaScript und die W3C Web Crypto API.

Sie können diese Schutzgarantie jederzeit direkt überprüfen: Öffnen Sie die Entwicklertools (F12), wählen Sie die Registerkarte 'Netzwerk' und führen Sie eine Konvertierung durch. Es werden keinerlei ausgehende Anfragen mit Ihren Eingabedaten erzeugt.

Beim Schließen des Tabs oder Klick auf 'Löschen' werden sämtliche Speicherbereiche durch die browserinterne Garbage Collection rückstandslos freigegeben.

  • Kein Cloud-Upload: Vertrauliche Nutzdaten berühren zu keinem Zeitpunkt externe Serverinfrastrukturen.
  • Air-Gapped & PWA-fähig: Vollständige Offline-Nutzung in isolierten Unternehmensnetzen und Flugzeugen über Service Worker.
  • Echte CSPRNG-Zufallszahlen: Kryptografische Schlüssel und Token basieren auf window.crypto.getRandomValues().

02. RFC-Standards & Verlustfreie Numerische Präzision

Integrität und Standardsicherheit sind für Produktivsysteme unverzichtbar. Unsere Werkzeuge werden kontinuierlich gegen internationale IETF- und W3C-Vorgaben validiert.

Bei der Verarbeitung großer 64-Bit-Ganzzahlen in JSON-Dateien (z. B. Snowflake-IDs oder Transaktionsnummern) rundet die standardmäßige JavaScript-Methode JSON.parse() Werte jenseits von 9.007.199.254.740.991 fehlerhaft ab. Unsere Parser implementieren verlustfreie Tokenisierung für unbegrenzte BigInt-Genauigkeit.

CSV-Transformationen folgen exakt dem RFC 4180-Standard, inklusive Schutz führender Nullen, mehrzeiliger Textfelder und flexibler Trennzeichen.

  • RFC 8259: Präzise JSON-Syntaxprüfung und Erkennung von Steuerzeichenfehlern.
  • RFC 7519 & RFC 7515: Standardkonforme JWT- und JWS-Dekodierung mit Laufzeitprüfung.
  • RFC 5280: Strukturierte Analyse von X.509 ASN.1 DER- und PEM-Zertifikaten mit SAN-Prüfung.

03. Grenzfälle, Syntaxdiagnose & ReDoS-Absicherung

Entwicklerdaten enthalten häufig unsichtbare Byte Order Marks (BOM) oder inkorrekte Steuerzeichen. Unsere Validierungs-Engines melden exakte Fehlerstellen mit Zeilen- und Spaltenangaben.

Die Regex-Prüfung läuft in isolierten Web Workern mit strikten Timeouts, um das Einfrieren des Browser-Tabs durch Catastrophic Backtracking (ReDoS) zuverlässig abzuwehren.

Die Zwischenablage-Kopierfunktion verwendet die moderne navigator.clipboard-API für schnelle Übernahme in Deployment-Skripte und CI/CD-Pipelines.

  • BOM-Entfernung: Automatische Bereinigung unsichtbarer \uFEFF-Zeichen vor der Syntaxanalyse.
  • ReDoS-Schutz: Thread-Isolation schützt die Benutzeroberfläche vor CPU-Überlastung bei komplexen Mustern.
  • Saubere Ausgabe: Einheitliche Unix-Zeilenumbrüche (\n) und fehlerfreie Typenvalidierung.

04. Hardwarebeschleunigte Nebenläufigkeit & Schutz vor Seitenkanalangriffen

Zuverlässige Ausführungszeiten sind für moderne Softwareentwickler essenziell. DevOmniTools setzt auf dedizierte Web Worker und Transferable Objects (ArrayBuffer), um rechenintensive Parsings und Transformationen vollständig vom Haupt-Rendering-Thread zu entkoppeln.

Kryptografische Funktionen (AES-GCM, HMAC, SHA) nutzen die SubtleCrypto-Schnittstelle des Browsers mit direkter Hardware-Beschleunigung (Intel AES-NI, ARM Cryptography). Sämtliche Schlüsselvergleiche laufen in konstanter Zeit ab, was timing-basierte Seitenkanalangriffe auf modernen Mehrkernprozessoren wirksam verhindert.

Klare Speicherobergrenzen schützen das System vor Speicherüberläufen und bewahren die Stabilität der Entwickler-Workstation selbst bei umfangreichen Datensätzen.

  • Konstante Ausführungszeit: Hardwarenahe SubtleCrypto-Berechnung schützt vor Timing-Seitenkanal-Lecks.
  • Transferable Buffers: Null-Kopier-Speicherübergabe zwischen Threads minimiert Latenzen und CPU-Last.
  • Strikte Speichergrenzen: Zuverlässiger Absturzschutz für reibungslose Arbeitsabläufe.

05. Datenschutz und Offline-Verfügbarkeit

Die Kernwerkzeuge verarbeiten Eingaben lokal. Optionale KI sendet den ausgewählten Ausschnitt nach Zustimmung über Cloudflare an Cloudflare AI oder den optionalen Google-Gemini-Ersatzanbieter; die Aufbewahrungsregeln des Anbieters gelten. Kontaktanfragen senden Ihre Angaben an unseren E-Mail-Anbieter. Offline-Nutzung setzt vollständig zwischengespeicherte Seiten und Ressourcen voraus; externe KI und Nachrichtenversand benötigen Internet.

Häufig Gestellte Fragen

Wie wandle ich einen 3-stelligen Hex-Code wie #f00 in RGB um? ▼

Verdoppeln Sie jedes Zeichen zu einem 6-stelligen Code (#ff0000). Das Paar ff steht für Rot (255), 00 für Grün (0) und 00 für Blau (0), also rgb(255, 0, 0).

Was bedeuten 8-stellige Hex-Farbcodes? ▼

Die ersten sechs Zeichen definieren die RGB-Kanäle und die letzten beiden Zeichen den Alphakanal von 00 (0% transparent) bis FF (100% deckend).

Wie lautet die moderne CSS-Syntax für RGB mit Transparenz? ▼

In modernem CSS können Sie rgb(59 130 246 / 50%) oder rgb(59 130 246 / 0.5) anstelle der alten rgba()-Schreibweise mit Kommas verwenden.

Kann ich HEX-Farben in reinem CSS transparent machen? ▼

Ja, mit der CSS-Funktion color-mix(): background: color-mix(in srgb, var(--my-color) 50%, transparent); ganz ohne JavaScript-Vorverarbeitung.

Warum bevorzugen UI-Designer HSL gegenüber RGB? ▼

Weil HSL der menschlichen Wahrnehmung entspricht. Man kann Nuancen und Schattierungen erzeugen, indem man lediglich die Helligkeit (L) variiert.

Client-Side Datenschutz & Architekturgarantien

Kein Datenabfluss durch Design — jede Berechnung erfolgt ausschließlich im lokalen Browserspeicher.

🛡️

100% Client-Side Verarbeitung

Alle Berechnungen laufen direkt im Browser über JavaScript und WebAssembly. Ihre vertraulichen Daten verlassen niemals Ihr Gerät.

📐

Standardisierte Technische Genauigkeit

Entwickelt nach strikten IETF RFC- und IEEE-Vorgaben. Alle Ergebnisse werden anhand offizieller Testvektoren auf Exaktheit geprüft.

⚡

Offline- & Intranet-Fähig

Funktioniert dank PWA-Caching zuverlässig ohne Internetverbindung. Sicher für isolierte Unternehmensnetze und sensible Zonen.

🔒

Kein Tracking & Werbe-Telemetrie

Vollständig frei von Werbetrackern, Tracking-Cookies und Analysediensten. Überprüfen Sie den Netzwerkverkehr jederzeit selbst.

Optimieren Sie Ihren Workflow mit komplementären, 100% privaten Browser-Werkzeugen.