Color Picker & Converter

One input per line. Output is numbered to match the input order.
Pinned tools are listed in your favourites on the home page.Copies a link to this tool that carries your current input, so it opens ready to run.Gives you an iframe snippet for putting this tool on your own site.
Ctrl+Enter Run  · Ctrl+Shift+C Copy  · Esc Clear

Understand Color Picker & Converter

Wandelt eine Farbe zwischen Hex, RGB, HSL, HWB und OKLch um, mit visueller Auswahl und Live-Vorschau.

How it works

Hex und RGB beschreiben dasselbe in zwei Schreibweisen: Jedes Paar Hexziffern ist ein Kanal von 0 bis 255, #FF5733 ist also rgb(255, 87, 51). HSL ist eine zylindrische Umsortierung derselben sRGB-Zahlen – Farbton als Winkel auf dem Farbkreis, Sättigung und Helligkeit als Prozentwerte –, was das Ableiten von Aufhellungen und Abdunklungen erleichtert, den Farbraum aber nicht ändert. OKLch ist von anderer Art: Es ist ein wahrnehmungsbezogener Raum, gleiche Schritte in seinem Helligkeitskanal wirken für das Auge also gleich groß, und deshalb ergibt eine OKLch-Rampe eine gleichmäßige Palette, während eine HSL-Rampe sich in den Gelbtönen staut.

When to use it

  • Einen Hex-Wert aus einer Designdatei in die Form rgb() oder hsl() bringen, die ein Stylesheet oder eine Canvas-API erwartet
  • Aus einer Markenfarbe eine Skala aus Aufhellungen und Abdunklungen bauen, indem Farbton und Sättigung festgehalten und nur die Helligkeit variiert wird
  • Eine Farbe aus einem Screenshot oder einer gerenderten Seite ablesen und alle Schreibweisen dafür auf einmal erhalten
  • Zwei ähnlich wirkende Farben anhand ihrer Zahlen statt nach Augenmaß vergleichen

Watch out for

  • Es gibt hier keinen Alphakanal. Achtstellige Hex-Werte (#RRGGBBAA), rgba() und hsla() werden nicht geparst, und Transparenz wird verworfen statt weitergereicht.
  • Der Hin- und Rückweg kann den Wert um eins verschieben. Die HSL-Ausgabe wird auf ganze Grad und ganze Prozent gerundet, Hex → HSL → Hex liefert also nicht immer das Byte zurück, mit dem Sie begonnen haben.
  • Die Helligkeit in HSL ist nicht die wahrgenommene Helligkeit. hsl(60, 100%, 50%) ist ein leuchtendes Gelb und hsl(240, 100%, 50%) ein dunkles Blau, obwohl beide 50 % Helligkeit angeben – nutzen Sie OKLch, wenn der Vergleich dem entsprechen muss, was das Auge sieht.
  • Benannte CSS-Farben werden nicht akzeptiert. Geben Sie `#FF0000` statt `red` ein.

Frequently Asked Questions

Wie wandelt man Hex in RGB um?

Teilen Sie den 6-stelligen Hex-Code in drei Paare: #FF5733 → R=0xFF=255, G=0x57=87, B=0x33=51, also rgb(255, 87, 51). Bei Kurzschreibweisen wie #F73 verdoppeln Sie zuerst jede Ziffer (#FF7733). Fügen Sie hier einen beliebigen Hex-Code ein, und die Werte für RGB, HSL und HWB erscheinen sofort.

Wie wandelt man RGB in Hex um?

Wandeln Sie jeden Kanal (0–255) in zwei Hexziffern: R=255 → FF, G=87 → 57, B=51 → 33, also #FF5733. In JavaScript: "#" + [r, g, b].map(v => v.toString(16).padStart(2, "0")).join(""). Fügen Sie hier rgb()-Werte ein, um den Hex-Code automatisch zu erhalten.

Was ist der Unterschied zwischen RGB und HSL?

RGB beschreibt Farben über die Intensität von rotem, grünem und blauem Licht (je 0–255) – das entspricht der Arbeitsweise von Bildschirmen. HSL nutzt Hue (Farbton, 0–360° auf dem Farbkreis), Saturation (Sättigung, 0–100 %) und Lightness (Helligkeit, 0–100 %). HSL ist eingängiger, um Aufhellungen, Abdunklungen und Farbskalen für Designsysteme zu erzeugen.

How to Use Color Picker & Converter

  1. Paste or type your input in the input area above.
  2. The tool processes your input automatically or click Run.
  3. Copy or download the result using the action buttons.
  4. Use Ctrl+Enter to run quickly from the keyboard.