Guía de conversión HEX, RGB, HSL para equipos de productos

Guía de Conversión HEX, RGB, HSL para Equipos de Producto

Los diseñadores entregan códigos HEX en Figma. Los ingenieros escriben RGB en el código. HSL es lo que realmente usted quiere para la manipulación programática del color. Aquí está cómo los tres formatos se relacionan y cuándo usar cada uno.

Los Tres Formatos

HEX -- #FF5733

Dos dígitos hexadecimales por canal: #RRGGBB. Cada par es 00-FF (0-255 en decimal). El estándar web desde la década de 1990. Compacto, universalmente soportado, pero opaco a la lectura humana.

RGB -- rgb(255, 87, 51)

Tres valores decimales, 0-255 por canal. Lo que CSS rgb() usa. Ligeramente más legible que HEX pero aún difícil de ajustar mentalmente ("hacerlo 20% más claro" no es obvio en RGB).

HSL -- hsl(11, 100%, 60%)

Tono (0-360 grados en la rueda de color), Saturación (0-100%), Luminosidad (0-100%). Diseñado para humanos: usted puede razonar sobre las relaciones de color directamente.

Cuándo Usar Cada Uno

Por Qué HSL Gana para Sistemas de Temas

Con HSL, la manipulación del color es aritmética:

:root {
  --hue: 11;
  --primary:    hsl(var(--hue), 100%, 60%);
  --primary-light: hsl(var(--hue), 100%, 80%); /* +20% luminosidad */
  --primary-dark:  hsl(var(--hue), 100%, 40%); /* -20% luminosidad */
  --primary-muted: hsl(var(--hue), 40%, 60%);  /* desaturado */
}

Cambie --hue a 210 y toda su paleta cambia de naranja a azul. Intente eso con HEX.

Aclarar: aumentar L. 60% → 80% = más claro.

Oscurecer: disminuir L. 60% → 40% = más oscuro.

Desaturar: disminuir S. 100% → 40% = más apagado.

Color complementario: agregar 180 a H. 11 → 191.

Hoja de Trucos de Conversión

HEX → RGB: Dividir en pares, convertir hexadecimal a decimal.

#FF5733 → R:0xFF=255, G:0x57=87, B:0x33=51 → rgb(255, 87, 51)

RGB → HSL (simplificado):

No memorice fórmulas. Use el Selector de Color para convertir entre los tres formatos instantáneamente.

CSS Moderno: oklch()

CSS Color Level 4 introdujo oklch() -- luminosidad perceptualmente uniforme. A diferencia de HSL, los valores L iguales realmente se ven igualmente brillantes en todos los tonos. Si usted está comenzando un nuevo sistema de diseño en 2025+, considere oklch() junto con HSL.

Relacionado