Farbformat‑Konverter
Eine Farbe zwischen HEX, RGB, HSL und CMYK mit Live‑Vorschau umrechnen (Live‑Vorschau auf Desktop)
HEX
#
RGB
R
G
B
HSL
H
S
L
CMYK
C
M
Y
K
Tipp: Kanalbuchstaben nach links/rechts ziehen zum Feinabgleich
Vorschau
🚀 Schnellstart
- Auswählen/eingeben: beliebiges unterstütztes Format (#1E90FF, rgb(30,144,255), hsl(210,100%,56%)) eingeben oder Farbwähler nutzen
- Automatische Umrechnung: Eingabe in einem Format aktualisiert die anderen sofort
- Kopieren: Kopier‑Button je Format für eine normalisierte Zeichenkette
📌 Häufige Anwendungsfälle
- Design‑Handoff: HEX aus Layouts in CSS‑RGB/HSL für die Entwicklung umsetzen
- Style‑Guide: Farbformate und Schreibweise in der Komponentenbibliothek vereinheitlichen
- Druckreferenz: Bildschirmfarbe in CMYK als erste Schätzung (Andruck nötig)
- Barrierefreiheit: Vorschau für schnellen Eindruck des Kontrasts (exakte Werte mit Spezialtool)
🎛️ Konvertier‑ & Anzeigeparameter
- Eingaberegeln: HEX nur 6‑stellig (ohne Alpha); RGB 0–255; H 0–360; S/L 0–100; CMYK 0–100. Groß-/Kleinschreibung egal
- Vorschau: rechts Live‑Vorschau auf Desktop; Mobile im Leichtmodus ohne Vorschau
- Farbwähler: Palettensymbol oben rechts in jeder Karte
- HEX‑Großschreibung: Ausgabe wird in Großbuchstaben normalisiert (z. B. #1E90FF); Eingabe nicht case‑sensitiv; kein Schalter
- Feinabstimmung: Kanalbuchstaben links/rechts ziehen (Shift×10, Alt÷0.1)
- Kopierausgabe: Die Kopier‑Taste liefert standardisierte Strings (HEX in Großbuchstaben)
🧭 Anwendungstipps
- Genauigkeit: Farbmanagement unterscheidet sich je Gerät; Pipettenwerte können je App abweichen
- Alpha: aktuelle Formate enthalten kein Alpha; rgba()/hsla() oder separaten Kanal nutzen
- Farbraum: Web nutzt sRGB; in P3/Display‑P3 besonders sorgfältig prüfen
- Team‑Konsistenz: kanonisches CSS‑Format (z. B. HSL) vereinbaren
⚠️ Risiken & Einschränkungen
- Gerätevarianz: Monitore/Browser/OS managen Farbe verschieden; Darstellung kann variieren
- CMYK ist näherungsweise: Werte sind Richtwerte; echter Druck braucht ICC/Workflow
- Kein Alpha: Transparenz wird nicht verarbeitet
🔒 Datenschutz & Sicherheit
- Die gesamte Verarbeitung erfolgt in Ihrem Browser; Daten verlassen Ihr Gerät nicht
- Keine Persistenz: Eingaben/Verlauf werden beim Schließen gelöscht (sofern nicht gespeichert)
❓ FAQ
Wird die #RGB‑Kurzform unterstützt?
Derzeit nicht; bitte 6‑stelliges HEX (#RRGGBB) verwenden.
Welche Bereiche gelten für RGB und HSL?
RGB: 0–255 (Ganzzahlen); H: 0–360, S/L: 0–100 %
Warum weicht CMYK vom Druckergebnis ab?
CMYK hängt von Papier, Tinte, Gerät und ICC ab; hier Näherungen – Andruck erforderlich
Unterstützt ihr Alpha (rgba()/hsla())?
Derzeit nicht; verwenden Sie rgba()/hsla() oder einen separaten Alpha‑Wert.
Warum weichen Vorschau/Umwandlungswerte von Design‑Apps/Browsern ab?
Unterschiedliche Farbverwaltung, Rendering und Bildschirm‑Kalibrierung. Das Tool rechnet in sRGB; Ergebnis ist indikativ.
Wird Wide‑Gamut (P3/Display‑P3) unterstützt?
Aktuell sRGB‑basiert; für P3 mit Zielgerät und ICC‑Profilen prüfen.
CMYK zurück nach HEX/RGB?
Möglich, aber CMYK→Bildschirm ist nur eine Annäherung; für Druck ICC und Proof erforderlich.