¿Qué es el espacio de color OKLCH?

OKLCH es un espacio de color perceptualmente uniforme que coincide mejor con la visión humana que HSL o RGB. Produce gradientes de luminosidad más consistentes y paletas accesibles.

¿Puedo extraer colores de una imagen?

Sí. Arrastra y suelta cualquier imagen en el área de extracción de paleta para obtener los colores dominantes. También puedes simular deficiencias de visión de color (protanopia, deuteranopia, tritanopia).

Conversor y selector de color - HEX, RGB, HSL, OKLCH

No se envían datos a servidores — Todo el procesamiento se realiza en tu navegador

Visión:

HEX

RGB

HSL

HSV

CMYK

LAB

OKLCH

HSV es solo de referencia. CSS no tiene función hsv(), usa HSL.

Variable CSS

--color-primary: #06d6a0;

Clase Tailwind

bg-[#06d6a0]

Tailwind v4 @theme

@theme {
  --color-primary: oklch(78% 0.16 167);
}

El Conversor de color es una herramienta gratuita online para convertir entre HEX, RGB, HSL, OKLCH y otros espacios de color. Incluye selector visual, extracción de paleta de imagen, verificador de contraste WCAG y vista previa de daltonismo. Se ejecuta completamente en tu navegador.

¿Qué es la herramienta de Color?

Una utilidad de color completa que convierte entre 7 espacios de color (HEX, RGB, HSL, HSV, CMYK, LAB, OKLCH), genera armonías de color, verifica ratios de contraste para accesibilidad, simula deficiencias de visión de color y extrae paletas de imágenes.

Casos de uso comunes

Seleccionar y convertir colores para desarrollo web — obtén el valor exacto HEX, RGB, HSL u OKLCH que necesitas para CSS o Tailwind.

Verificar el contraste del texto contra un color de fondo para cumplir con las directrices de accesibilidad WCAG (AA/AAA) o el estándar más reciente APCA.

Extraer colores dominantes de una imagen para construir una paleta de diseño cohesiva, y luego generar armonías complementarias, análogas o triádicas.

Espacios de color

Esta herramienta de color convierte entre 7 espacios de color, genera armonías, verifica ratios de contraste (WCAG y APCA), simula daltonismo y extrae paletas de imágenes. Consulta el [Conversor de base numérica](/numbase) para cálculos hexadecimales, o el [Compresor de imágenes](/image) para procesamiento de imágenes.

Espacios de color

HEX — notación RGB compacta de 6/8 dígitos. La opción por defecto para CSS.

RGB — primarias aditivas de 0 a 255. Se mapea directamente a los píxeles de la pantalla.

HSL — tono/saturación/luminosidad. Más fácil de entender para humanos que RGB.

HSV — tono/saturación/valor. Común en herramientas de diseño, pero no es una función CSS.

CMYK — primarias sustractivas usadas en impresión. Aproximado al convertir desde RGB.

LAB — perceptualmente uniforme; distancia numérica igual ≈ distancia visual igual.

OKLCH — espacio perceptual moderno; preferido por Tailwind v4 y CSS Color Module Level 4.

Contraste (WCAG vs APCA)

WCAG 2.1 usa un ratio de luminancia (1:1 a 21:1) con umbrales para AA/AAA. Está ampliamente soportado pero no tiene en cuenta completamente la percepción de texto pequeño o el modo oscuro.

APCA es un candidato para WCAG 3 con una puntuación Lc consciente de la polaridad. Se correlaciona mejor con la legibilidad para texto fino o pequeño.

Consejos

Usa el cuentagotas para seleccionar un color de cualquier píxel de tu pantalla (navegadores Chromium).
Arrastra una imagen a la pestaña Paleta para extraer sus 6 colores dominantes mediante cuantización de corte mediano.
Tailwind v4 emite colores en OKLCH para suavidad perceptual — copia el bloque @theme para alinearte con ese flujo de trabajo.

Preguntas frecuentes

Herramientas relacionadas

Redimensionador de Imágenes Compresor de Imágenes Convertidor de Imágenes Conversor de base numérica Conversor de unidades CSS Marca de Agua

Casos de uso comunes

Seleccionar y convertir colores para desarrollo web — obtén el valor exacto HEX, RGB, HSL u OKLCH que necesitas para CSS o Tailwind.

Verificar el contraste del texto contra un color de fondo para cumplir con las directrices de accesibilidad WCAG (AA/AAA) o el estándar más reciente APCA.

Extraer colores dominantes de una imagen para construir una paleta de diseño cohesiva, y luego generar armonías complementarias, análogas o triádicas.