Farbumrechner

So funktioniert der Farbumrechner

Der moderne Farbumrechner ermöglicht die sekundenschnelle Umwandlung digitaler Farbcodes zwischen allen gängigen Farbmodellen des Webdesigns und der Grafikgestaltung. Ob Sie als Webentwickler einen HEX-Code für CSS benötigen, als UI-Designer mit HSL-Werten arbeiten oder für Druckprojekte eine CMYK-Annäherung suchen: Der Farbumrechner liefert präzise Ergebnisse in Echtzeit und bietet eine direkte visuelle Farbvorschau. Jeder digitale Farbumrechner spart wertvolle Arbeitszeit bei der Gestaltung digitaler Benutzeroberflächen.

Die Bedienung im Farbumrechner ist denkbar einfach aufgebaut:

1. Farbcode eingeben — Tragen Sie den Ausgangswert in das Eingabefeld des Farbumrechners ein (z. B. ein HEX-Code wie #336699, rgb(51, 102, 153), hsl(210, 50%, 40%) oder cmyk(67%, 33%, 0%, 40%)).
2. Ergebnisse vergleichen — Der Farbumrechner parst die Eingabe und berechnet simultan alle Formate (HEX, RGB, RGBA, HSL, HSLA, HSV und CMYK).
3. Farbvorschau prüfen — Die interaktive Farbkachel im Farbumrechner zeigt die Farbe live an, sodass der Farbumrechner Farbnuancen sofort visuell beurteilbar macht.
4. Werte kopieren — Mit dem integrierten Kopier-Button im Farbumrechner übernehmen Sie das gewünschte Farbformat direkt in Ihren Code.

Farbmodelle und Farbräume im Vergleich

Im digitalen Design und in der Druckvorstufe kommen unterschiedliche Farbmodelle zum Einsatz. Der Farbumrechner schlägt eine Brücke zwischen diesen Systemen:

Additive vs. subtraktive Farbmischung im Farbumrechner

Digitale Bildschirme erzeugen Farben durch additives Mischen von rotem, grünem und blauem Licht (RGB). Wenn alle drei Lichtfarben mit maximaler Intensität strahlen ($255, 255, 255$), entsteht reines Weiß. Der Farbumrechner stellt diesen RGB-Farbraum präzise dar.

Im Gegensatz dazu basiert der Vierfarbdruck auf subtraktiver Farbmischung (CMYK). Druckfarben absorbieren Teile des Lichts. Je mehr Tinte aufgetragen wird, desto dunkler wird das Ergebnis. Der Farbumrechner berücksichtigt diese Eigenschaften bei der Konvertierung, damit der Farbumrechner verlässliche Richtwerte für Druckerzeugnisse liefert.

Mathematische Formeln zur Farbumrechnung

Der Farbumrechner nutzt standardisierte mathematische Umrechnungsformeln für Farbräume:

HEX ⇄ RGB (0-255) ⇄ HSL (0-360°, 0-100%, 0-100%) ⇄ CMYK (0-100%)

1. Umrechnung von HEX in RGB mit dem Farbumrechner

Ein sechsstelliger HEX-Code besteht aus drei Paaren hexadezimaler Ziffern ($R$, $G$, $B$). Der Farbumrechner berechnet:

$$\text{Rot} = (H_1 \times 16) + H_2$$ $$\text{Grün} = (H_3 \times 16) + H_4$$ $$\text{Blau} = (H_5 \times 16) + H_6$$

Beispiel: Für den Farbcode #336699 berechnet der Farbumrechner:

• Rot: $(3 \times 16) + 3 = 51$
• Grün: $(6 \times 16) + 6 = 102$
• Blau: $(9 \times 16) + 9 = 153$
• RGB-Ergebnis im Farbumrechner: rgb(51, 102, 153)

2. Umrechnung von RGB in HSL im Farbumrechner

Zunächst normiert der Farbumrechner die RGB-Werte auf das Intervall $[0, 1]$:

$$r = \frac{R}{255}, \quad g = \frac{G}{255}, \quad b = \frac{B}{255}$$

Anschließend bestimmt der Farbumrechner Minimum und Maximum:

$$c_{\max} = \max(r, g, b), \quad c_{\min} = \min(r, g, b), \quad \Delta = c_{\max} - c_{\min}$$

• Helligkeit (Lightness $L$): $$L = \frac{c_{\max} + c_{\min}}{2}$$

• Sättigung (Saturation $S$): $$S = \begin{cases} 0 & \text{wenn } \Delta = 0 \ \frac{\Delta}{1 - |2L - 1|} & \text{wenn } \Delta \neq 0 \end{cases}$$

• Farbton (Hue $H$): $$H = \begin{cases} 0^\circ & \text{wenn } \Delta = 0 \ 60^\circ \times \left(\frac{g - b}{\Delta} \bmod 6\right) & \text{wenn } c_{\max} = r \ 60^\circ \times \left(\frac{b - r}{\Delta} + 2\right) & \text{wenn } c_{\max} = g \ 60^\circ \times \left(\frac{r - g}{\Delta} + 4\right) & \text{wenn } c_{\max} = b \end{cases}$$

3. Umrechnung von RGB in CMYK im Farbumrechner

Für die Umrechnung in das Druckfarbmodell CMYK ermittelt der Farbumrechner zunächst den Schwarzanteil (Key $K$):

$$K = 1 - \max(r, g, b)$$

Wenn $K = 1$ (reines Schwarz), gilt $C = 0, M = 0, Y = 0$. Andernfalls berechnet der Farbumrechner Cyan, Magenta und Yellow wie folgt:

$$C = \frac{1 - r - K}{1 - K}, \quad M = \frac{1 - g - K}{1 - K}, \quad Y = \frac{1 - b - K}{1 - K}$$

Häufige Anwendungsbereiche für den Farbumrechner

Ein vielseitiger Farbumrechner gehört zur Grundausstattung im modernen Arbeitsalltag:

• Frontend-Entwicklung & CSS — Mit dem Farbumrechner überführen Entwickler Design-Tokens aus Figma oder Sketch blitzschnell in passende CSS-Formate (rgb(), hsl() oder #hex).
• Design-Systeme & UI-Theming — Der Farbumrechner erleichtert das Erstellen harmonischer Farbpaletten durch gezielte Abstufung von HSL-Werten.
• Cross-Media & Print-Vorbereitung — Ein zuverlässiger Farbumrechner unterstützt beim Abgleich zwischen Screen-Farben (RGB) und Druckerzeugnissen (CMYK).
• Barrierefreiheit (Accessibility) — Mit dem Farbumrechner lassen sich Farbkontraste exakt abstimmen und für WCAG-Richtlinien optimieren.

Nutzen Sie diesen kostenlosen Farbumrechner, um jeden Farbcode schnell, verlässlich und ohne Installation direkt im Browser umzurechnen.