Wie es funktioniert
Klemmen Sie jeden Kanal auf 0-255, runden Sie ihn ab und schreiben Sie dann zwei hexadezimale Ziffern pro Kanal hinter #. HSL wird aus den RGB-Verhältnissen abgeleitet: Farbton vom dominanten Kanal, Sättigung aus dem Abstand zwischen Maximum und Minimum, Helligkeit aus ihrem Durchschnitt.
- HEX akzeptiert 3 oder 6 Ziffern; Die Werte sind auf 0–255 begrenzt.
Warum es wichtig ist
Designtools exportieren unterschiedliche Formate und CSS erwartet bestimmte Formate. Bei der manuellen Konvertierung kann es zu Rundungsfehlern kommen, und die gleiche Farbe, die auf drei verschiedene Arten geschrieben wurde, lässt sich leicht überprüfen, wenn Sie alle Darstellungen nebeneinander sehen.
Ein gelungenes Beispiel
rgb(99, 91, 255) ist #635BFF und hsl(244, 100 %, 68 %). Die HEX-Form wird von CSS-Autoren am häufigsten eingefügt. HSL lässt sich leichter abdunkeln oder entsättigen, ohne neue Kanäle zu erraten.
Häufige Fehler
- Angenommen, das gleiche HEX sieht ohne Farbmanagement überall gleich aus.
- Vergessen Sie, dass die dreistellige HEX-Zahl jedes Nibble zweimal erweitert.
- Bearbeiten von RGB-Kanälen, wenn Sie die Helligkeit anpassen wollten.
Praktische Tipps
Entwerfen Sie in HSL, wenn Sie systematische Farbtöne und Schattierungen benötigen: Behalten Sie Farbton und Sättigung bei und variieren Sie die Helligkeit schrittweise. Speichern Sie den HEX-Wert für die Ausgabe, behalten Sie jedoch die HSL-Notizen für zukünftige Anpassungen in der Designdatei.
Wie man es benutzt
- Öffnen Sie das Tool. Alles läuft in Ihrem Browser-Tab.
- Fügen Sie Ihre Eingabe ein oder geben Sie sie ein und wählen Sie dann die gewünschte Aktion aus.
- Überprüfen Sie das Ergebnis und kopieren Sie es mit einem Klick.
Häufige Fragen
Warum unterscheidet sich mein HEX-Wert in einem anderen Tool?
Die Werte werden auf 0-255 begrenzt und gerundet und dann als HEX in Großbuchstaben geschrieben. Einige Tools behalten Kleinbuchstaben oder ungültige Eingaben bei.
Was ist HSL?
Eine alternative Darstellung: Farbton in Grad, Sättigung und Helligkeit in Prozent. Dies ist nützlich zum Anpassen von Farben.
Überprüft es den Kontrast?
Nein. Dadurch werden Farbformate konvertiert. Die Kontrastprüfung ist ein anderes Werkzeug.
Ist dieses Tool wirklich kostenlos?
Ja. Es gibt kein Konto, keine Paywall und keine Nutzungsbeschränkung. Die Tools App wird von aumenso, dem Studio dahinter, finanziert.
Wird alles, was ich eingebe, hochgeladen?
Nein. Das Tool wird in Ihrem Browser-Tab ausgeführt. Was Sie eingeben, wird niemals an uns gesendet und niemals gespeichert.