Couleurs Hex en Swift : comment fonctionne la magie #FF5733

Pourquoi #FF5733 n'est pas qu'une simple suite de caractères aléatoires ?

Avez-vous déjà réfléchi à ce qui se cache derrière la notation familière #FF5733 dans votre code ? Pour la plupart des développeurs, ce n'est qu'« une sorte de couleur orange-rose ». Mais si l'on creuse un peu, derrière ce code à six chiffres se cache une mathématique élégante, des opérations binaires et une histoire qui remonte aux anciens moniteurs et aux spécifications HTML.

Dans cet article, nous allons décortiquer les couleurs hexadécimales en Swift depuis le début. Vous apprendrez comment fonctionnent les canaux RVB, pourquoi le format hexadécimal est si populaire, et — surtout — comment écrire votre propre UIColor (ou Color pour SwiftUI) qui accepte les chaînes hexadécimales. Et oui, nous allons voir du code réel que vous pourrez utiliser dès aujourd'hui.

Si vous avez déjà cherché la réponse à la question « How to use hex color values in Swift » sur Stack Overflow — vous êtes au bon endroit. Mais cette fois avec une explication approfondie.

Anatomie d'une couleur hexadécimale : d'où viennent ces chiffres ?

Commençons par le plus simple. Une couleur à l'écran est une combinaison de trois composants de base : Rouge (Red), Vert (Green) et Bleu (Blue). Chacun peut prendre une valeur de 0 à 255. Pourquoi 255 ? Parce que c'est le nombre maximum que l'on peut écrire dans un octet (8 bits).

Le format hexadécimal est simplement un moyen compact d'écrire ces trois nombres.

\n
• #FF5733 se décompose en trois paires : FF, 57, 33.
\n
• FF en système décimal = 255 (maximum de rouge).
\n
• 57 = 87 (vert).
\n
• 33 = 51 (bleu).
\n
• Couleur résultante : RVB(255, 87, 51) — un corail vif.
\n

Le système hexadécimal (base 16) utilise les chiffres de 0 à 9 et les lettres de A à F. Cela permet d'écrire un nombre de 0 à 255 avec seulement deux caractères. Pratique, non ?

Pourquoi l'hexadécimal est-il si populaire sur le web et iOS ?

Historiquement, les codes hexadécimaux viennent du design web. Lorsque les CSS commençaient tout juste à se développer, #RRGGBB est devenu la norme pour spécifier les couleurs. Swift et UIKit ont hérité de cette tradition, mais avec une nuance : il n'existe pas d'analyseur intégré de chaînes hexadécimales dans UIColor.

Chaque développeur iOS a écrit au moins une fois une extension pour UIColor qui transforme "#FF5733" en UIColor. C'est devenu une sorte de « rite de passage ». Et aujourd'hui, nous allons accomplir ce rite ensemble.

Écrire son propre analyseur hexadécimal en Swift (étape par étape)

Créons un initialisateur pratique et sécurisé pour UIColor qui accepte une chaîne hexadécimale. Nous allons détailler chaque étape.

Étape 1 : Structure de base

import UIKit\n\nextension UIColor {\n    convenience init?(hex: String) {\n        // La magie opérera ici\n    }\n}\n

Nous utilisons convenience init? (initialisateur optionnel), car la chaîne peut être invalide.

Étape 2 : Nettoyer la chaîne

Les utilisateurs peuvent passer "#FF5733", "FF5733" ou même "0xFF5733". Nous devons supprimer tout ce qui est superflu.

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

Étape 3 : Vérifier la longueur

Un code hexadécimal standard fait 6 caractères (RRGGBB). Mais il existe aussi un format à 8 caractères (RRGGBBAA), où AA représente le canal alpha (transparence). Nous allons supporter les deux.

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

Étape 4 : Analyser la chaîne en nombres

Voici la partie la plus intéressante. Nous devons transformer la chaîne en un nombre hexadécimal, puis en extraire les composants RVB.

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