Comment utiliser cet outil ?
- Saisissez un code HEX (par ex. #FF5733)
- Les valeurs RGB, HSL et OKLCH apparaissent immédiatement
- Copiez les formats individuellement ou tous d'un coup
Que fait le convertisseur ?
Le convertisseur transforme un code HEX en valeurs RGB décimales et affiche aussi les équivalents HSL et OKLCH. Il accepte tous les formats HEX courants : raccourci 3 chiffres (#F0A), standard 6 chiffres (#FF00AA) et 8 chiffres avec canal alpha (#FF00AA88). Espaces et symbole hash sont automatiquement nettoyés.
Quelle est la formule ?
Un code HEX code trois canaux (rouge, vert, bleu) sur deux chiffres hexadécimaux chacun. La conversion découpe le code en paires d’octets et convertit chaque paire de base 16 en base 10 :
R = parseInt(hex[0:2], 16) → 0–255
G = parseInt(hex[2:4], 16) → 0–255
B = parseInt(hex[4:6], 16) → 0–255
Exemple : #FF5733 → R = FF₁₆ = 255, G = 57₁₆ = 87, B = 33₁₆ = 51 → rgb(255, 87, 51).
Pour le raccourci 3 chiffres, chaque chiffre est doublé : #F0A → #FF00AA. Pour le HEX 8 chiffres, les deux derniers chiffres codent l’alpha : AA₁₆ = 170, normalisé à 170/255 ≈ 0,67.
La conversion est mathématiquement sans perte — HEX et RGB décrivent le même espace sRGB en notations différentes. Tous deux issus du début du web : HEX de HTML 2.0 (1995), rgb() de CSS1 (1996).
Quels exemples d’usage ?
| HEX | RGB | HSL |
|---|---|---|
| #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
| #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| #00FF00 | rgb(0, 255, 0) | hsl(120, 100%, 50%) |
| #0000FF | rgb(0, 0, 255) | hsl(240, 100%, 50%) |
| #FF5733 | rgb(255, 87, 51) | hsl(11, 100%, 60%) |
| #8F3A0C | rgb(143, 58, 12) | hsl(21, 85%, 30%) |
En plus, le convertisseur calcule pour chaque entrée la valeur OKLCH — pertinent pour l’écriture CSS moderne et la génération de palettes.
Quels cas d’utilisation ?
Export Figma vers CSS : les outils de design exportent les couleurs en HEX. Pour la config Tailwind, les variables CSS ou des palettes OKLCH, il faut les valeurs décimales.
Traduction de brand guidelines : les PDF de design d’entreprise définissent souvent les couleurs en HEX. Pour bâtir une feuille de style web, on convertit systématiquement en rgb() ou oklch() selon l’espace voulu.
Vérification d’accessibilité : les valeurs RGB sont l’entrée pour le calcul de contraste WCAG. Savoir que #FF5733 correspond au triplet (255, 87, 51) permet de calculer la luminance relative et le ratio de contraste contre le noir ou le blanc.
Débogage de templates e-mail : beaucoup de clients mail ne supportent que HEX ou rgb() — pas HSL ni OKLCH. Pour déboguer, on convertit dans un sens et dans l’autre.
Questions fréquentes
Comment convertir HEX en RGB ?
Chaque code HEX se compose de trois paires d’octets. Chaque paire est convertie de base 16 en base 10 : #FF5733 → R=255, G=87, B=51.
Quelle différence entre HEX et RGB ?
Les deux décrivent le même espace sRGB. HEX est notation hexadécimale compacte (#RRGGBB), RGB notation décimale 0–255. Conversion sans perte.
Peut-on indiquer HEX avec transparence ?
Oui, avec HEX 8 chiffres (#RRGGBBAA). Les deux derniers chiffres définissent l’alpha : 00 = transparent, FF = opaque. CSS équivalent : rgba().
Que signifie #000000 ?
Noir. Trois canaux à 0. L’opposé #FFFFFF est blanc.
Pourquoi OKLCH plutôt que RGB ?
OKLCH est perceptuellement uniforme — mêmes écarts numériques, mêmes écarts visuels. Depuis 2024, tous les navigateurs supportent oklch() en CSS.
Quels outils couleur sont liés ?
Autres outils de l’écosystème kittokit :
- Centimètres en pouces — conversion longueur avec calcul pas à pas et tableau de valeurs.
- Mètres en pieds — conversion métrique-impérial pour mensurations, architecture et DIY.
- Kilogrammes en livres — conversion de masse avec facteur exact et exemples.
Dernière mise à jour :