Generador de color hex

Cómo se lee un código HEX

Un HEX como #059669 son tres pares de dígitos hexadecimales: 05 (rojo), 96 (verde), 69 (azul). Cada par va de 00 (0, ausencia total) a FF (255, máximo). Por eso #FF0000 es rojo puro y #000000 es negro absoluto. Conocer esa lógica permite ajustar colores a mano: subir el primer par sube el rojo, bajar los tres pares oscurece todo.

HEX vs RGB vs HSL

• HEX: compacto, ideal para handoff diseño-desarrollo. Sin alpha en CSS hasta hace poco (hoy #RRGGBBAA sí existe).
• RGB: rgb(5 150 105 / 0.8) permite alpha siempre. Útil para overlays y semitransparencias.
• HSL: hsl(160 94% 30%) se entiende como humano. H = hue (matiz), S = saturación, L = luminosidad. Cambiar L sin tocar H es la forma correcta de generar variantes claras/oscuras de un mismo color.

Sintaxis válidas en CSS

Todos estos representan el mismo color y son válidos:

color: #059669;
color: #059669FF;       /* con alpha */
color: rgb(5, 150, 105);
color: rgb(5 150 105);  /* moderno */
color: rgb(5 150 105 / 0.8);
color: hsl(160 94% 30%);

Color names: cuándo conviene

CSS soporta 147 nombres reservados (tomato, steelblue, rebeccapurple). Son útiles para prototipos rápidos, pero en producción siempre usá HEX o variables CSS: los nombres no admiten ajuste fino y en design tokens son una pesadilla.

HEX abreviado y cuándo no usarlo

#F00 es válido y equivale a #FF0000: cada dígito se duplica. Pero solo cubre 4096 colores (16³) en lugar de 16.7 millones (256³). Para diseño profesional, sticky a 6 dígitos. Para CSS minimalista de prototipos, está bien.

HEX con alpha (#RRGGBBAA)

Soportado en todos los navegadores modernos desde 2018. Los dos últimos dígitos son la opacidad: FF = 100%, 80 ≈ 50%, 00 = 0%. Útil para overlays oscuros: #00000080 es negro al 50%.

Convertir HEX a otros formatos sin perder precisión

HEX y RGB son matemáticamente equivalentes: la conversión es exacta en ambos sentidos. HEX↔HSL pasa por RGB y puede generar pequeños errores de redondeo (<1% de variación), por eso los design tokens serios siempre guardan el HEX o RGB como fuente de verdad y derivan HSL al vuelo.