Conversor de HSL a Flutter / Compose

Pega un valor HSL y obtén Flutter / Compose al instante. Cualquier otro formato también sirve.

Desde HSL

Interpretado como HSL

Valor Flutter / ComposeColor(0xFFFF5733)

De Flutter / Compose a HSL

Ajustar el color

Matiz11°

Opacidad100 %

Luminosidad68 %

Croma0,210

Matiz34°

Todos los demás formatos

Ejemplos de HSL a Flutter / Compose

Color	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 y Flutter / Compose

HSL describe el matiz en grados y la saturación y la luminosidad en porcentaje. Es fácil de leer, pero su luminosidad no es uniforme a la vista: un amarillo al 50 % parece mucho más claro que un azul al 50 %.

Flutter y Jetpack Compose escriben un color como un número ARGB de 32 bits, como Color(0xFFFF5733). Los dos dígitos hex después de 0x son el alfa, y FF significa totalmente opaco.

Cómo funciona la conversión

Leemos el valor HSL, lo pasamos a CIE XYZ con las matrices de la especificación CSS Color 4 y de ahí a Flutter / Compose. Los valores fuera de la gama de destino se ajustan con el algoritmo de CSS Color 4, que conserva la luminosidad y el matiz y reduce el croma.

Preguntas y respuestas

¿Cómo convierto HSL a Flutter / Compose?

Pega o escribe un valor HSL en el campo de arriba. PickShade lo convierte con las fórmulas de CSS Color 4 mientras escribes, y un clic copia el valor Flutter / Compose.

¿La conversión de HSL a Flutter / Compose es exacta?

El cálculo es exacto y el resultado solo se redondea para mostrarlo, con suficientes decimales para volver al mismo color. Si el color no cabe en la gama de destino, PickShade te avisa y muestra el color más cercano que sí cabe.

¿Puedo obtener otros formatos a la vez?

Sí. Todos los demás formatos, incluidos OKLCH, Display P3, Tailwind, SwiftUI, Flutter y Android, aparecen bajo el resultado y se copian con un clic.

¿Este conversor es gratuito?

Sí. Es gratis, no necesita registro y funciona entero en tu navegador.