Flutter / Compose–HSL-muunnin

Liitä Flutter / Compose-arvo, niin saat HSL-arvon heti. Myös muut muodot käyvät.

Lähtömuoto: Flutter / Compose

Tunnistettu: Flutter-koodi

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

HSL–Flutter / Compose-muunnin

Säädä väriä

Sävy11°

Peittävyys100 %

Vaaleus68 %

Kroma0,210

Sävy34°

Kaikki muut muodot

Flutter / Compose–HSL-esimerkkejä

Väri	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%)

Tietoa muodoista Flutter / Compose ja HSL

Flutter ja Jetpack Compose kirjoittavat värin yhtenä 32-bittisenä ARGB-lukuna, esimerkiksi Color(0xFFFF5733). Kaksi heksanumeroa 0x:n jälkeen ovat alfa, ja FF tarkoittaa täysin peittävää.

HSL ilmoittaa sävyn asteina sekä kylläisyyden ja vaaleuden prosentteina. Sitä on helppo lukea, mutta sen vaaleus ei ole havainnollisesti tasainen: 50 %:n keltainen näyttää paljon vaaleammalta kuin 50 %:n sininen.

Näin muunnos toimii

Luemme Flutter / Compose-arvon, muunnamme sen CIE XYZ -avaruuteen CSS Color 4 -määrityksen matriiseilla ja siitä edelleen HSL-muotoon. Kohdevärialueen ulkopuoliset arvot sovitetaan CSS Color 4:n algoritmilla, joka säilyttää vaaleuden ja sävyn ja pienentää kromaa.

Kysymyksiä ja vastauksia

Miten muunnan Flutter / Compose-arvon HSL-muotoon?

Liitä tai kirjoita Flutter / Compose-arvo yllä olevaan kenttään. PickShade muuntaa sen CSS Color 4 -kaavoilla jo kirjoittaessasi, ja HSL-arvon kopioit yhdellä napsautuksella.

Onko Flutter / Compose–HSL-muunnos tarkka?

Laskenta on tarkka, ja tulos pyöristetään vain näyttämistä varten niin moneen numeroon, että takaisin muunnettuna saat saman värin. Jos väri ei mahdu kohdevärialueelle, PickShade varoittaa ja näyttää lähimmän värin, joka mahtuu.

Saanko muut muodot samalla kertaa?

Kyllä. Kaikki muut muodot, myös OKLCH, Display P3, Tailwind, SwiftUI, Flutter ja Android, näkyvät tuloksen alla, ja ne kopioituvat yhdellä napsautuksella.

Onko muunnin ilmainen?

Kyllä. Se on ilmainen, ei vaadi rekisteröitymistä ja toimii kokonaan selaimessasi.