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 Example
// 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 Example
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 Example
: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.