Convertidor de Color HEX ↔ RGB

Los colores HEX son 3 pares de dígitos hexadecimales que representan los canales Rojo, Verde, Azul. #RRGGBB. Cada par es un número en base 16 (0–FF = 0–255 en decimal). Conversión: divida el hex en pares, convierta cada uno de base 16 a base 10. Ejemplo: #1A2B3C → R=0x1A=26, G=0x2B=43, B=0x3C=60 → rgb(26, 43, 60). Hex corto #RGB: cada dígito se duplica. #F3A → #FF33AA → rgb(255, 51, 170). CSS acepta ambas formas: #FF33AA y #F3A son idénticas. Programáticamente: parseInt("1A", 16) = 26.

HSL significa Tono (Hue), Saturación (Saturation), Luminosidad (Lightness) — un modelo de color más intuitivo que RGB. Tono: 0–360 grados en una rueda de colores. 0/360=rojo, 60=amarillo, 120=verde, 180=cian, 240=azul, 300=magenta. Saturación: 0–100%. 0% = gris, 100% = totalmente saturado (color vivo). Luminosidad: 0–100%. 0% = negro, 100% = blanco, 50% = color puro. CSS: hsl(240, 100%, 50%) = azul puro. Ventaja frente a RGB: puede crear variaciones intuitivamente — para aclarar un color, aumente la luminosidad. Para crear un pastel, reduzca la saturación. Para rotar el tono, sume/reste grados. Se usa en sistemas de diseño para generar paletas de colores.

HSV (Hue, Saturation, Value) también se llama HSB (Hue, Saturation, Brightness). Similar a HSL pero diferente: Valor/Brillo: 0=negro, 100%=totalmente brillante (color puro o blanco dependiendo de la saturación). HSV frente a HSL: En HSL, 100% de luminosidad siempre es blanco independientemente de la saturación. En HSV, 100% de valor con 0% de saturación es blanco, con 100% de saturación es el tono puro. HSV es el modelo usado por la mayoría de los selectores de color en herramientas de diseño (Photoshop, Figma, etc.). Es más natural para seleccionar colores: elija el tono, luego seleccione la saturación y el brillo en un cuadrado 2D.

El canal alfa añade transparencia a los colores. Rango: 0 (completamente transparente) a 1 (completamente opaco). Formatos CSS con alfa: rgba(255, 100, 50, 0.5) — 50% transparente. hsla(120, 60%, 50%, 0.8) — 20% transparente. Hex con alfa: #RRGGBBAA (hex de 8 dígitos). #FF000080 = rojo al ~50% de opacidad (0x80 = 128 = 128/255 ≈ 0,5). Corto: #RGBA (4 dígitos). #FF08 = rojo al ~53% de opacidad. CSS moderno: color(display-p3 1 0 0 / 0.5) para gama amplia. La propiedad CSS opacity frente a alfa: opacity afecta al elemento completo y a sus hijos; el color alfa afecta solo a esa propiedad específica. opacity: 0.5 en un div con texto hace que tanto el fondo como el texto sean transparentes; background-color: rgba(0,0,0,0.5) solo afecta al fondo.

CSS tiene más de 140 colores con nombre. Bien conocidos: red, blue, green, white, black, gray, orange, purple, pink, cyan. Algunos con nombres curiosos: rebeccapurple (#663399, añadido en honor a la hija del autor de la especificación CSS Eric Meyer), cornflowerblue (#6495ED), papayawhip (#FFEFD5), lawngreen (#7CFC00). Cuándo usar: los colores con nombre están bien para prototipos rápidos. En producción: use HEX o HSL para consistencia y compatibilidad con herramientas. HSL es mejor para sistemas de diseño — puede generar variantes de paleta programáticamente: hsl(210, 80%, 20%/30%/40%/50%/60%) para una escala de azul. Evite los colores con nombre en tokens de diseño ya que ocultan los valores reales.