Hex-zu-HSL-Rechner

• Sofortige bidirektionale Umrechnung: Der Rechner aktualisiert alle Formatäquivalente bei jedem Tastendruck - ohne eine Schaltfläche drücken zu müssen. Ändern Sie eine beliebige Eingabe (HEX, RGB oder HSL), und alle anderen Werte aktualisieren sich sofort. Ein nativer Farbwähler ist ebenfalls für die visuelle Auswahl verfügbar.
• Alle Formate an einem Ort: Der Rechner gibt HEX, HEX3 (Kurzform), RGB, RGBA, HSL, HSLA und die einzelnen H/S/L/V-Kanalwerte aus - alles, was Entwickelnde benötigen, in einer Ansicht. Kopieren Sie jeden einzelnen Wert oder alle Werte auf einmal.
• 100 % privat - kein Upload: Die gesamte Umrechnung erfolgt lokal in Ihrem Browser. Ihre Farbwerte verlassen niemals Ihr Gerät und werden niemals an einen Server gesendet - sicher für Kundenprojekte und proprietäre Designsysteme.
• Kostenlos und ohne Limits: Rechnen Sie unbegrenzt Farben um, ohne Anmeldung, Abo und Nutzungsobergrenzen. Der Hex-zu-HSL-Rechner ist dauerhaft völlig kostenlos, ohne Werbung, die die Oberfläche blockiert.

• CSS-Entwicklung: Frontend-Entwickelnde nutzen den Rechner, um Design-Tokens von HEX in HSL für CSS-Custom-Properties umzurechnen. HSL wird in CSS bevorzugt, weil sich Helligkeit und Sättigung programmatisch leicht anpassen lassen.
• Tailwind-CSS-Konfiguration: Entwickelnde nutzen den Rechner, um Markenfarben von HEX in HSL für die Tailwind-CSS-Konfiguration umzurechnen. Tailwind v3+ verwendet HSL-basierte CSS-Variablen für sein Farbsystem.
• Design-Übergabe: Entwickelnde nutzen den Rechner, um HEX-Werte aus Figma-Designs in das RGB- oder HSL-Format umzurechnen, das ihr CSS-Framework oder Design-Token-System erfordert.
• Barrierefreiheit und Kontrast: Spezialistinnen und Spezialisten für Barrierefreiheit nutzen den Rechner, um den Helligkeitswert (L) einer Farbe zu verstehen - ein Schlüsselfaktor bei Kontrastverhältnis-Berechnungen und der Anpassung an den Dunkelmodus.
• Farbpaletten-Anpassung: Designer nutzen den Rechner, um die HSL-Werte bestehender Markenfarben zu finden, damit sie durch Anpassung nur des Helligkeitskanals konsistente Aufhellungen und Abschattungen erstellen können.
• Plattformübergreifende Entwicklung: Mobile und plattformübergreifende Entwickelnde nutzen den Rechner, um Web-HEX-Farben in RGB-Werte für React Native, Flutter und andere Frameworks umzurechnen, die RGB-Farbmodelle verwenden.

Der Hex-zu-HSL-Rechner rechnet Farbwerte zwischen den drei gängigsten CSS-Farbformaten - HEX, RGB und HSL - sofort und bidirektional um. Geben Sie eine Farbe in einem beliebigen Format ein und erhalten Sie sofort alle äquivalenten Werte. Das Tool gibt außerdem die einzelnen Kanalwerte (H, S, L, R, G, B) und HSV-Werte aus, wodurch es zu einer vollständigen Referenz für Farbformate für Entwickelnde und Designer wird.

1. Farbe in beliebigem Format eingeben: Geben Sie einen HEX-Wert (z. B. #ff6b6b), einen RGB-Wert (z. B. 255, 107, 107) oder einen HSL-Wert (z. B. 0, 100%, 71%) ein. Sie können auch das native Farbwähler-Muster verwenden. Die gesamte Verarbeitung läuft lokal in Ihrem Browser - Ihre Farbwerte verlassen niemals Ihr Gerät.
2. Alle Formate aktualisieren sich sofort: Während Sie tippen, aktualisieren sich alle anderen Formatfelder in Echtzeit. Das Farbmuster zeigt eine Live-Vorschau der Farbe. Wechseln Sie den aktiven Eingabemodus, um ein anderes Format zu bearbeiten.
3. Beliebigen Wert kopieren: Klicken Sie auf die Schaltfläche Kopieren neben einer beliebigen Ausgabezeile, um genau diesen Wert zu kopieren, oder verwenden Sie "Alle Werte kopieren", um HEX, RGB und HSL zusammen zu kopieren.

• HEX: das gängigste Format für Webfarben. Kompakt und universell unterstützt. Verwenden Sie HEX, wenn Sie Farben aus Design-Tools wie Figma kopieren oder Farben in HTML-Attributen angeben.
• RGB: gibt die Kanäle Rot, Grün und Blau an (0-255). Verwenden Sie RGB bei Canvas-APIs, React Native, Flutter oder jeder Plattform, die numerische Kanalwerte erfordert.
• HSL: gibt Farbton (0-360°), Sättigung (0-100 %) und Helligkeit (0-100 %) an. HSL ist das intuitivste Format für Designer - das Anpassen nur der Helligkeit erzeugt konsistente Aufhellungen und Abschattungen. Bevorzugt für CSS-Custom-Properties und Design-Token-Systeme.
• HSV: ähnlich wie HSL, verwendet aber Wert/Helligkeitswert statt Helligkeit. HSV wird in Photoshop, im Farbwähler von Figma und den meisten Designanwendungen verwendet. Der Hex-zu-HSL-Rechner gibt auch HSV-Werte für die Kompatibilität zwischen Tools aus.

HSL wird für CSS-Designsysteme zunehmend bevorzugt, weil es die Farbmanipulation vorhersehbar macht. Um eine hellere Version einer Farbe zu erstellen, erhöhen Sie einfach den L-Wert. Um eine dunklere Version zu erstellen, verringern Sie ihn. Dadurch ist HSL ideal, um programmatisch Aufhellungs-/Abschattungsskalen, Dunkelmodus-Varianten und Hover-Zustände zu erzeugen. Tailwind CSS v3+ verwendet aus genau diesem Grund HSL-basierte CSS-Variablen. Unser Hex-zu-HSL-Rechner macht es einfach, jede bestehende HEX-Farbe für Ihr Design-Token-System in HSL umzurechnen.