Convertissez n'importe quel code couleur hex en RGB dans votre navigateur — hex à 3, 6 et 8 chiffres avec alpha pris en charge. Gratuit, instantané, sans inscription, vos couleurs ne quittent jamais la page.
Teintes claires
Teintes foncées
Tons
Harmonies
— — — — — Un convertisseur hex vers RGB est un petit utilitaire qui transforme un code couleur hex (`#FF5733`) en les trois valeurs entières de canal qu'il représente (`rgb(255 87 51)`). Hex et RGB sont les deux formats autour desquels chaque feuille de style web, chaque outil de design et chaque pipeline de pixels d'image ont été bâtis depuis la fin des années 1990, et la conversion entre eux est l'opération unique la plus courante de l'outillage de couleur. Hex est le format laconique de copier-coller que Figma, Sketch, Photoshop et chaque PDF de chartes de marque exportent par défaut — une chaîne base-16 de 6 caractères qui tient confortablement dans une propriété personnalisée CSS et se lit d'un coup d'œil une fois que votre œil a appris les motifs. RGB est le format à adressage de canal qu'attendent les API matérielles, les appels de dessin sur canvas, la manipulation de buffers d'image, les attributs de couleur OpenGL et la plupart des SDK graphiques — trois entiers 0-255 séparés (ou flottants normalisés 0-1) qui correspondent directement aux sous-pixels rouge, vert et bleu d'un LCD ou aux phosphores d'un CRT. La conversion entre les deux est mécanique : découpez le hex en trois paires de 2 chiffres et lisez chaque paire comme un nombre base-16. Cet outil exécute cette conversion en direct au fil de la saisie, sans bouton « Convertir » à cliquer, et expose tous les autres formats de couleur courants (HSL, OKLCH, OKLAB, HSV, HWB, CMYK, plus les 148 couleurs CSS nommées) aux côtés de la sortie RGB gratuitement.
**Le format RGB lui-même mérite un examen plus attentif.** Le sRGB 24 bits standard encode chaque canal comme un entier non signé 8 bits de 0 à 255 — 256 valeurs par canal, 16 777 216 couleurs au total (256³). La norme de référence est IEC 61966-2-1, la spécification sRGB de 1996 ancrée aux primaires phosphores CRT qui dominaient les écrans à l'époque. CSS expose RGB via la fonction `rgb()` en trois saveurs syntaxiques. La forme CSS 1 d'origine utilise des séparateurs virgule : `rgb(255, 87, 51)`. CSS Color 4 (Candidate Recommendation du W3C depuis 2022) a ajouté une forme moderne séparée par espaces : `rgb(255 87 51)`, avec un canal alpha optionnel après une barre oblique : `rgb(255 87 51 / 0.5)`. Les deux formes sont interchangeables et livrées dans tous les navigateurs evergreen. RGB accepte aussi des canaux en pourcentage : `rgb(100% 33% 20%)` est équivalent à `rgb(255 87 51)`, parfois préféré dans les feuilles de style écrites à la main pour la lisibilité. L'alpha dispose d'une fonction `rgba()` distincte pour le support hérité — `rgba(255, 87, 51, 0.5)` est la forme canonique qui fonctionne partout jusqu'à IE 9. CSS Color 4 a aussi ajouté une syntaxe `color(srgb 1 0.341 0.2)` pour l'adressage sRGB explicite, et les fonctions parallèles `color(display-p3 ...)` et `color(rec2020 ...)` pour les valeurs gamut chromatique large que hex ne peut encoder.
Les mathématiques de conversion sont propres dans les deux sens. **HEX vers RGB** : analysez le hex à 6 chiffres `#RRGGBB` comme trois nombres base-16 à 2 chiffres via `parseInt(hex.slice(1, 3), 16)`, `parseInt(hex.slice(3, 5), 16)`, `parseInt(hex.slice(5, 7), 16)`. Pour le raccourci à 3 chiffres `#RGB`, développez chaque chiffre en le dupliquant (`#F73` → `#FF7733`) avant l'analyse — ce n'est *pas* un remplissage à gauche. Pour l'alpha à 8 chiffres `#RRGGBBAA`, analysez la paire de fin de la même manière et divisez par 255 pour obtenir le flottant alpha 0-1. Pour le raccourci alpha à 4 chiffres `#RGBA`, développez d'abord chaque chiffre (`#F738` → `#FF773388`). **RGB vers HEX** est l'inverse : pour chaque canal, appelez `value.toString(16).padStart(2, '0')` pour obtenir la paire hex à 2 chiffres (le `padStart` est important — sans lui, une valeur de canal 5 se sérialiserait en `'5'` au lieu de `'05'`, produisant un hex invalide), puis concaténez. Les deux directions sont exactes au bit près : 16² = 256, ce qui correspond exactement à la plage d'octets 0-255 qu'occupe chaque canal, donc un aller-retour HEX → RGB → HEX produit l'entrée originale verbatim sans dérive en virgule flottante.
**Pourquoi hex plutôt que RGB ?** Hex est plus court, natif des outils de design, et le format que votre œil apprend au fil du temps — la plupart des développeurs front-end peuvent identifier `#3b82f6` comme le Tailwind blue-500 à vue. RGB est à adressage de canal explicite, plus facile à calculer dessus en JavaScript, et le seul des deux qui accepte alpha et pourcentages proprement. Les deux formats coexistent parce qu'ils résolvent des problèmes différents. Les feuilles de style web et les chartes de marque penchent hex parce que le coût de copier-coller domine. Les appels de dessin sur canvas, le traitement d'image, les API de LED matérielles et tout code qui fait de l'arithmétique par canal penchent RGB parce qu'indexer dans un tuple bat le découpage d'une chaîne. Le basculement entre les deux se produit des dizaines de fois dans un projet web typique — collez un hex depuis Figma, convertissez en entiers RGB pour un appel `ctx.fillStyle = ...`, reconvertissez en hex pour une définition de variable CSS.
Le flux HEX → RGB de cet outil est une direction d'une famille de 5 branches qui partagent toutes le même convertisseur de couleurs unifié sous-jacent. Le convertisseur de couleurs unifié dédié est le hub — il affiche les 9 formats simultanément modifiables et c'est le bon outil quand votre flux a besoin de plus que hex et RGB. Les branches à sens unique ciblent des intentions de recherche Google spécifiques : le convertisseur RGB vers hex inverse pour la direction opposée, le convertisseur hex vers HSL pour l'espace designer-cognitif hérité, le convertisseur hex vers OKLCH pour les systèmes de design modernes perceptuellement uniformes (Tailwind v4 et shadcn utilisent désormais OKLCH par défaut), et le convertisseur hex vers CMYK pour les approximations de préparation à l'impression. Les cinq branches et le hub partagent le même moteur de parsing et les mêmes mathématiques de conversion, donc les résultats sont garantis identiques sur toute la famille. Chaque conversion s'exécute localement dans votre navigateur — vos codes hex ne sont jamais téléversés, jamais journalisés, et zéro requête réseau ne se déclenche pendant que vous saisissez. Vérifiez dans DevTools.
// Parse any hex shape (3/4/6/8-digit) into an RGB tuple [r, g, b, a]
// All channels in 0-255 range; alpha in 0-1.
function parseHex(input) {
let h = input.trim().replace(/^#/, '');
// Expand 3-digit and 4-digit shorthand by duplicating each digit
if (h.length === 3 || h.length === 4) {
h = h.split('').map(c => c + c).join('');
}
if (!/^[0-9a-fA-F]+$/.test(h) || (h.length !== 6 && h.length !== 8)) {
throw new Error(`Invalid hex: ${input}`);
}
const r = parseInt(h.slice(0, 2), 16);
const g = parseInt(h.slice(2, 4), 16);
const b = parseInt(h.slice(4, 6), 16);
const a = h.length === 8 ? parseInt(h.slice(6, 8), 16) / 255 : 1;
return [r, g, b, a];
}
console.log(parseHex('#FF5733')); // [255, 87, 51, 1]
console.log(parseHex('#F73')); // [255, 119, 51, 1]
console.log(parseHex('#FF573380')); // [255, 87, 51, 0.5019607843137255] 3 chiffres `#F73`, alpha à 4 chiffres `#F738`, 6 chiffres `#FF5733`, alpha à 8 chiffres `#FF5733CC`, plus la variante sans `#` pour chacune (`F73`, `FF5733`, etc.). Le parseur les normalise toutes vers le même tuple RGB interne avant affichage, donc vous pouvez coller la forme qu'utilise votre source sans développer manuellement le raccourci d'abord. La casse est également normalisée — `#ff5733` et `#FF5733` produisent une sortie identique.
Le champ RGB expose la valeur dans la forme moderne de CSS Color 4 : `rgb(255 87 51)` pour les couleurs opaques, `rgb(255 87 51 / 0.5)` pour celles portant de l'alpha. Les deux formes fonctionnent dans tous les navigateurs evergreen (Chrome 65+, Safari 13+, Firefox 52+). La forme à virgules héritée `rgb(255, 87, 51)` est à un remplacement mécanique près si votre cible en a besoin ; la syntaxe moderne est préférée dans le nouveau code parce qu'elle s'aligne avec les autres syntaxes fonctionnelles de CSS Color 4.
HEX → RGB est des mathématiques entier-à-entier : `parseInt(hex, 16)` renvoie une valeur 0-255 exacte sans implication de flottant. La direction inverse (`.toString(16).padStart(2, '0')`) est également exacte. Un aller-retour HEX → RGB → HEX → RGB → HEX produit l'entrée originale verbatim, indéfiniment. La source de vérité interne OKLCH signifie que même la chaîne plus longue HEX → RGB → HSL → OKLAB → HEX reste stable au bit près, ce que les convertisseurs hérités routant via HSL ne garantissent pas.
Le hex à 8 et 4 chiffres avec alpha (`#RRGGBBAA` et `#RGBA`) sont analysés correctement. La paire de fin correspond à un flottant alpha 0-1 : `00` → 0, `80` → 0,502, `FF` → 1. La sortie utilise par défaut la syntaxe à barre oblique de CSS Color 4 (`rgb(255 87 51 / 0.5)`) ; la forme héritée `rgba(255, 87, 51, 0.5)` est à un remplacement près. Utile pour la migration de jetons de design où les valeurs alpha peuvent avoir été enfouies dans des codes hex à 8 chiffres.
Le même hex que vous collez pilote aussi HSL, HSV, HWB, OKLCH, OKLAB, CMYK et la couleur CSS nommée la plus proche — tous visibles d'un coup d'œil sur la même page. Vous n'êtes jamais enfermé dans hex → RGB seulement. Si un coéquipier a besoin du triplet OKLCH pour un jeton Tailwind v4, du nom de couleur le plus proche pour la prose de documentation ou de l'approximation CMYK pour un devis d'impression, les valeurs sont déjà là avec leurs propres boutons Copier.
Passez un hex et la ligne de contraste le note immédiatement contre le blanc et le noir en utilisant WCAG 2.1 (plancher réglementaire : 4,5:1 pour le texte courant, 7:1 pour AAA) et APCA Lc (successeur proposé pour WCAG 3 : cible `|Lc| ≥ 75` pour le texte courant). Utile quand vous venez de convertir un hex de marque en RGB et voulez vérifier qu'il est effectivement lisible comme couleur de texte courant avant de le livrer.
Sous le sélecteur, la section Copier comme code transforme la couleur actuelle en extraits prêts à coller pour cinq plateformes : propriété personnalisée CSS (`--color-brand: rgb(255 87 51)`), jeton `@theme` Tailwind v4, littéral SwiftUI `Color(red:green:blue:)`, constante Jetpack Compose `Color(0xFFFF5733)`, Flutter `Color(0xFFFF5733)`. La syntaxe exacte qu'attend chaque plateforme, prête à déposer dans un catalogue d'asset iOS, un fichier de thème Android ou un `ThemeData` Flutter.
Tout le parsing hex, la conversion RGB, le scoring de contraste et la génération de palette s'exécutent localement dans votre navigateur. Vos codes hex ne sont jamais transmis, jamais journalisés sur un serveur, jamais analysés. Zéro requête réseau pendant que vous saisissez — vérifiez dans DevTools. Sûr pour les palettes de marque non annoncées, les jetons de design internes, les maquettes en brouillon sous NDA et tout autre travail de couleur confidentiel.
La couleur actuelle s'encode automatiquement dans le hash d'URL sous la forme `#hex=ff5733` à chaque changement. Copiez l'URL, collez-la dans un fil Slack ou un ticket GitHub, et quiconque l'ouvre atterrit sur le même hex avec le même résultat RGB. Le hash ne vit que dans votre barre d'adresse et n'est jamais transmis au serveur (les navigateurs n'incluent pas les fragments d'URL dans les requêtes HTTP), donc même partager le lien ne fuite pas la couleur vers un tiers.
Le résultat Google par défaut pour « hex to rgb » — un formulaire à sens unique avec hex en entrée, RGB en sortie, aucun autre format visible. Utile pour des recherches ponctuelles quand vous arrivez depuis la recherche. Manque OKLCH, vérification de contraste, détection de gamut chromatique, gestion de l'alpha et la vue multi-format simultanée. Cet outil l'emporte sur chaque axe sauf le cas de conversion unique minimaliste.
Pages SEO par couleur de longue date avec métadonnées approfondies : conversions, palettes, harmonies, dégradés pour chaque hex que vous interrogez. L'UI est datée (début des années 2010), pas de prise en charge OKLCH, pas de contraste APCA, pas de gestion gamut chromatique large. Forte pour la découverte SEO d'un hex spécifique via Google ; plus faible pour les flux de conversion actifs où saisir dans une UX à champs unifiés est plus rapide.
Bascule HEX/RGB/HSL accessible aux débutants sur une page axée enseignement, omniprésente dans les résultats de recherche. Pas d'OKLCH, pas de gestion de l'alpha au-delà de rgba, pas de fonctionnalités avancées. Utile comme référence à côté du contenu explicatif de W3Schools. Cet outil l'emporte sur chaque autre axe : plus de formats, mathématiques perceptuelles, fonctionnalités gamut chromatique + contraste + CVD, export de code moderne pour Tailwind v4 / SwiftUI / Compose / Flutter.
Les DevTools de Chrome, Firefox et Safari livrent tous un sélecteur de couleur qui convertit hex en RGB en ligne quand vous cliquez sur un échantillon de couleur dans le panneau CSS. Gratuit, sans installation, toujours disponible. Manque OKLCH, manque les URL partageables, manque l'export de code pour les plateformes non web (SwiftUI, Compose). Tournez-vous vers les DevTools quand vous déboguez déjà du CSS ; tournez-vous vers cet outil quand vous avez besoin d'une sortie inter-plateforme.
Livré avec chaque Mac depuis OS X — survolez n'importe quel pixel et lisez les valeurs RGB / hex / linéaires. Excellent pour échantillonner des couleurs de pixel depuis n'importe quelle application à l'écran. Ne convertit pas les valeurs hex collées ; c'est un échantillonneur d'écran, pas un convertisseur. Utilisez le bouton EyeDropper du sélecteur de cet outil (navigateurs Chromium uniquement) pour la même capacité d'échantillonnage d'écran à l'intérieur du navigateur.
Pages SEO par couleur couvrant de nombreux espaces (HEX, RGB, HSL, HSV, CMYK, XYZ, CIELAB). Manque la prise en charge OKLCH moderne et l'UX d'édition à champs unifiés. Les pages de contenu auto-générées ressemblent à des fermes de contenu mais les données de conversion sont correctes. Bon pour fouiller les métadonnées de couleurs individuelles via Google ; cet outil est plus rapide pour les flux actifs.
#FF5733
Sortie RGB : `rgb(255 87 51)`. Le cas classique — un designer a déposé une couleur de marque dans Figma, vous l'avez capturée, une pipette vous a donné le hex, et il vous faut maintenant les entiers de canal pour un appel de dessin sur canvas, une bande LED matérielle ou des mathématiques sur pixels d'un buffer d'image. La syntaxe séparée par espaces de CSS Color 4 affichée ici est la forme moderne ; la forme à virgules héritée `rgb(255, 87, 51)` a un sens identique et est prise en charge dans tous les navigateurs depuis IE 3.
#3b82f6
Sortie RGB : `rgb(59 130 246)`. Le sélecteur Color d'Adobe (dans Photoshop, Illustrator et InDesign) accepte les entiers RGB dans la plage 0-255 comme entrée native — collez 59 / 130 / 246 dans les trois cases de canal et vous correspondez exactement au `blue-500` de Tailwind. Utile quand un designer doit maquetter une couleur web dans une application de mise en page orientée impression, ou quand vous échantillonnez des couleurs de marque dans une bibliothèque d'échantillons pour retoucher des images.
#FF573380
Sortie RGB : `rgb(255 87 51 / 0.5)`. La dernière paire (`80`) se décode comme `128/255 ≈ 0,502`, exposée comme canal alpha via la syntaxe à barre oblique de CSS Color 4. La forme héritée équivalente est `rgba(255, 87, 51, 0.5)`, toujours prise en charge partout et attendue par les anciens préprocesseurs. Le hex à 8 chiffres est arrivé nativement dans tous les navigateurs evergreen en 2018 ; auparavant, l'alpha devait s'exprimer via la fonction `rgba()`.
#F73
Sortie RGB : `rgb(255 119 51)`. La spec CSS définit le hex à 3 chiffres comme un raccourci où chaque chiffre est dupliqué pour former l'équivalent à 6 chiffres : `#F73` se développe en `#FF7733`, donc R = `FF` = 255, G = `77` = 119, B = `33` = 51. Ce n'est *pas* un remplissage à gauche — `#F73` n'est **pas** `#000F73`. Beaucoup de débutants se trompent ; le comportement d'expansion de l'outil rend la règle visible d'un coup d'œil.
Table de référence des 10 codes hex les plus convertis et leurs équivalents RGB — primaires pures, secondaires pures et deux couleurs de marque réelles de la palette Tailwind.
Noir pur. Les trois canaux à zéro — l'absence de lumière émise. Triplet RGB (0, 0, 0).
#000000 → rgb(0 0 0) Le noir pur à l'écran est rarement le bon choix de design — essayez `#111` ou une clarté perceptuelle OKLCH de 0,1-0,15 pour un texte courant plus doux.
Besoin d'OKLCH à la place ? Essayez le convertisseur hex vers OKLCH dédié pour une sortie perceptuellement uniforme.
Blanc pur. Les trois canaux à leur valeur maximale (255). La couleur la plus lumineuse en sRGB.
#FFFFFF → rgb(255 255 255) Les fonds blancs purs peuvent produire de la fatigue oculaire dans des environnements sombres — considérez `#fafafa` ou OKLCH 0,98 pour des alternatives plus chaudes.
Besoin d'OKLCH à la place ? Essayez le convertisseur hex vers OKLCH dédié pour une sortie perceptuellement uniforme.
Rouge pur. Canal R au maximum, G et B à zéro. La première des trois primaires sRGB.
#FF0000 → rgb(255 0 0) Le rouge pur est extrêmement saturé et tient rarement dans une palette de marque — la plupart des couleurs de marque « rouge » sont plus proches de #DC2626 ou #E53935.
Besoin d'OKLCH à la place ? Essayez le convertisseur hex vers OKLCH dédié pour une sortie perceptuellement uniforme.
Vert pur. Canal G au maximum, R et B à zéro. Couleur CSS nommée `lime` (pas `green`, qui est #008000).
#00FF00 → rgb(0 255 0) Le mot-clé CSS `green` se résout à #008000 (à demi-luminosité), pas à #00FF00 — source de confusion fréquente. Utilisez `lime` pour le vert RGB pur.
Besoin d'OKLCH à la place ? Essayez le convertisseur hex vers OKLCH dédié pour une sortie perceptuellement uniforme.
Bleu pur. Canal B au maximum, R et G à zéro. La troisième primaire sRGB.
#0000FF → rgb(0 0 255) Le bleu pur sur fond blanc échoue au contraste WCAG AA (3,7:1) — considérez des bleus de marque plus foncés comme #1D4ED8 (Tailwind blue-700) pour le texte courant.
Besoin d'OKLCH à la place ? Essayez le convertisseur hex vers OKLCH dédié pour une sortie perceptuellement uniforme.
Cyan — vert et bleu au maximum, rouge à zéro. L'une des trois secondaires sRGB. Couleur CSS nommée `cyan` (ou équivalent `aqua`).
#00FFFF → rgb(0 255 255) Cyan et aqua sont des synonymes exacts en CSS — les deux se résolvent à #00FFFF. Choisissez-en un et restez cohérent dans toute votre feuille de style.
Besoin d'OKLCH à la place ? Essayez le convertisseur hex vers OKLCH dédié pour une sortie perceptuellement uniforme.
Magenta — rouge et bleu au maximum, vert à zéro. Couleur CSS nommée `magenta` (ou équivalent `fuchsia`).
#FF00FF → rgb(255 0 255) Magenta et fuchsia sont des synonymes exacts en CSS — les deux se résolvent à #FF00FF. Courants dans les motifs de test et les superpositions d'outils de développement.
Besoin d'OKLCH à la place ? Essayez le convertisseur hex vers OKLCH dédié pour une sortie perceptuellement uniforme.
Jaune — rouge et vert au maximum, bleu à zéro. La plus lumineuse des trois secondaires sRGB par luminance perçue.
#FFFF00 → rgb(255 255 0) Le jaune est la couleur non blanche à plus haute luminance à l'écran — le texte jaune sur fond blanc est presque invisible, même si le hex paraît correct sur papier.
Besoin d'OKLCH à la place ? Essayez le convertisseur hex vers OKLCH dédié pour une sortie perceptuellement uniforme.
La couleur de marque blue-500 par défaut de Tailwind CSS — le « bleu web » canonique du milieu des années 2020. Utilisée dans d'innombrables tableaux de bord, sites marketing et outils d'administration.
#3b82f6 → rgb(59 130 246) Tailwind v4 redéfinit blue-500 en OKLCH (`oklch(0.629 0.193 263.4)`) pour des rampes perceptuellement uniformes — le hex reste le même comme repli.
Besoin d'OKLCH à la place ? Essayez le convertisseur hex vers OKLCH dédié pour une sortie perceptuellement uniforme.
Le rose-500 par défaut de Tailwind CSS — un rose-rouge à haute saturation utilisé couramment pour les boutons d'accent, les états d'alerte et le contraste de marque.
#f43f5e → rgb(244 63 94) Rose-500 passe WCAG AA (4,6:1) contre le blanc pour le grand texte mais échoue pour le texte courant — associez avec rose-600 (#e11d48) ou plus foncé pour le texte courant sur blanc.
Besoin d'OKLCH à la place ? Essayez le convertisseur hex vers OKLCH dédié pour une sortie perceptuellement uniforme.
Déposez n'importe quelle valeur hex dans l'entrée HEX — avec ou sans `#` initial, en raccourci à 3 chiffres (`#F73`), en forme pleine à 6 chiffres (`#FF5733`), en raccourci alpha à 4 chiffres (`#F738`) ou en forme pleine alpha à 8 chiffres (`#FF5733CC`). L'outil normalise les cinq formes d'entrée vers la même couleur canonique en interne. La casse n'a pas d'importance (`#ff5733` et `#FF5733` s'analysent à l'identique). Les caractères invalides ou un nombre de chiffres incorrect produisent une discrète erreur en ligne ; un hex valide met à jour chaque autre champ de format en temps réel.
Le champ RGB sous le champ HEX affiche la valeur `rgb()` correspondante dans la syntaxe moderne séparée par espaces de CSS Color 4 : `rgb(255 87 51)` pour une couleur opaque, `rgb(255 87 51 / 0.5)` pour une couleur portant de l'alpha. Chaque canal est un entier 0-255 ; l'alpha est normalisé à 0-1. Les valeurs sont exactes au bit près — `parseInt('FF', 16)` renvoie 255, sans arithmétique en virgule flottante impliquée, donc un aller-retour de retour vers hex produit l'entrée originale verbatim.
Chaque carte de format possède un bouton Copier à droite. Un clic et la valeur arrive dans votre presse-papiers — le label du bouton bascule brièvement sur « Copié ! » pour vous le signaler. La chaîne copiée est la syntaxe canonique CSS Color 4 (`rgb(255 87 51)`) ; si votre cible a besoin de la forme à virgules héritée, la conversion est mécanique (remplacez les espaces par `, `). Pour une sortie spécifique à une plateforme (SwiftUI, Compose, Flutter, Tailwind v4), utilisez la section Copier comme code sous le sélecteur.
Le même hex que vous collez illumine également les autres champs de format — HSL pour le CSS hérité, OKLCH et OKLAB pour les systèmes de design perceptuellement uniformes, HSV et HWB pour les flux de sélecteur de couleur designer, CMYK pour les estimations d'impression et la couleur CSS nommée la plus proche pour la documentation et la prose. Vous n'êtes jamais enfermé dans hex → RGB seulement ; si vous avez aussi besoin du triplet OKLCH à déposer dans un bloc `@theme` Tailwind v4, il est juste là dans le champ OKLCH avec son propre bouton Copier.
Sous la grille de formats se trouvent un carré SL + curseur de teinte + curseur alpha pour l'exploration visuelle. Faites glisser n'importe quel contrôle et chaque champ texte se met à jour en temps réel, y compris le HEX et le RGB par lesquels vous avez commencé. Sur les navigateurs basés sur Chromium (Chrome, Edge, Brave), le bouton EyeDropper active l'API native `EyeDropper` pour échantillonner n'importe quel pixel à l'écran, y compris hors de la fenêtre du navigateur — utile quand vous voulez capturer un hex depuis l'UI d'une autre application sans capture d'écran préalable.
Le raccourci à 3 chiffres `#RGB` se développe en *dupliquant chaque chiffre*, pas en remplissant à gauche avec des zéros. `#F73` devient `#FF7733` (orange vif), pas `#000F73` (bleu foncé). C'est l'unique coin le plus erroné de la syntaxe de couleur CSS ; les débutants supposent fréquemment que le raccourci est une sorte de remplissage par zéros et finissent avec des couleurs totalement fausses. La même règle s'applique au raccourci alpha à 4 chiffres `#RGBA` — chaque chiffre se duplique pour former l'équivalent à 8 chiffres.
Supposer que #F73 se remplit à gauche vers #000F73 : attendu : bleu foncé rgb(0, 15, 115) réel : orange vif rgb(255, 119, 51)
Le raccourci à 3 chiffres duplique chaque chiffre : #F73 → #FF7733 → rgb(255, 119, 51) Vérifié par l'expansion en direct de l'outil au fil de la saisie.
Convertir RGB en hex exige que le `toString(16)` de chaque canal soit remplis à gauche à 2 chiffres. Sans `padStart(2, '0')`, les valeurs de canal à un seul chiffre produisent du hex invalide : `rgb(5, 87, 51)` se sérialiserait en `#55733` (5 caractères) au lieu de `#055733` (6 caractères). Beaucoup de convertisseurs ad hoc sautent le pad et produisent une sortie cassée pour tout canal sous 16. L'idiome standard est `value.toString(16).padStart(2, '0')` pour chacun de R, G, B.
Sauter padStart :
[5, 87, 51].map(v => v.toString(16)).join('') → '55733'
Produit un hex invalide à 5 caractères. Utiliser padStart(2, '0') :
[5, 87, 51].map(v => v.toString(16).padStart(2, '0')).join('') → '055733'
Hex valide à 6 caractères ; fonctionne correctement pour toutes les valeurs de canal 0-255. Le hex CSS à 8 chiffres est `#RRGGBBAA` — l'alpha est la paire *de fin*. Certaines bibliothèques de couleurs (notamment l'ancien `Color.parseColor()` d'Android) utilisent l'ordre opposé `#AARRGGBB` avec l'alpha comme paire *de tête*, ce qui est incompatible avec le hex CSS. Un hex web `#FF573380` (orange à 50 % d'alpha) interprété comme `#AARRGGBB` devient alpha=255, R=87, G=51, B=128 — un cyan foncé à pleine opacité. Vérifiez toujours l'ordre alpha de la plateforme cible avant de faire un aller-retour sur du hex à 8 chiffres.
Coller du hex CSS à 8 chiffres dans l'ancien Color.parseColor() d'Android : #FF573380 interprété comme #AARRGGBB → mauvaise couleur et mauvais alpha entièrement.
Utiliser le format documenté de la plateforme cible : pour Android Compose : Color(0xFFFF5733) avec alpha comme premier octet pour CSS : #FF573380 avec alpha comme dernier octet Ne pas coller en travers entre les deux sans réorganiser.
Les canaux RGB sont gamma-encodés, pas linéaires. Moyenner deux valeurs RGB donne un point médian perceptuellement faux. `(255, 0, 0)` moyenné avec `(0, 255, 0)` produit `(127, 127, 0)`, un olive foncé boueux, pas le point médian jaune lumineux attendu d'un mélange de lumière rouge et verte. Pour un mélange correct, décodez d'abord vers linear-RGB via la fonction de transfert sRGB (CSS Color 4 §11.2), moyennez en espace linéaire, puis ré-encodez. Ou travaillez en OKLAB / OKLCH où la distance perceptuelle est uniforme.
Moyenner du RGB gamma-encodé directement : (rgb(255,0,0) + rgb(0,255,0)) / 2 = rgb(128, 128, 0) Ressemble à un olive foncé, pas à un jaune lumineux.
Moyenner en linear-RGB : décoder → linear-RGB → moyenne → ré-encoder → rgb(188, 188, 0) Visiblement jaune lumineux, correspondant à ce que produit un mélange de lumière physique.
Outils de conversion
Convertissez entre binaire, hexadécimal, décimal, octal et toute base (2-36) instantanément. Gratuit, privé, 100 % dans votre navigateur.
Outils de conversion
Convertissez HEX en RGB, HSL, OKLCH, OKLAB et CMYK dans votre navigateur — copiez n'importe quel format en un clic. Gratuit, sans inscription, vos couleurs ne quittent jamais la page.
Outils de conversion
Convertissez n'importe quelle couleur HEX en CMYK dans votre navigateur. Approximation naïve basée sur sRGB pour les aperçus d'impression. Gratuit, instantané, sans inscription, vos couleurs restent locales.
Outils de conversion
Convertissez n'importe quelle couleur hex en HSL dans votre navigateur — hex à 3, 6 et 8 chiffres avec alpha pris en charge. Gratuit, instantané, sans inscription, vos couleurs ne quittent jamais la page.
Outils de conversion
Convertissez HEX en OKLCH pour les tokens de design Tailwind v4. Sortie perceptuellement uniforme en direct avec alertes de gamut chromatique Display P3. Gratuit, dans le navigateur.
Outils de conversion
Compressez vos images JPEG, PNG et WebP gratuitement dans le navigateur. Lots de 20 images, qualité réglable, comparaison avant/après. 100 % privé.