Como usar un conversor de colores: HEX, RGB, HSL y mas formatos

HEX: Representacion hexadecimal de RGB. #FF5733 = R:255, G:87, B:51. Formato mas comun en CSS y diseno web. 6 caracteres (o 3 abreviados: #F53).

RGB: Rojo, Verde, Azul. Valores 0-255 para cada canal. rgb(255, 87, 51). Modelo aditivo — la suma de todos es blanco.

HSL: Tono (Hue 0-360°), Saturacion (0-100%), Luminosidad (0-100%). hsl(14, 100%, 60%). Mas intuitivo que RGB para ajustar colores: quieres mas claro? sube L. Menos saturado? baja S.

CMYK: Cyan, Magenta, Yellow, Key(Black). Modelo sustractivo para impresion. Los colores en pantalla (RGB) pueden no ser reproducibles en CMYK.

Convierte entre todos los formatos con el conversor de colores de NexTools.

Con el conversor de NexTools:

Paso 1: Ingresa un color en cualquier formato (HEX, RGB, HSL).

Paso 2: Ve instantaneamente la conversion a todos los demas formatos.

Paso 3: Copia el valor que necesites con un clic.

Tambien puedes usar el color picker visual para seleccionar colores graficamente. Todo se procesa en tu navegador.

HEX: CSS, diseno web, Figma, Sketch. El estandar de facto en desarrollo frontend.

RGB/RGBA: CSS cuando necesitas transparencia (alpha). rgba(255, 87, 51, 0.5) = 50% de opacidad.

HSL/HSLA: CSS moderno. Mas facil de manipular programaticamente: crear paletas variando H, crear tonos variando L, crear versiones apagadas bajando S.

CMYK: Impresion profesional. InDesign, Illustrator. Si tu diseno va a impresion, SIEMPRE verifica los colores en CMYK.

Tailwind CSS: Usa clases predefinidas (bg-red-500) pero para colores custom necesitas HEX o RGB en la config.

Contraste: WCAG 2.1 requiere ratio minimo de 4.5:1 para texto normal y 3:1 para texto grande. Un texto gris claro (#999) sobre fondo blanco tiene ratio 2.85:1 — FALLA accesibilidad.

Paleta monocromatica: Un solo tono (H fijo), variando S y L. Ejemplo: azul oscuro para fondos, azul medio para botones, azul claro para hover.

Complementarios: Colores opuestos en la rueda (H + 180°). Alto contraste. Ejemplo: azul (#0066FF) y naranja (#FF9900).

Triada: 3 colores equidistantes (H, H+120°, H+240°). Vibrante pero equilibrado.

Si trabajas con gradientes CSS, consulta nuestra guia sobre generador de gradientes. Para sombras CSS, el generador de sombras.

Defina colores como variables CSS (custom properties) para mantener consistencia:

:root {
  --color-primary: hsl(14, 100%, 60%);
  --color-primary-light: hsl(14, 100%, 80%);
  --color-primary-dark: hsl(14, 100%, 40%);
}

Por que HSL es ideal para variables: Para crear variantes claras/oscuras, solo cambias el valor L. Con HEX tendrias que calcular cada variante manualmente.

Dark mode: Invierte las variables. El fondo claro se vuelve oscuro, el texto oscuro se vuelve claro. Con HSL, es tan simple como invertir L: L:95% → L:10% para fondos, L:10% → L:90% para texto.

Gamut de color: No todos los monitores muestran los mismos colores. sRGB es el estandar web (cubre ~35% de colores visibles). Display P3 (MacBooks, iPhones) cubre ~50%. Colores fuera del gamut del dispositivo se "clipean" al color mas cercano disponible.

CSS color nivel 4: color(display-p3 1 0.5 0) permite usar colores fuera de sRGB en navegadores que lo soporten. Nuevo en 2024-2025.

oklch(): El formato de color mas moderno en CSS. Perceptualmente uniforme — cambiar L realmente cambia el brillo percibido. oklch(70% 0.15 30). Soportado en todos los navegadores modernos desde 2024.

Color picker del navegador: Chrome DevTools incluye un color picker que muestra HEX, RGB, HSL y permite ajustar visualmente.

Coolors.co: Generador de paletas de colores. Genera 5 colores armonicos con un clic.

Contrast checker: WebAIM tiene un verificador de contraste WCAG gratuito.

NexTools: El conversor de colores para conversiones rapidas entre formatos. Complementa con el generador de gradientes para crear transiciones de color CSS.

La accesibilidad de color no es opcional — es ley en muchos paises (ADA en EE.UU., EAA en UE):

Requisitos WCAG 2.1:

• Texto normal: contraste minimo 4.5:1
• Texto grande (+18px bold o +24px): minimo 3:1
• Elementos UI (botones, inputs): minimo 3:1 contra fondo

No depender solo del color: El daltonismo afecta al 8% de hombres. Un boton rojo de "error" y verde de "exito" son indistinguibles para ellos. Agrega iconos o texto ademas de color.

Usa la calculadora de porcentajes para verificar ratios de contraste manualmente si no tienes herramienta especializada.