Elysia Tools

Explora herramientas, ejemplos, explicaciones visuales y guías temáticas en un solo espacio claro.

Categorías populares

Temas

Idioma
ZHESPTRUFRDEEN

Elysia Tools

Navegación

Design

Conversor de Color OKLCH

· Última actualización：2026-06-18

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

Detalles

Qué te ayuda a hacer esta herramienta

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().

Ejecución

Ejecutar esta herramienta

Completa el formulario, ejecuta la herramienta y revisa el resultado en un solo lugar.

Ejemplos

Ejemplos que encajan con esta herramienta

Relacionado

Continuar con herramientas y temas relacionados

Escrito por el equipo de Elysia Tools
Math502
Color214
HTML/CSS86
Hue55
Espacio de color53
RGB50
CSS48
HEX40
Lightness34
HSL26
sRGB22
Chroma21

Guía de uso de la herramienta

Conoce cuándo usar esta herramienta, qué admite y cómo la aplican los usuarios.

Datos clave

Categoría
Design
Tipos de entrada
text, select, number
Tipo de salida
html
Cobertura de ejemplos
4
API disponible
Sí

Resumen

El Conversor de Color OKLCH permite transformar de forma bidireccional códigos de color entre HEX, RGB, HSL, OKLCH y Display-P3 utilizando las fórmulas matemáticas de CSS Color 4. La herramienta analiza si el color se encuentra dentro del gamut sRGB o Display-P3 y ofrece una sugerencia de recorte mediante reducción de croma para colores fuera de gama, facilitando la creación de paletas de diseño perceptualmente uniformes.

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

  1. 1Introduce 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).
  2. 2El sistema procesa el color utilizando las matrices de conversión de CSS Color 4 para calcular sus equivalencias en múltiples espacios de color.
  3. 3La 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.
  4. 4Copia 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.

Ejemplos

1. Conversión de azul de marca a OKLCH

Diseñador de UI

Contexto

Un diseñador necesita convertir el color principal de la marca (#3b82f6) a OKLCH para crear una escala de grises y tonos consistentes.

Problema

Obtener los valores exactos de luminosidad, croma y tono del color HEX original.

Cómo usarlo

Introduce #3b82f6 en el campo de entrada de color y selecciona el formato automático.

{
  "colorInput": "#3b82f6",
  "inputFormat": "auto"
}

Resultado

Se obtienen los valores equivalentes en OKLCH y Display-P3, confirmando que el color está dentro del gamut sRGB.

2. Ajuste de color fuera de gama (Out of Gamut)

Desarrollador Frontend

Contexto

Un desarrollador define un color verde muy brillante en OKLCH que se ve diferente en distintas pantallas.

Problema

El color excede el espacio sRGB estándar y requiere un ajuste de croma sin perder el tono.

Cómo usarlo

Introduce oklch(0.85 0.25 140) en la entrada y revisa la advertencia de gamut.

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

Inicio
Herramientas3197
Ejemplos593
Visualizaciones461
Visores de archivos103
Temas229
Etiquetas333
Imágenes, audio y video655

Herramientas de procesamiento, conversión y optimización de imágenes, audio y video

Matemáticas, fechas y finanzas644

Calculadoras, herramientas numéricas, lógica de fechas, estadística y finanzas

Diseño y color296

Herramientas de color, maquetación, gráficos, estilo visual y apoyo al diseño

Texto y redacción209

Herramientas de redacción, limpieza, formato, extracción y análisis de texto

Desarrollo y Web193

Utilidades para desarrolladores, red, depuración web y automatización

Conversión y codificación175

Herramientas de conversión de formatos, archivos, unidades, archivos comprimidos y codificación

Estructurar una captura de interfaz, revisarla y entregarla a desarrollo
Boceto de piano, revisión MIDI y entrega de una maqueta de escucha
Revisión de texturas retro y entrega de recursos
Revisión y entrega de guías de procedimiento con capturas
Revisión visual de un rediseño adaptable y entrega de evidencias

© 2026 Elysia Tools. Todos los derechos reservados.

DocumentaciónPreciosAcerca deTérminos de servicioPolítica de privacidadCookiesContacto
Validación

Ejemplos de Códigos de Color

Colección de códigos de color en varios formatos (Hex, RGB, HSL, colores con nombre) para pruebas de validación

Python

Ejemplos de Procesamiento de Imágenes Web Python

Ejemplos de procesamiento de imágenes Web Python usando PIL/Pillow incluyendo lectura, guardado, redimensionamiento y conversión de formato

Java

Ejemplos de Procesamiento de Imágenes Android Java

Ejemplos de procesamiento de imágenes Android Java incluyendo lectura/escritura, escalado y conversión de formato

Kotlin

Ejemplos de Procesamiento de Imágenes Android Kotlin

Ejemplos de procesamiento de imágenes Android Kotlin incluyendo lectura/escritura, escalado y conversión de formato

Design

Convertidor de espacios de color

Convierte colores entre HEX, RGB, HSL, CIELAB y Display-P3 con salida CSS y control de gama.

Design

Conversor de color CMYK

Convierte colores entre HEX, RGB, HSL y CMYK.

Design

Extractor de paleta de color desde imagen

Sube una imagen, extrae colores dominantes y exporta tokens listos para codigo con verificacion de contraste

Design

Herramienta de Colores Complementarios Divididos

Crear contraste harmonioso con esquemas de colores complementarios divididos usando un color base y dos colores adyacentes a su complemento

{
  "colorInput": "oklch(0.85 0.25 140)",
  "clipMode": "srgb"
}

Resultado

La herramienta muestra que está fuera de sRGB y genera la sugerencia de recorte reduciendo el croma para mantener el tono verde exacto dentro de los límites seguros.