Colores hex en Swift: cómo funciona la magia de #FF5733

¿Por qué #FF5733 no es solo un conjunto aleatorio de caracteres?

¿Alguna vez te has preguntado qué se esconde detrás de la notación habitual #FF5733 en tu código? Para la mayoría de los desarrolladores, esto es simplemente "un color naranja-rosado". Pero si profundizas, detrás de este código de seis dígitos hay una matemática elegante, operaciones de bits y una historia que se remonta a los monitores antiguos y las especificaciones de HTML.

En este artículo, analizaremos los colores hex en Swift desde cero. Aprenderás cómo funcionan los canales RGB, por qué el formato hex es tan popular y, lo más importante, cómo escribir tu propio UIColor (o Color para SwiftUI) que acepte cadenas hexadecimales. Y sí, veremos código real que podrás usar hoy mismo.

Si alguna vez buscaste la respuesta a la pregunta "How to use hex color values in Swift" en Stack Overflow, has llegado al lugar correcto. Solo que ahora con explicación en español y análisis profundo.

Anatomía de un color hex: ¿de dónde vienen estos números?

Empecemos por lo más simple. Un color en la pantalla es una combinación de tres componentes básicos: Rojo (Red), Verde (Green) y Azul (Blue). Cada uno puede tomar un valor de 0 a 255. ¿Por qué 255? Porque es el número máximo que se puede almacenar en un byte (8 bits).

El formato hex es simplemente una forma compacta de escribir estos tres números.

\n
• #FF5733 se divide en tres pares: FF, 57, 33.
\n
• FF en sistema decimal = 255 (máximo de rojo).
\n
• 57 = 87 (verde).
\n
• 33 = 51 (azul).
\n
• Color resultante: RGB(255, 87, 51) — un coral brillante.
\n

El sistema hexadecimal (base 16) usa dígitos del 0 al 9 y letras de la A a la F. Esto permite escribir un número del 0 al 255 con solo dos caracteres. Práctico, ¿verdad?

¿Por qué el hex es tan popular en la web y en iOS?

Históricamente, los códigos hex provienen del diseño web. Cuando CSS comenzaba a desarrollarse, #RRGGBB se convirtió en el estándar para especificar colores. Swift y UIKit adoptaron esta tradición, pero con un detalle: no hay un analizador integrado de cadenas hex en UIColor.

Cada desarrollador iOS ha escrito al menos una vez una extensión para UIColor que convierte "#FF5733" en UIColor. Esto se ha convertido en una especie de "rito de iniciación". Y hoy recorreremos este rito juntos.

Escribiendo nuestro propio analizador hex en Swift (paso a paso)

Vamos a crear un inicializador conveniente y seguro para UIColor que acepte una cadena hex. Analizaremos cada paso.

Paso 1: Estructura básica

import UIKit\n\nextension UIColor {\n    convenience init?(hex: String) {\n        // Aquí estará la magia\n    }\n}\n

Usamos convenience init? (que puede fallar), porque la cadena podría no ser válida.

Paso 2: Limpiar la cadena

Los usuarios pueden pasar "#FF5733", "FF5733" o incluso "0xFF5733". Necesitamos eliminar todo lo superfluo.

var hexString = hex.trimmingCharacters(in: .whitespacesAndNewlines).uppercased()\n\nif hexString.hasPrefix("#") {\n    hexString.removeFirst()\n}\n\nif hexString.hasPrefix("0X") {\n    hexString.removeFirst(2)\n}\n

Paso 3: Verificar la longitud

El código hex estándar tiene 6 caracteres (RRGGBB). Pero también existe el formato de 8 caracteres (RRGGBBAA), donde AA es el canal alfa (transparencia). Soportaremos ambos.

guard hexString.count == 6 || hexString.count == 8 else {\n    return nil\n}\n

Paso 4: Analizar la cadena en números

Ahora viene lo interesante. Necesitamos convertir la cadena en un número hexadecimal y luego extraer los componentes RGB.

guard let hexValue = UInt64(hexString, radix: 16) else {\n    ret