Color Converter

Den Farb-Konverter verwenden

1. Tippe oder füge eine Farbe in HEX, RGB oder HSL ein. Der Konverter erkennt automatisch, welches Format du eingegeben hast.
2. Oder wähle visuell mit der nativen Farbauswahl.
3. Lies die parallelen Ausgaben: HEX (6-stellig), RGB (0-255-Triplett), HSL (Grad, Prozent, Prozent) und CMYK (vier Prozentwerte).
4. Klicke Kopieren neben einer Zeile, um diese genaue Darstellung in deine Zwischenablage zu senden. Die zugehörige CSS-Namensfarbe erscheint, wenn eine existiert.
5. Gib einen Wert in einer beliebigen Zeile erneut ein, um einen neuen Konvertierungsdurchlauf auszulösen; alle anderen Ausgaben synchronisieren sich.

Die Mathematik hinter jeder Konvertierung

HEX zu RGB ist ein direktes Basis-16-Parsing: Jedes Hex-Zeichenpaar wird einer Ganzzahl 0-255 zugeordnet. RGB zu HSL folgt CSS Color Module Level 4 §7: Finde Max und Min der drei Kanäle, Helligkeit ist (max+min)/2, Sättigung wird aus der Chroma max-min abgeleitet, bedingt davon, ob die Helligkeit über oder unter 0,5 liegt, und der Farbton ist der Winkel im RGB-Zylinder. RGB zu CMYK ist die klassische subtraktive Konvertierung: K = 1 - max(R,G,B)/255, dann C = (1 - R/255 - K) / (1 - K), M = (1 - G/255 - K) / (1 - K), Y = (1 - B/255 - K) / (1 - K), mit einer Schutzmaßnahme für reines Schwarz (K=1), um eine Division durch null zu vermeiden. Jede Konvertierung läuft bei jedem Eingabeereignis, und die Ergebnisse werden auf die Präzision gerundet, die jedes Format konventionell verwendet - Ganzzahlen für RGB, Ganzzahlen für den HSL-Farbton, Dezimalprozente für HSL-Sättigung und Helligkeit, ganzzahlige Prozente für CMYK.

Wann man einen Konverter zur Hand nimmt

• Farben von Design zu Druck übergeben: Designer arbeiten in RGB-basierten Werkzeugen, Druck erfordert CMYK für 4-Farb-Separationen.
• Ein Legacy-Stylesheet übersetzen von HEX zu HSL, damit ein Entwickler Farbton oder Helligkeit programmgesteuert anpassen kann.
• Ein Tailwind-Theme aufbauen, bei dem du eine Farbe in hsl()-Form ausdrücken musst, damit nachgelagertes CSS die Sättigung ohne erneutes Auswählen neu mischen kann.
• Schnelle Plausibilitätsprüfung der RGB-Werte einer benannten Farbe, bevor sie in eine Konfigurationsdatei eingefügt wird, die keine Namen akzeptiert.
• Farbtoken für plattformübergreifende Design-Systeme vorbereiten, die dieselbe Farbe in HEX für Web, RGB für Android und CMYK für Marketing-Materialien benötigen.

Wo die Konverter-Mathematik versagt

CMYK ist die erste Falle. Bildschirm-CMYK ist eine Annäherung ohne Tinten- oder Papierprofil und stimmt ohne ein ICC-Profil nicht mit der Druckausgabe überein (SWOP für US beschichtet, FOGRA für Europa, Japan Color für CJK-Märkte). Für Designentwürfe ist es in Ordnung; für druckfertige Kunstwerke kalibriere durch InDesign oder Photoshop. Zweitens, Gleitkomma-Runden: Die Konvertierung von HEX zu HSL und zurück kann eine Off-by-One-Drift an der sRGB-Grenze erzeugen; der Konverter vermeidet die Anzeige davon, indem er immer frisch von deiner Eingabe beginnt. Drittens, Alpha wird nicht konvertiert: Wenn du rgba(255, 0, 0, 0.5) einfügst, wird das Alpha gelesen, aber nicht in HEX- oder CMYK-Ausgaben widergespiegelt. Verwende die Farbauswahl für transparenzfähige Ausgabe.

Die Spezifikationsgeschichte dieser Formate

HEX und die sechsstellige RGB-Form datieren auf die früheste HTML-3.2-Farbspezifikation (1997). HSL und sein alphaunterstützendes hsla()-Geschwister wurden in CSS Color Module Level 3 (2011) hinzugefügt. CMYK war nie ein CSS-Farbformat - es ist ein Druckindustrie-Primitiv, das durch ISO 2846 für Drucktinten kodifiziert und über ICC-Farbmanagement auf den Bildschirm übertragen wird. CSS Color Module Level 4 (2022) fügte OKLCH und Oklab aus Bjorn Ottossons 2020-Papier A perceptual color space for image processing hinzu, das die Nicht-Gleichmäßigkeit von HSL löst. Level 4 fügte auch die generische color()-Funktion für Display P3, Rec.2020 und ProPhoto RGB hinzu - breitere Farbräume, die moderne Displays rendern können. Level 5, derzeit im Editor's Draft, fügt relative Farbsyntax und color-mix() für berechnete Farben in jedem dieser Räume hinzu. Dieser Konverter zielt auf die Level-3-Spezifikation plus CMYK, weil das die Formate sind, die die meisten Design-zu-Code-Workflows tatsächlich austauschen.

Vergleich mit spezialisierten Farbwerkzeugen

Figma, Adobe XD und Sketch haben alle Farbfelder, die HEX, RGB und HSL gleichzeitig anzeigen, aber keines zeigt CMYK ohne ein Plugin, weil Design-Werkzeuge bildschirmorientiert sind. Adobe Color ist bei CMYK stärker, weil es mit dem Adobe-Druckworkflow verbunden ist, bietet aber nicht die schnelle "HEX einfügen, vier Formate erhalten"-Erfahrung. Kommandozeilen-Werkzeuge wie tinycolor2 (eine Node.js-Bibliothek) geben dir programmgesteuerte Konvertierung mit mehr Formaten (LCH, HSV, HWB) und sind die richtige Wahl für Build-Time-Token-Generierung. Chrome DevTools' Stile-Bereich lässt dich ein Farbfeld anklicken und zwischen HEX, RGB, HSL mit Shift-Klick wechseln - nützlich für On-the-Fly-Inspektion, aber auf drei Formate beschränkt. Verwende diesen Konverter, wenn du ein einfügbares Raster jedes gängigen Formats auf einer Seite ohne Login möchtest.