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

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

Resultados de ejemplo

1 Ejemplos

Convertir un azul de marca a OKLCH y revisar gamut

Muestra HEX/RGB/HSL/OKLCH/Display-P3 con diagnóstico de gamut.

Color converter with OKLCH, P3, and gamut diagnostics.
Ver parámetros de entrada
{ "colorInput": "#3b82f6", "inputFormat": "auto", "clipMode": "auto" }

Datos clave

Categoría
Diseño y color
Tipos de entrada
text, select, number
Tipo de salida
html
Cobertura de muestras
1
API disponible
Yes

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

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

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.
Configuración de ejemplo
{
  "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.
Configuración de ejemplo
{
  "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.

Probar con muestras

design
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
title token color
sample

Hubs relacionados

Herramientas de conversion de espacios de color para web e impresion
Herramientas reunidas para conversion de espacios de color entre web e impresion en un solo hub.
Generadores de efectos CSS, paletas y tokens de diseno
Herramientas reunidas para efectos visuales CSS, construccion de paletas y generacion de tokens de diseno en un solo hub.
Herramientas de auditoria de accesibilidad web y color accesible
Revisa problemas WCAG, orden de lector de pantalla, fallos de contraste, riesgo de vision cromatica y elecciones de color accesible en un solo hub para flujos de accesibilidad web.
Herramientas de Diseño de Color y Conversión de Espacios de Color
Comparar convertidores de color, generadores de paletas, herramientas de armonía, verificadores de accesibilidad y utilidades de ajuste de color en un solo lugar para diseñadores y desarrolladores.

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

Documentación de la API

Punto final de la solicitud

POST /es/api/tools/oklch-color-converter

Parámetros de la solicitud

Nombre del parámetro Tipo Requerido Descripción
colorInput text No -
inputFormat select No -
L number No -
C number No -
H number No -
clipMode select No -

Formato de respuesta

{
  "result": "
Processed HTML content
",
  "error": "Error message (optional)",
  "message": "Notification message (optional)",
  "metadata": {
    "key": "value"
  }
}
HTML: HTML

Documentación de MCP

Agregue este herramienta a su configuración de servidor MCP: 

{
  "mcpServers": {
    "elysiatools-oklch-color-converter": {
      "name": "oklch-color-converter",
      "description": "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",
      "baseUrl": "https://elysiatools.com/mcp/sse?toolId=oklch-color-converter",
      "command": "",
      "args": [],
      "env": {},
      "isActive": true,
      "type": "sse"
    }
  }
}

Puede encadenar múltiples herramientas, por ejemplo: `https://elysiatools.com/mcp/sse?toolId=png-to-webp,jpg-to-webp,gif-to-webp`, máximo 20 herramientas.

Si encuentra algún problema, por favor, póngase en contacto con nosotros en [email protected]