Farben zwischen HEX-, RGB- und HSL-Formaten mit Live-Vorschau konvertieren
Ein Farbkonverter übersetzt eine Farbe zwischen den Formaten von Design und Code: HEX (#3B82F6), RGB (rgb(59, 130, 246)) und HSL (hsl(217, 91%, 60%)). Alle beschreiben dasselbe Pixel, doch jedes ist anderswo praktisch — HEX ist kompakt und dominiert CSS und Designdateien, RGB bildet direkt ab, wie Bildschirme rotes, grünes und blaues Licht mischen, und HSL beschreibt Farbe so, wie Menschen denken: ein Farbton, wie kräftig er ist und wie hell oder dunkel. Konvertieren lässt Sie eine Farbe sauber zwischen Designwerkzeug, Stylesheet und Grafikprogramm tragen, ohne dass sie abdriftet.
Die Umrechnungen sind exakte mathematische Abbildungen, daher sind #3B82F6, sein RGB-Tripel und seine HSL-Werte drei Schreibweisen einer Farbe. Am meisten zahlt sich HSL aus: Da es Farbton von Helligkeit trennt, bauen Sie eine konsistente Palette, indem Sie den Farbton festhalten und nur die Helligkeit für Schattierungen und Tönungen anpassen — von Hand in HEX umständlich. Dieses Tool zeigt alle drei Formate und eine Live-Farbfläche zugleich, sodass Sie die jeweils nötige Darstellung wählen und sofort kopieren.
Ja. HEX und RGB sind dieselbe Information anders geschrieben — jedes HEX-Ziffernpaar ist ein RGB-Kanal. HSL ist ein anderes Koordinatensystem über demselben Farbraum, also wandelt jede Farbe sauber zwischen allen dreien um, ohne Verlust bei standardmäßig opaken Farben.
HSL glänzt, wenn Sie eine Farbe anpassen statt nur benennen: aufhellen, abdunkeln oder entsättigen. Farbton und Sättigung festhalten und nur die Helligkeit ändern ergibt einen harmonischen Satz Schattierungen, in HEX weit schwerer abzuschätzen.
Transparenz ist ein zusätzlicher Alphakanal, geschrieben als 8-stelliges HEX (#RRGGBBAA) oder als rgba()/hsla(). Die opake Umwandlung deckt die Farbe selbst ab; den Alphawert fügen Sie für halbtransparente Farben separat hinzu.
Die Zahlen sind exakt, aber wie eine Farbe erscheint, hängt von Display, Kalibrierung und Farbprofil ab. Die Umwandlung ändert die Farbe nicht; sichtbare Unterschiede entstehen, weil der Monitor dieselben Werte anders darstellt.
UUID-Generator · Zeitstempel-Konverter · Base64-Encoder · Base64-Decoder · Hash-Generator · Zahlenbasis-Konverter