Conversor de HSL para Flutter / Compose

Cole um valor HSL e receba Flutter / Compose na hora. Qualquer outro formato também funciona.

De HSL

Lido como HSL

Valor Flutter / ComposeColor(0xFFFF5733)

Flutter / Compose para HSL

Ajustar a cor

Matiz11 °

Opacidade100%

Luminosidade68%

Croma0,210

Matiz34 °

Todos os outros formatos

Exemplos de HSL para Flutter / Compose

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

Sobre HSL e Flutter / Compose

HSL descreve o matiz em graus e a saturação e a luminosidade em porcentagem. É fácil de ler, mas a luminosidade não é uniforme para o olho: amarelo a 50% parece bem mais claro que azul a 50%.

Flutter e Jetpack Compose escrevem uma cor como um único número ARGB de 32 bits, como Color(0xFFFF5733). Os dois dígitos hex depois de 0x são o alfa, e FF significa totalmente opaco.

Como a conversão funciona

Lemos o valor HSL, convertemos para CIE XYZ com as matrizes da especificação CSS Color 4 e depois para Flutter / Compose. Valores fora do gamut de destino são ajustados pelo algoritmo do CSS Color 4, que mantém a luminosidade e o matiz e reduz o croma.

Perguntas e respostas

Como converter HSL para Flutter / Compose?

Cole ou digite um valor HSL no campo acima. O PickShade converte com as fórmulas do CSS Color 4 enquanto você digita, e um clique copia o valor Flutter / Compose.

A conversão de HSL para Flutter / Compose é exata?

A matemática é exata, e o resultado só é arredondado para exibição, com dígitos suficientes para voltar à mesma cor. Se a cor não couber no gamut de destino, o PickShade avisa e mostra a cor mais próxima que cabe.

Dá para ver outros formatos ao mesmo tempo?

Sim. Todos os outros formatos, incluindo OKLCH, Display P3, Tailwind, SwiftUI, Flutter e Android, aparecem abaixo do resultado e são copiados com um clique.

Este conversor é grátis?

Sim. É grátis, não pede cadastro e roda inteiramente no seu navegador.