Conversor de HSL para SwiftUI

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

De HSL

Lido como HSL

Valor SwiftUIColor(red: 1, green: 0.341, blue: 0.2)

SwiftUI para HSL

Ajustar a cor

Matiz11 °

Opacidade100%

Luminosidade68%

Croma0,210

Matiz34 °

Todos os outros formatos

Exemplos de HSL para SwiftUI

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

Sobre HSL e SwiftUI

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%.

O SwiftUI descreve uma cor com vermelho, verde e azul de 0 a 1, escrita como Color(red: 1, green: 0.341, blue: 0.2). A opacidade entra pelo parâmetro opacity.

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 SwiftUI. 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 SwiftUI?

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 SwiftUI.

A conversão de HSL para SwiftUI é 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.