* Tu contenido no se transfiere al servidor. Todos los cálculos se realizan directamente en el 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);
}

Sobre la conversión de color

Un conversor de color traduce el mismo color entre los formatos usados en web, impresión y diseño: HEX para CSS, RGB/HSL para ajustes en vivo, CMYK para impresión, LAB/OKLCH para uniformidad perceptual.

Espacios de color
HEX: notación RGB compacta de 6/8 dígitos. El formato predeterminado para CSS.
RGB: primarias aditivas 0–255. 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; igual distancia numérica equivale a igual distancia visual.
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á muy extendido pero no tiene en cuenta completamente la percepción del 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).
  • Suelta una imagen en la pestaña Paleta para extraer sus 6 colores dominantes mediante cuantización por corte mediano.
  • Tailwind v4 emite colores en OKLCH para suavidad perceptual. Copia el bloque @theme para alinearte con ese flujo de trabajo.