Flutter / Compose in HSL umrechnen

Flutter / Compose-Wert einfügen und sofort HSL erhalten. Andere Formate funktionieren auch.

Aus Flutter / Compose

Erkannt als Flutter-Code

HSL-Werthsl(10.59, 100%, 60%)

HSL in Flutter / Compose

Farbe anpassen

Farbton11°

Deckkraft100 %

Helligkeit68 %

Chroma0,210

Farbton34°

Alle anderen Formate

Beispiele: Flutter / Compose in HSL

Farbe	Flutter / Compose	HSL
	Color(0xFFFF0000)	hsl(0, 100%, 50%)
	Color(0xFF00FF00)	hsl(120, 100%, 50%)
	Color(0xFF0000FF)	hsl(240, 100%, 50%)
	Color(0xFFFFFFFF)	hsl(0, 0%, 100%)
	Color(0xFF000000)	hsl(0, 0%, 0%)
	Color(0xFF808080)	hsl(0, 0%, 50.2%)
	Color(0xFFFF5733)	hsl(10.59, 100%, 60%)
	Color(0xFF3B82F6)	hsl(217.22, 91.22%, 59.8%)
	Color(0xFF10B981)	hsl(160.12, 84.08%, 39.41%)
	Color(0xFFF59E0B)	hsl(37.69, 92.13%, 50.2%)
	Color(0xFF8B5CF6)	hsl(258.31, 89.53%, 66.27%)
	Color(0xFFEC4899)	hsl(330.37, 81.19%, 60.39%)

Über Flutter / Compose und HSL

Flutter und Jetpack Compose schreiben eine Farbe als eine 32-Bit-ARGB-Zahl, etwa Color(0xFFFF5733). Die zwei Hex-Ziffern nach 0x sind der Alphawert, FF bedeutet voll deckend.

HSL beschreibt den Farbton in Grad sowie Sättigung und Helligkeit in Prozent. Es ist leicht zu lesen, aber die Helligkeit ist nicht wahrnehmungsgleich: Gelb bei 50 % wirkt viel heller als Blau bei 50 %.

So funktioniert die Umrechnung

Wir lesen den Flutter / Compose-Wert, rechnen ihn mit den Matrizen aus der Spezifikation CSS Color 4 in CIE XYZ um und von dort in HSL. Werte außerhalb des Zielfarbraums passt der Algorithmus aus CSS Color 4 an: Helligkeit und Farbton bleiben, das Chroma sinkt.

Fragen und Antworten

Wie rechne ich Flutter / Compose in HSL um?

Füge einen Flutter / Compose-Wert in das Feld oben ein oder tippe ihn ein. PickShade rechnet schon beim Tippen mit den Formeln aus CSS Color 4 um, und ein Klick kopiert den HSL-Wert.

Ist die Umrechnung von Flutter / Compose in HSL exakt?

Die Rechnung ist exakt. Gerundet wird nur für die Anzeige, mit so vielen Stellen, dass die Rückrechnung dieselbe Farbe ergibt. Passt die Farbe nicht in den Zielfarbraum, warnt PickShade und zeigt die nächste Farbe, die passt.

Bekomme ich gleichzeitig andere Formate?

Ja. Alle anderen Formate, darunter OKLCH, Display P3, Tailwind, SwiftUI, Flutter und Android, stehen unter dem Ergebnis und lassen sich mit einem Klick kopieren.

Ist dieser Konverter kostenlos?

Ja. Er ist kostenlos, braucht keine Anmeldung und läuft komplett in deinem Browser.