Konvertera SwiftUI till HSL

Klistra in ett SwiftUI-värde och få HSL direkt. Andra format fungerar också.

Från SwiftUI

Tolkad som Swift-kod

HSL-värdehsl(10.58, 100%, 60%)

HSL till SwiftUI

Justera färgen

Färgton11°

Opacitet100 %

Ljushet68 %

Kroma0,210

Färgton34°

Alla andra format

Exempel: SwiftUI till HSL

Färg	SwiftUI	HSL
	Color(red: 1, green: 0, blue: 0)	hsl(0, 100%, 50%)
	Color(red: 0, green: 1, blue: 0)	hsl(120, 100%, 50%)
	Color(red: 0, green: 0, blue: 1)	hsl(240, 100%, 50%)
	Color(red: 1, green: 1, blue: 1)	hsl(0, 0%, 100%)
	Color(red: 0, green: 0, blue: 0)	hsl(0, 0%, 0%)
	Color(red: 0.502, green: 0.502, blue: 0.502)	hsl(0, 0%, 50.2%)
	Color(red: 1, green: 0.341, blue: 0.2)	hsl(10.59, 100%, 60%)
	Color(red: 0.231, green: 0.51, blue: 0.965)	hsl(217.22, 91.22%, 59.8%)
	Color(red: 0.063, green: 0.725, blue: 0.506)	hsl(160.12, 84.08%, 39.41%)
	Color(red: 0.961, green: 0.62, blue: 0.043)	hsl(37.69, 92.13%, 50.2%)
	Color(red: 0.545, green: 0.361, blue: 0.965)	hsl(258.31, 89.53%, 66.27%)
	Color(red: 0.925, green: 0.282, blue: 0.6)	hsl(330.37, 81.19%, 60.39%)

Om SwiftUI och HSL

SwiftUI beskriver en färg med rött, grönt och blått från 0 till 1, skrivet som Color(red: 1, green: 0.341, blue: 0.2). Opacitet läggs till med parametern opacity.

HSL anger färgton i grader samt mättnad och ljushet i procent. Det är lätt att läsa, men ljusheten är inte jämn för ögat: gult på 50 % ser mycket ljusare ut än blått på 50 %.

Så fungerar konverteringen

Vi läser SwiftUI-värdet, räknar om det till CIE XYZ med matriserna från specifikationen CSS Color 4 och sedan till HSL. Värden utanför målformatets färgomfång anpassas med algoritmen i CSS Color 4, som behåller ljushet och färgton och minskar kroma.

Frågor och svar

Hur konverterar jag SwiftUI till HSL?

Klistra in eller skriv ett SwiftUI-värde i fältet ovan. PickShade konverterar det med formlerna i CSS Color 4 medan du skriver, och ett klick kopierar HSL-värdet.

Är konverteringen från SwiftUI till HSL exakt?

Beräkningen är exakt och resultatet avrundas bara för visning, med tillräckligt många siffror för att räkna tillbaka till samma färg. Om färgen inte ryms i målformatets färgomfång varnar PickShade och visar närmaste färg som ryms.

Kan jag få andra format samtidigt?

Ja. Alla andra format, bland annat OKLCH, Display P3, Tailwind, SwiftUI, Flutter och Android, listas under resultatet och kopieras med ett klick.

Är konverteraren gratis?

Ja. Den är gratis, kräver inget konto och körs helt i din webbläsare.