Convertidor de color OKLCH

• Conversión OKLCH instantánea: el convertidor OKLCH actualiza todos los formatos de salida con cada movimiento del control deslizante, sin necesidad de presionar ningún botón. Ajuste la luminosidad, el croma y el tono y obtenga instantáneamente valores HEX, RGB, HSL y OKLab. La muestra de color en tiempo real muestra exactamente cómo aparecerá el color OKLCH en la pantalla.
• Espacio de color perceptualmente uniforme: OKLCH es un espacio de color perceptualmente uniforme: pasos numéricos iguales corresponden a diferencias de color percibidas iguales, a diferencia de HSL o RGB. El convertidor OKLCH facilita el trabajo con este moderno formato CSS Color Level 4 para obtener mejores degradados, escalas de color y opciones de color accesibles.
• 100% privado: sin carga: todas las conversiones se realizan localmente en su navegador utilizando JavaScript puro. Sus valores de color nunca salen de su dispositivo y nunca se envían a ningún servidor: seguro para proyectos de clientes y sistemas de diseño propietarios.
• Gratis y sin límites: convierta colores OKLCH ilimitados sin registro, suscripción ni límites de uso. El convertidor OKLCH es completamente gratuito para siempre y no hay anuncios que bloqueen la interfaz. Incluye detección de gama y sugerencias de gama más cercana.

• Desarrollo de CSS moderno: los desarrolladores de frontend utilizan el convertidor OKLCH para crear y verificar colores en CSS moderno. Ahora que oklch() es compatible con todos los principales navegadores, el conversor OKLCH le ayuda a escribir códigos de colores más limpios y fáciles de mantener utilizando el espacio de color perceptualmente uniforme.
• Creación de gradientes suaves: OKLCH produce gradientes significativamente más suaves y visualmente más precisos que sRGB o HSL. Utilice el conversor OKLCH para encontrar los valores correctos de luminosidad, croma y tono para paradas de degradado que realicen una transición natural sin puntos medios confusos.
• Escalas de colores accesibles: los especialistas en accesibilidad utilizan el convertidor OKLCH porque su uniformidad de percepción lo hace ideal para generar escalas de colores accesibles. Pasos iguales en la luminosidad de OKLCH corresponden a pasos iguales de contraste percibido, lo que hace que las rampas de color que cumplen con las WCAG sean mucho más fáciles de crear.
• Fichas de color del sistema de diseño: los ingenieros de sistemas de diseño utilizan el convertidor OKLCH para definir fichas de color de una manera perceptualmente significativa. El espacio de color OKLCH facilita la creación de escalas de color sistemáticas donde cada paso tiene un peso visual consistente en todos los tonos.
• Investigación y ciencia del color: los investigadores y científicos del color utilizan el convertidor OKLCH para explorar el espacio de color OKLab/OKLCH. La herramienta proporciona valores OKLab sin procesar junto con los formatos de salida estándar, lo que la hace útil para comprender las matemáticas del espacio de color y los modelos de percepción.
• Migración de CSS heredado a moderno: al migrar sistemas de color hexadecimales o rgb() heredados a oklch() moderno, utilice el convertidor OKLCH para comprender cuáles son los valores OKLCH equivalentes. Esto le ayuda a desarrollar la intuición para el nuevo espacio de color mientras adopta gradualmente la sintaxis CSS Color Level 4.

OKLCH (Lightness-Chroma-Hue) es un espacio de color moderno introducido por Björn Ottosson en 2020. Es parte del nivel de color CSS 4 y está diseñado para ser perceptualmente uniforme, lo que significa que cambios numéricos iguales en los valores de OKLCH producen diferencias de color percibidas iguales. Esta es una mejora significativa con respecto a los espacios de color más antiguos como HSL y sRGB, que no son perceptualmente uniformes y pueden producir resultados visuales inconsistentes al interpolar colores.

El conversor OKLCH admite toda la canalización de OKLCH: convierte entre formatos OKLCH, OKLab (el espacio de coordenadas rectangular subyacente), sRGB lineal y sRGB estándar, incluidos HEX, RGB y HSL. Todas las conversiones utilizan las matemáticas matriciales exactas de Ottosson sin aproximaciones.

1. Ajuste los controles deslizantes de OKLCH: establezca Luminosidad (L: 0-1), Croma (C: 0-0.4+) y Tono (H: 0-360°) usando los controles deslizantes interactivos o entradas numéricas. También puede hacer clic en cualquier chip de color de muestra para cargar instantáneamente un valor OKLCH preestablecido. La transparencia alfa es compatible con colores semitransparentes.
2. La conversión se ejecuta en tiempo real: a medida que ajusta cualquier control deslizante, el valor OKLCH se convierte a través de OKLab a sRGB lineal y luego a formatos HEX, RGB y HSL. Todos los valores se actualizan instantáneamente sin necesidad de presionar ningún botón. La muestra de color muestra una vista previa visual del color convertido.
3. Comprobación de gama realizada automáticamente: el convertidor OKLCH detecta automáticamente si el color queda fuera de la gama sRGB. Si es así, se muestra una advertencia junto con el color más cercano dentro de la gama logrado al reducir el croma mientras se mantiene constante la luminosidad y el tono.
4. Copie cualquier valor: haga clic en el botón Copiar junto a cualquier fila de salida o tarjeta de formato para copiar ese valor específico, o use "Copiar todos los valores" para copiar los datos de color completos, incluidos los componentes sin procesar de OKLab.

• Luminosidad (L): Varía de 0 (negro) a 1 (blanco). A diferencia de la ligereza de HSL, la ligereza de OKLCH se asemeja mucho a la percepción humana. Una luminosidad de 0,5 parece visualmente a medio camino entre el blanco y el negro, independientemente del tono o croma.
• Croma (C): controla la intensidad o saturación del color. La mayoría de los colores sRGB tienen valores de croma entre 0 y 0,25, aunque algunos morados y cian intensos pueden alcanzar hasta 0,3. Es cada vez más probable que los valores superiores a 0,3 estén fuera de la gama sRGB. El máximo teórico para el croma del OKLCH no tiene límites.
• Tono (H): el ángulo de color de 0 a 360 grados, que coincide con los mismos ángulos de tono que OKLab. 0° = rojo/rosa, 90° = amarillo, 180° = verde, 270° = azul. Los tonos OKLCH son perceptualmente uniformes: pasos angulares iguales producen diferencias de tono percibidas iguales.
• Alfa (A): controla la transparencia de 0 (completamente transparente) a 1 (completamente opaco). El valor alfa se pasa a través del proceso de conversión a todos los formatos de salida, por lo que puede usar el color resultante en cualquier contexto CSS que requiera transparencia.

OKLCH vs HSL: HSL no es perceptualmente uniforme: dos colores con la misma luminosidad HSL pueden verse dramáticamente diferentes en brillo (por ejemplo, el amarillo en L=50% se ve mucho más brillante que el azul en L=50%). OKLCH soluciona este problema fundamental. HSL también produce puntos medios turbios al interpolar entre dos colores, mientras que los gradientes OKLCH mantienen una saturación y una calidad visual constantes.

OKLCH vs LCH: LCH (basado en CIE L*a*b*) ha estado disponible en CSS durante más tiempo, pero tiene un defecto importante: puede producir colores no válidos al medir la linealidad del tono. OKLCH fue diseñado específicamente para ser más robusto y representar mejor cómo el sistema visual humano percibe el color. Ambos son compatibles con CSS moderno, pero OKLCH es la opción recomendada para proyectos nuevos.

OKLCH vs sRGB: sRGB es el espacio de color estándar para contenido web, pero depende del dispositivo y no es perceptualmente uniforme. OKLCH es un espacio de color independiente del dispositivo que puede representar colores fuera de la gama sRGB (pantallas de gama amplia). El conversor OKLCH le ayuda a comprender cuándo sus colores superan el sRGB y le muestra la alternativa dentro de la gama más cercana.