Conversor de Flutter / Compose a OKLCH

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

Desde Flutter / Compose

Interpretado como código Flutter

Valor OKLCHoklch(68.036% 0.21001 33.692)

De OKLCH a Flutter / Compose

Ajustar el color

Matiz11°

Opacidad100 %

Luminosidad68 %

Croma0,210

Matiz34°

Todos los demás formatos

Ejemplos de Flutter / Compose a OKLCH

Color	Flutter / Compose	OKLCH
	Color(0xFFFF0000)	oklch(62.796% 0.25768 29.234)
	Color(0xFF00FF00)	oklch(86.644% 0.29483 142.495)
	Color(0xFF0000FF)	oklch(45.201% 0.31321 264.052)
	Color(0xFFFFFFFF)	oklch(100% 0 0)
	Color(0xFF000000)	oklch(0% 0 0)
	Color(0xFF808080)	oklch(59.987% 0 0)
	Color(0xFFFF5733)	oklch(68.036% 0.21001 33.692)
	Color(0xFF3B82F6)	oklch(62.308% 0.18801 259.815)
	Color(0xFF10B981)	oklch(69.587% 0.14907 162.48)
	Color(0xFFF59E0B)	oklch(76.859% 0.16466 70.08)
	Color(0xFF8B5CF6)	oklch(60.563% 0.21892 292.717)
	Color(0xFFEC4899)	oklch(65.592% 0.21177 354.308)

Sobre Flutter / Compose y OKLCH

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.

OKLCH es OKLab en forma polar: luminosidad, croma y matiz. Tailwind CSS v4 lo usa en toda su paleta porque al cambiar la luminosidad el matiz se mantiene estable.

Cómo funciona la conversión

Leemos el valor Flutter / Compose, lo pasamos a CIE XYZ con las matrices de la especificación CSS Color 4 y de ahí a OKLCH. 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 Flutter / Compose a OKLCH?

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

¿La conversión de Flutter / Compose a OKLCH 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.