# Conversor de Color OKLCH Convierte entre HEX, RGB, HSL, OKLCH y Display-P3 con la matemática de CSS Color 4, con lectura de luminosidad/croma/tono, comprobación de gamut sRGB y Display-P3, y sugerencia de recorte fuera de gamut > Página canónica: https://elysiatools.com/es/tools/oklch-color-converter - **Categoría:** Design - **Palabras clave:** oklch, espacio de color, p3, gamut, convertir ## Descripción general Pega cualquier color (HEX, rgb(), hsl() u oklch()) o ajusta los valores OKLCH L/C/H directamente. La herramienta convierte entre todos los espacios modernos con las matrices de CSS Color 4 y muestra: - Valores HEX, sRGB 8-bit, sRGB lineal, HSL, XYZ D65, OKLab y OKLCH - Representación Display-P3 - Si el color está dentro de sRGB, dentro de Display-P3 pero fuera de sRGB, o fuera de ambos - Una sugerencia de recorte por reducción de croma (el OKLCH dentro de gamut más cercano) cuando el color está fuera de sRGB Por qué OKLCH: su canal L coincide con la luminosidad percibida y sus C/h son croma y tono, por lo que ajustar luminosidad o saturación no desplaza el tono, a diferencia de HSL. Esto lo convierte en el mejor espacio para construir paletas perceptualmente uniformes. Las salidas son CSS listas para copiar, incluyendo `color(display-p3 ...)` y `oklch()`. ## Entradas - **Entrada de color** (text): #3b82f6 · rgb(59 130 246) · hsl(217 91% 60%) · oklch(0.62 0.19 256) - **Formato de entrada** (select) - **Luminosidad L (%)** (number): 0–100 (OKLCH 0–1) - **Croma C** (number): e.g. 0.19 (typically 0–0.4) - **Tono H (°)** (number): 0–360 - **Gamut de referencia** (select) ## Cuándo usarlo - Cuando necesitas migrar colores HEX, RGB o HSL tradicionales al formato moderno OKLCH para aprovechar la uniformidad perceptual en CSS. - Al diseñar interfaces para pantallas modernas y requerir la validación de colores dentro del espacio de color extendido Display-P3. - Para corregir colores que exceden el gamut sRGB estándar mediante un recorte preciso de croma sin alterar el tono original. ## Cómo funciona - Introduce un código de color en el campo de entrada (HEX, rgb, hsl u oklch) o ajusta directamente los valores de Luminosidad (L), Croma (C) y Tono (H). - El sistema procesa el color utilizando las matrices de conversión de CSS Color 4 para calcular sus equivalencias en múltiples espacios de color. - La herramienta evalúa la compatibilidad de gama (gamut) y, si el color queda fuera de sRGB o Display-P3, calcula automáticamente la alternativa más cercana reduciendo el croma. - Copia los códigos CSS resultantes listos para usar, incluyendo las funciones oklch() y color(display-p3 ...). ## Casos de uso - Creación de sistemas de diseño con paletas de colores accesibles y contrastes uniformes basados en luminosidad perceptual. - Adaptación de colores de marca corporativos para pantallas de gama amplia (Wide Gamut) usando Display-P3. - Depuración y corrección de colores CSS que se muestran apagados o incorrectos debido a limitaciones de gamut en navegadores antiguos. ## Preguntas frecuentes ### ¿Qué ventaja tiene OKLCH sobre HSL? OKLCH alinea la luminosidad con la percepción humana, lo que significa que cambiar la luminosidad o el croma no altera el tono del color. ### ¿Qué ocurre si un color está fuera del gamut sRGB? La herramienta detecta la incompatibilidad y sugiere un recorte reduciendo el croma para encontrar el color equivalente más cercano dentro de sRGB. ### ¿Qué formatos de entrada soporta el conversor? Soporta formatos HEX, rgb(), hsl(), oklch() y la manipulación directa de los canales L, C y H. ### ¿Cómo se calcula la conversión a Display-P3? Se realiza mediante las matrices de transformación lineal especificadas en la especificación CSS Color Level 4. ### ¿Puedo copiar el código CSS directamente? Sí, la herramienta genera declaraciones CSS válidas listas para copiar, como oklch(L C H) y color(display-p3 R G B). ## Herramientas relacionadas - [Convertidor de espacios de color](https://elysiatools.com/es/tools/color-space-converter): Convierte colores entre HEX, RGB, HSL, CIELAB y Display-P3 con salida CSS y control de gama. - [Conversor de color CMYK](https://elysiatools.com/es/tools/cmyk-converter): Convierte colores entre HEX, RGB, HSL y CMYK. - [Extractor de paleta de color desde imagen](https://elysiatools.com/es/tools/image-color-palette-extractor): Sube una imagen, extrae colores dominantes y exporta tokens listos para codigo con verificacion de contraste - [Herramienta de Colores Complementarios Divididos](https://elysiatools.com/es/tools/color-split-complement): Crear contraste harmonioso con esquemas de colores complementarios divididos usando un color base y dos colores adyacentes a su complemento - [Resolutor de nombres de color CSS](https://elysiatools.com/es/tools/css-color-name-resolver): Resuelve cualquier color hex a su color CSS con nombre más cercano con distancia CIEDE2000 real, y explora toda su familia de color. - [Visualizador de Easing y Animación CSS](https://elysiatools.com/es/tools/css-easing-visualizer): Visualiza una curva de easing cubic-bezier de CSS, previsualízala en posición/opacidad/escala, elige presets y exporta CSS listo para copiar - [Sincronizador de paleta Tailwind](https://elysiatools.com/es/tools/tailwind-color-palette-sync): Introduce HEX, elige esquema de nombres (escala 50–950 / nombre único / anidamiento) y genera el fragmento theme.extend.colors de tailwind.config.ts con niveles WCAG AA/AAA por color. Modo oscuro opcional. - [Conversor Absorbancia↔Transmitancia (A = −log₁₀T)](https://elysiatools.com/es/tools/absorbance-transmittance-converter): Convierte en ambos sentidos entre absorbancia y transmitancia: A = −log₁₀(T), T = 10⁻ᴬ, %T = 100·T y A = 2 − log₁₀(%T). Acepta absorbancia A, transmitancia porcentual %T o transmitancia decimal T y devuelve las tres representaciones a la vez. Valores guía: A=0 → %T=100; A=1 → %T=10; A=0,301 → %T=50. Una absorbancia negativa implicaría %T > 100 %, imposible en espectrofotometría estándar, y se rechaza. ## Ejemplos - [Ejemplos de Códigos de Color](https://elysiatools.com/es/samples/color-code): Colección de códigos de color en varios formatos (Hex, RGB, HSL, colores con nombre) para pruebas de validación - [Ejemplos de Procesamiento de Imágenes Web Python](https://elysiatools.com/es/samples/web-image-processing-python): Ejemplos de procesamiento de imágenes Web Python usando PIL/Pillow incluyendo lectura, guardado, redimensionamiento y conversión de formato - [Ejemplos de Procesamiento de Imágenes Android Java](https://elysiatools.com/es/samples/android-image-processing-java): Ejemplos de procesamiento de imágenes Android Java incluyendo lectura/escritura, escalado y conversión de formato - [Ejemplos de Procesamiento de Imágenes Android Kotlin](https://elysiatools.com/es/samples/android-image-processing-kotlin): Ejemplos de procesamiento de imágenes Android Kotlin incluyendo lectura/escritura, escalado y conversión de formato