Convertisseur de couleurs HEX ↔ RGB

Les couleurs HEX sont 3 paires de chiffres hexadécimaux représentant les canaux Rouge, Vert, Bleu. #RRGGBB. Chaque paire est un nombre en base 16 (0–FF = 0–255 en décimal). Conversion : divisez le hex en paires, convertissez chacune de la base 16 à la base 10. Exemple : #1A2B3C → R=0x1A=26, G=0x2B=43, B=0x3C=60 → rgb(26, 43, 60). Hex court #RGB : chaque chiffre est doublé. #F3A → #FF33AA → rgb(255, 51, 170). CSS accepte les deux formes : #FF33AA et #F3A sont identiques. De manière programmée : parseInt("1A", 16) = 26.

HSL signifie Hue, Saturation, Lightness — un modèle de couleur plus intuitif que RGB. Hue : 0–360 degrés sur une roue chromatique. 0/360=rouge, 60=jaune, 120=vert, 180=cyan, 240=bleu, 300=magenta. Saturation : 0–100 %. 0 % = gris, 100 % = couleur entièrement saturée (couleur vive). Lightness : 0–100 %. 0 % = noir, 100 % = blanc, 50 % = couleur pure. CSS : hsl(240, 100%, 50%) = bleu pur. Avantage par rapport à RGB : vous pouvez créer intuitivement des variations — pour éclaircir une couleur, augmentez la luminosité. Pour créer une teinte pastel, réduisez la saturation. Pour tourner la teinte, ajoutez/soustrayez des degrés. Utilisé dans les systèmes de conception pour générer des palettes de couleurs.

HSV (Hue, Saturation, Value) est aussi appelé HSB (Hue, Saturation, Brightness). Similaire à HSL mais différent : Value/Brightness : 0=noir, 100%=entièrement brillant (couleur pure ou blanc selon la saturation). HSV vs HSL : dans HSL, 100 % de luminosité est toujours blanc indépendamment de la saturation. Dans HSV, 100 % de valeur avec 0 % de saturation est blanc, avec 100 % de saturation c'est la teinte pure. HSV est le modèle utilisé par la plupart des sélecteurs de couleurs dans les outils de conception (Photoshop, Figma, etc.). C'est plus naturel pour sélectionner les couleurs : choisissez la teinte, puis choisissez la saturation et la luminosité sur un carré 2D.

Alpha ajoute de la transparence aux couleurs. Plage : 0 (entièrement transparent) à 1 (entièrement opaque). Formats CSS avec alpha : rgba(255, 100, 50, 0.5) — 50 % transparent. hsla(120, 60%, 50%, 0.8) — 20 % transparent. Hex avec alpha : #RRGGBBAA (hex de 8 chiffres). #FF000080 = rouge à ~50 % d'opacité (0x80 = 128 = 128/255 ≈ 0.5). Courte forme : #RGBA (4 chiffres). #FF08 = rouge à ~53 % d'opacité. CSS moderne : color(display-p3 1 0 0 / 0.5) pour des gammes étendues. La propriété CSS opacity vs alpha : opacity affecte l'élément entier et ses enfants ; l'alpha de couleur affecte seulement cette propriété spécifique. opacity: 0.5 sur une div avec du texte rend l'arrière-plan et le texte transparents ; background-color: rgba(0,0,0,0.5) affecte uniquement l'arrière-plan.

CSS a plus de 140 couleurs nommées. Les bien connues : red, blue, green, white, black, gray, orange, purple, pink, cyan. Certaines avec des noms amusants : rebeccapurple (#663399, ajoutée en l'honneur de la fille d'Eric Meyer, auteur de la spec CSS), cornflowerblue (#6495ED), papayawhip (#FFEFD5), lawngreen (#7CFC00). Quand les utiliser : les couleurs nommées sont correctes pour le prototypage rapide. Pour la production : utilisez HEX ou HSL pour la cohérence et la compatibilité avec les outils. HSL est meilleure pour les systèmes de conception — vous pouvez générer des variantes de palette de manière programmée : hsl(210, 80%, 20%/30%/40%/50%/60%) pour une échelle bleue. Évitez les couleurs nommées dans les jetons de conception car elles masquent les valeurs réelles.