Installiere unsere App 🪄 Klicke auf das -Symbol oben rechts in der Adressleiste.

Farbkonverter

0 von 0 Bewertungen
Akzeptierte Formate: HEX, HEX Alpha, RGB, RGBA, HSV, HSL, HSLA.
Eine junge Frau macht an ihrem Neon-Schreibtisch eine OK-Geste, während sie den Color converter benutzt

Der kostenlose Color converter rechnet hex, rgb, hsl und cmyk Werte sofort um. Füg einen Code ein und sieh dir die exakten Entsprechungen in den gängigen Webformaten an. Ganz ohne Registrierung.

Wie der Color converter Formate parst

Du fügst einen String wie #FF5733 oder rgb(255, 87, 51) ein. Das Tool normalisiert die Eingabe, entfernt alle Leerzeichen und ignoriert die Groß- und Kleinschreibung, bevor es die Berechnung startet. Danach werden die Werte auf den Standardbereich von 0 bis 255 für Rot, Grün und Blau gemappt. Aus dieser Basis berechnet das Tool den Farbton, die Sättigung und die Helligkeit für HSL. Für CMYK leitet es die Prozentwerte für Cyan, Magenta, Yellow und Key ab.

Wenn du Farbformate wirklich exakt umrechnen willst, musst du die RGB-Basiswerte verstehen. Hex-Codes sind nichts anderes als Base-16-Darstellungen dieser Integer. Die HSL-Mathematik sucht das Maximum und Minimum der RGB-Komponenten, um die Helligkeit zu berechnen. Die Differenz daraus ergibt Sättigung und Farbton. CMYK funktioniert subtraktiv. Du nimmst die RGB-Werte, invertierst sie und teilst durch den maximalen invertierten Wert. Das ist ganz einfache Algebra.

  • Hex akzeptiert Strings mit 3, 4, 6 oder 8 Zeichen.
  • RGB-Werte müssen zwischen 0 und 255 liegen.
  • Der HSL-Farbton ist ein Winkelgrad von 0 bis 360.
  • CMYK gibt Prozentwerte von 0 bis 100 aus.

Praktische Anwendungsfälle für den Color converter

Designer übergeben Figma-Exports oft mit Hex-Codes. Frontend-Entwickler müssen diese für CSS-Variablen in rgba oder für dynamische Theme-Anpassungen in hsl übersetzen. Manchmal musst du auch einen CMYK-Druckfarbfächer in einen hex-Code für den Bildschirm umrechnen. So prüfst du das Ergebnis auf dem Monitor, bevor die Dateien in den Druck gehen.

CSS-Debugging ist ein weiteres typisches Szenario. Dir fällt ein komischer Farbstich in den Browser-Dev-Tools auf. Du kopierst diesen berechneten rgb-Wert in den Color converter und justierst die Helligkeit in HSL. Den neuen Hex-Code fügst du danach wieder in dein Stylesheet ein. Das Tool hilft auch bei Accessibility-Checks. Du schnappst dir den Hex-Code von Text und Hintergrund und prüfst anschließend die Kontrastverhältnisse.

Grenzen des Color converter Tools

Das Tool beherrscht Standard-Umrechnungen im sRGB-Farbraum. Wide-Gamut-Farbräume wie Display P3 oder Rec. 2020 werden nicht verarbeitet. Wenn du mit HDR-Content oder speziellen Druckprofilen arbeitest, sind die CMYK- und RGB-Ausgaben nur Näherungswerte. Die Berechnung geht von einem Standard-D65-Weißpunkt aus.

Benannte CSS-Farben kannst du hier nicht direkt umwandeln. Das Tool erwartet numerische Werte oder Hex-Strings. Die Eingabe von rebeccapurple schlägt fehl. Du musst erst den Hex-Code für benannte Farben nachschlagen. Alpha-Kanäle in Hex-Codes werden korrekt geparst. Allerdings enthalten die CMYK- und HSL-Ausgaben kein Alpha-Äquivalent.

So benutzt du den Color converter

  1. Füge deinen hex-, rgb-, hsl- oder cmyk-Wert in das Eingabefeld ein.
  2. Warte kurz, bis das Tool den String geparst und die RGB-Basis-Integer berechnet hat.
  3. Lies die umgerechneten Werte in den Ausgabefeldern daneben ab.
  4. Kopiere das spezifische Format, das du für dein Stylesheet oder die Design-Datei brauchst.
  5. Lösche das Eingabefeld, um eine neue Umrechnung zu starten.

Referenz der Farbformate

Vergleiche die Struktur und die typischen Wertebereiche der unterstützten Farbmodelle.

FormatStrukturWertebereich
HexBase-16-String00 bis FF pro Kanal
RGBInteger-Tupel0 bis 255 pro Kanal
HSLWinkelgrad und ProzentwerteH: 0-360, S/L: 0-100
CMYKProzent-Tupel0 bis 100 pro Kanal

Frequently asked questions

Ist dieser Color converter wirklich kostenlos?
Ja. Du kannst beliebig viele Farben umrechnen, ohne ein Konto zu erstellen oder auf eine Paywall zu stoßen.
Warum sieht meine umgerechnete Farbe auf meinem Bildschirm anders aus?
Monitore haben unterschiedliche Farbprofile und Gammakurven. Die Mathematik ist für den sRGB-Raum exakt, aber die Hardware-Kalibrierung bestimmt, was du tatsächlich siehst.
Kann ich benannte CSS-Farben wie tomato oder dodgerblue umrechnen?
Nein. Das Tool verlangt numerische Eingaben oder Hex-Strings. Du musst zuerst das Hex-Äquivalent der benannten Farbe herausfinden.
Wie exakt ist die CMYK-Umrechnung?
Es nutzt die standardmäßige, nicht profilierte Umrechnungsformel. Das reicht für grobe Web-Previews, aber professioneller Druck erfordert eine ICC-Profil-Konvertierung.
Unterstützt es 8-stellige Hex-Codes mit Alpha-Kanälen?
Ja. Das Tool parst die letzten beiden Zeichen als Alpha-Kanal, gibt den Alpha-Wert aber nur im RGBA-Format aus.

Teilen

Beliebte Tools