No se envían datos a servidores — Todo el procesamiento se realiza en tu navegador
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.

Sobre la conversión 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.

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

Herramientas relacionadas

Compresor de imágenesConversor de base numérica