Conversion RGBA vers hex : guide complet des formats de couleur CSS pour web designers

Les couleurs sont l'ossature visuelle de chaque site web. Que vous définissiez une palette de marque, construisiez un interrupteur de mode sombre ou ajustiez une superposition glassmorphism, vous passerez constamment d'un format de couleur CSS à l'autre. Deux des formats les plus courants, RGBA et hexadécimal, représentent exactement la même information de façons différentes. Savoir les convertir, et savoir quand choisir l'un plutôt que l'autre, fait gagner du temps et évite des bugs subtils.

Ce guide parcourt étape par étape le processus de conversion RGBA-vers-hex, explique le format hex sur 8 chiffres pour la transparence alpha, compare tous les grands formats de couleur CSS et couvre les standards d'accessibilité qui devraient guider vos choix de couleurs. Utilisez notre convertisseur RGBA vers Hex gratuit pour suivre n'importe quel exemple.

Qu'est-ce que le format de couleur RGBA

RGBA est une fonction de couleur CSS qui définit une couleur avec quatre canaux :

R (Red) : 0 à 255
G (Green) : 0 à 255
B (Blue) : 0 à 255
A (Alpha) : 0.0 (totalement transparent) à 1.0 (totalement opaque)

Les canaux RGB contrôlent la couleur elle-même en mélangeant la lumière rouge, verte et bleue à différentes intensités. Le canal alpha contrôle la transparence ou l'opacité apparente de la couleur lorsqu'elle est superposée à d'autres contenus.

Syntaxe CSS

La syntaxe traditionnelle utilise des virgules :

CSS2 lignes

Surligner le code...

color: rgba(255, 0, 0, 0.5);  /* semi-transparent red */

Le CSS moderne (Color Level 4) prend aussi en charge une syntaxe séparée par des espaces avec un slash pour l'alpha :

CSS2 lignes

Surligner le code...

color: rgb(255 0 0 / 0.5);  /* identical result */

Les deux formes produisent le même résultat. La syntaxe moderne fonctionne dans tous les navigateurs actuels et est légèrement plus concise.

Fonctionnement du mélange RGB

RGB est un modèle de couleur additif. Lorsque les trois canaux sont au maximum (255, 255, 255), le résultat est blanc. Lorsqu'ils sont tous à zéro (0, 0, 0), le résultat est noir. Le mélange des canaux produit d'autres couleurs :

rgb(255, 0, 0) -- rouge pur
rgb(0, 255, 0) -- vert pur (lime)
rgb(0, 0, 255) -- bleu pur
rgb(255, 255, 0) -- jaune (rouge + vert)
rgb(0, 255, 255) -- cyan (vert + bleu)
rgb(255, 0, 255) -- magenta (rouge + bleu)
rgb(128, 128, 128) -- gris neutre

Chaque canal a 256 valeurs possibles (0 à 255), donc le nombre total de couleurs RGB uniques est 256 x 256 x 256 = 16 777 216.

Qu'est-ce qu'un code couleur hexadécimal

Un code couleur hexadécimal (hex) est une manière compacte de représenter une couleur RGB avec la notation en base 16. Le format est #RRGGBB, où chaque paire de caractères représente un canal de couleur.

L'hexadécimal utilise 16 chiffres : 0-9 et A-F. Chaque paire de deux caractères peut représenter des valeurs de 00 (décimal 0) à FF (décimal 255), ce qui correspond exactement à la plage 0-255 des canaux RGB.

Exemples hex courants

Couleur	Code hex	Équivalent décimal
Noir	`#000000`	rgb(0, 0, 0)
Blanc	`#FFFFFF`	rgb(255, 255, 255)
Rouge	`#FF0000`	rgb(255, 0, 0)
Vert	`#008000`	rgb(0, 128, 0)
Bleu	`#0000FF`	rgb(0, 0, 255)
Jaune	`#FFFF00`	rgb(255, 255, 0)
Gris	`#808080`	rgb(128, 128, 128)

Hex raccourci

Lorsque les deux chiffres de chaque paire sont identiques, CSS autorise un raccourci à 3 chiffres : #RGB. Par exemple, #FF0000 peut s'écrire #F00, et #AABBCC peut être abrégé en #ABC. Le navigateur développe chaque chiffre en le répétant : #F00 devient #FF0000.

Comment convertir RGBA en hex

Le processus de conversion comporte deux parties : convertir les canaux RGB et convertir le canal alpha.

Étape 1 : convertir chaque canal RGB en hex

Pour chaque valeur de canal (0-255), divisez par 16. Le quotient devient le premier chiffre hex et le reste devient le second.

Exemple : convertir R = 255

255 / 16 = 15 remainder 15
Hex digits: F (15) and F (15) = FF

Exemple : convertir G = 128

128 / 16 = 8 remainder 0
Hex digits: 8 and 0 = 80

Exemple : convertir B = 64

64 / 16 = 4 remainder 0
Hex digits: 4 and 0 = 40

La correspondance des chiffres hex pour les valeurs 10-15 : A=10, B=11, C=12, D=13, E=14, F=15.

Étape 2 : convertir alpha en hex

Le canal alpha en RGBA va de 0.0 à 1.0, mais l'hex utilise 0 à 255. Pour convertir :

Multipliez la valeur alpha par 255
Arrondissez à l'entier le plus proche
Convertissez cet entier en valeur hex sur deux chiffres

Exemple : convertir alpha = 0.5

0.5 x 255 = 127.5
Round: 128
128 / 16 = 8 remainder 0 = 80

Étape 3 : combiner en code hex

Concaténez toutes les paires hex avec un préfixe # :

Hex sur 6 chiffres (sans alpha) : #RRGGBB
Hex sur 8 chiffres (avec alpha) : #RRGGBBAA

Exemple détaillé : rgba(66, 135, 245, 0.75)

R = 66 : 66 / 16 = 4 remainder 2 --> 42
G = 135 : 135 / 16 = 8 remainder 7 --> 87
B = 245 : 245 / 16 = 15 remainder 5 --> F5
A = 0.75 : 0.75 x 255 = 191.25, arrondi à 191, 191 / 16 = 11 remainder 15 --> BF

Résultat : #4287F5 (6 chiffres) ou #4287F5BF (8 chiffres avec alpha)

Exemple détaillé : rgba(255, 0, 0, 0.5)

R = 255 --> FF
G = 0 --> 00
B = 0 --> 00
A = 0.5 --> 0.5 x 255 = 127.5, arrondi à 128 --> 80

Résultat : #FF0000 (6 chiffres) ou #FF000080 (8 chiffres avec alpha)

Comprendre l'hex sur 8 chiffres (#RRGGBBAA)

Les codes hex standard sur 6 chiffres représentent uniquement des couleurs opaques. Le format hex sur 8 chiffres étend cela en ajoutant deux chiffres alpha à la fin.

Décomposition du format

#RRGGBBAA
 |  |  |  |
 |  |  |  +-- Alpha (00 = transparent, FF = opaque)
 |  |  +----- Blue channel
 |  +-------- Green channel
 +----------- Red channel

Valeurs alpha courantes en hex

Opacité	Alpha (0-1)	Décimal (0-255)	Hex
100%	1.0	255	FF
90%	0.9	230	E6
80%	0.8	204	CC
75%	0.75	191	BF
60%	0.6	153	99
50%	0.5	128	80
40%	0.4	102	66
25%	0.25	64	40
20%	0.2	51	33
10%	0.1	26	1A
0%	0.0	0	00

Prise en charge navigateur

Les couleurs hex sur 8 chiffres font partie de la spécification CSS Color Level 4. Prise en charge navigateur :

Chrome 62+ (octobre 2017)
Firefox 49+ (septembre 2016)
Safari 10+ (septembre 2016)
Edge 79+ (janvier 2020)

Tous les navigateurs actuels prennent en charge ce format. Pour les projets qui doivent prendre en charge Internet Explorer ou de très anciennes versions de navigateurs, utilisez plutôt la fonction rgba().

Raccourci 4 chiffres (#RGBA)

Comme le raccourci 3 chiffres pour l'hex sur 6 chiffres, CSS prend en charge un raccourci 4 chiffres pour l'hex sur 8 chiffres : #RGBA. Chaque chiffre est doublé par le navigateur. Par exemple, #F008 se développe en #FF000088.

Comparaison des formats de couleur CSS

CSS offre plusieurs formats de couleur, chacun avec ses forces et compromis. Voici une comparaison complète :

HEX (#RRGGBB)

Avantages : compact, largement pris en charge, standard dans les outils de design (Figma, Sketch, Photoshop)
Inconvénients : peu intuitif à lire, pas d'alpha intégré (6 chiffres), plus difficile à manipuler par programme
Exemple : #3B82F6

RGB / RGBA

Avantages : valeurs de canaux faciles à comprendre, support alpha, manipulation programmatique facile
Inconvénients : plus verbeux que l'hex, valeurs de canaux (0-255) peu intuitives pour choisir une couleur
Exemple : rgba(59, 130, 246, 0.8)

HSL / HSLA

Avantages : modèle intuitif (hue = couleur, saturation = intensité, lightness = luminosité), facile pour créer des variations de couleur
Inconvénients : moins courant dans les exports d'outils de design, un peu plus difficile à mapper à la couleur écran
Exemple : hsla(217, 91%, 60%, 0.8)

HWB (Hue, Whiteness, Blackness)

Avantages : modèle mental simple pour teinter et ombrer
Inconvénients : moins connu, support limité dans les outils
Exemple : hwb(217 23% 4%)

OKLCH

Avantages : perceptuellement uniforme (des changements numériques égaux produisent des changements visuels égaux), excellent pour les design systems
Inconvénients : format plus récent, moins familier pour beaucoup de développeurs, nécessite de comprendre le modèle lightness-chroma-hue
Exemple : oklch(0.63 0.19 248)

LAB / LCH

Avantages : indépendant des appareils, perceptuellement uniforme
Inconvénients : modèle mental complexe, avantage pratique limité par rapport à OKLCH
Exemple : lab(54% -5 -48)

Tableau récapitulatif

Format	Alpha	Intuitif	Compact	Programmatique	Outils de design
HEX	8 chiffres	Non	Oui	Modéré	Standard
RGB	Non	Modéré	Non	Facile	Courant
RGBA	Oui	Modéré	Non	Facile	Courant
HSL	Non	Oui	Non	Modéré	Certains
HSLA	Oui	Oui	Non	Modéré	Certains
OKLCH	Oui	Modéré	Non	Modéré	En croissance

Quand utiliser RGBA ou hex dans votre CSS

RGBA et hex représentent les mêmes couleurs. Le choix dépend souvent du contexte, de l'outillage et des conventions d'équipe. Comprendre les compromis vous aide à prendre des décisions cohérentes dans un projet.

Utilisez hex quand :

Transmission depuis le design : Figma, Sketch et les outils Adobe exportent les couleurs en hex par défaut. Utiliser hex dans votre CSS garde les valeurs cohérentes avec les specs de design et réduit les erreurs de transcription pendant l'implémentation.
Couleurs statiques : pour les couleurs pleines sans transparence, l'hex sur 6 chiffres est le format le plus compact. #3B82F6 est plus court que rgb(59, 130, 246), ce qui économise des octets dans vos feuilles de style.
Propriétés personnalisées CSS : hex fonctionne proprement dans les variables CSS : --color-primary: #3B82F6;. Beaucoup de frameworks de design system et bibliothèques de composants stockent leurs tokens en hex.
Lecture rapide : les développeurs expérimentés reconnaissent les valeurs hex courantes d'un coup d'œil (#FFF, #000, #333). Avec le temps, les équipes se familiarisent avec les codes hex de leur marque.
Tailwind CSS et frameworks utilitaires : la palette de Tailwind utilise hex en interne. Les couleurs personnalisées dans tailwind.config.js sont généralement définies comme des valeurs hex.

Utilisez RGBA quand :

Transparence : RGBA rend l'opacité immédiatement évidente. rgba(0, 0, 0, 0.5) communique clairement "noir à 50 % d'opacité" à quiconque lit le code, sans devoir décoder les chiffres alpha hex.
Manipulation dynamique : lorsque vous devez ajuster des canaux individuels en JavaScript, les valeurs RGBA sont plus faciles à parser et modifier que les chaînes hex. Les fonctions comme les color pickers et générateurs de thèmes travaillent souvent avec des valeurs de canaux décimales en interne.
Overlays et glassmorphism : les éléments transparents superposés sont plus lisibles avec des valeurs alpha explicites. L'intention de background: rgba(255, 255, 255, 0.1) est plus claire que background: #FFFFFF1A.
Animation : les transitions entre couleurs de différentes opacités sont plus intuitives avec RGBA. Les transitions CSS fonctionnent aussi bien avec les deux formats, mais RGBA rend l'intention d'animation plus évidente dans le code source.
Rendu côté serveur : lorsque vous générez des couleurs dynamiquement sur le serveur (graphiques, visualisations de données ou thèmes personnalisés), construire des chaînes rgba() depuis des valeurs numériques est plus simple que construire des chaînes hex.

Utilisez HSL/HSLA quand :

Palettes de couleurs : HSL facilite la génération de variantes plus claires/sombres en ajustant la luminosité, ou plus/moins saturées en ajustant la saturation. Par exemple, passer la luminosité de 50 % à 30 % assombrit une couleur tout en gardant la même teinte et saturation.
Changement de thème : ajuster la teinte en gardant saturation et luminosité constantes produit des variations harmonieuses. Un thème peut tourner la teinte de 180 degrés pour créer une palette complémentaire.
Génération programmatique de couleurs : lors de la construction d'échelles de couleurs ou de palettes accessibles par algorithme, HSL fournit des contrôles plus intuitifs que RGB. Augmenter la luminosité par pas égaux produit des gradients visuellement réguliers.

Accessibilité et contraste des couleurs

Choisir des couleurs ne relève pas seulement de l'esthétique. Les Web Content Accessibility Guidelines (WCAG) définissent des ratios de contraste minimaux pour garantir que le texte reste lisible par les personnes avec déficiences visuelles.

Exigences de contraste WCAG

Niveau	Texte normal	Grand texte
AA	4.5	3
AAA	7	4.5

Le grand texte est défini comme 18pt (24px) ou 14pt gras (18,66px gras).

Fonctionnement du ratio de contraste

Le ratio de contraste compare la luminance relative de deux couleurs sur une échelle de 1

(aucun contraste, même couleur) à 21

(contraste maximal, noir sur blanc). La formule utilise la luminance relative de chaque couleur :

contrast ratio = (L1 + 0.05) / (L2 + 0.05)

où L1 est la luminance relative de la couleur la plus claire et L2 celle de la plus sombre.

La luminance relative est calculée à partir des valeurs sRGB avec une formule pondérée qui tient compte de la perception humaine de la luminosité. Le vert contribue le plus à la luminosité perçue (0.7152), suivi du rouge (0.2126), puis du bleu (0.0722). C'est pourquoi le vert pur (#00FF00) paraît beaucoup plus lumineux que le bleu pur (#0000FF), même si les deux canaux sont à intensité maximale.

Exemples courants de contraste

Voici des exemples pratiques pour illustrer les ratios qui réussissent ou échouent :

Premier plan	Arrière-plan	Ratio	WCAG AA	WCAG AAA
#000000	#FFFFFF	21	Réussite	Réussite
#333333	#FFFFFF	12.6	Réussite	Réussite
#767676	#FFFFFF	4.54	Réussite	Échec
#808080	#FFFFFF	3.95	Échec	Échec
#FFFFFF	#3B82F6	3.44	Échec	Échec
#FFFFFF	#1D4ED8	6.98	Réussite	Échec

Notez que #767676 (un gris moyen) est le gris le plus clair qui réussit WCAG AA sur blanc. C'est un repère utile à mémoriser pour choisir les couleurs de texte.

Alpha et contraste

Lorsque vous utilisez des couleurs RGBA avec transparence alpha, la couleur effective dépend de l'arrière-plan derrière elle. Une couleur de texte semi-transparente qui satisfait les exigences sur fond blanc peut échouer sur fond sombre, ou inversement. Vérifiez toujours le contraste avec l'arrière-plan réel sur lequel la couleur apparaîtra.

Par exemple, rgba(0, 0, 0, 0.5) sur fond blanc produit une couleur effective d'environ rgb(128, 128, 128) (#808080), qui a un ratio de contraste de 3.95

contre le blanc, échouant à l'exigence WCAG AA de 4.5

pour le texte normal.

Pour calculer la couleur effective d'une couleur semi-transparente sur un arrière-plan, mélangez chaque canal :

effective_channel = foreground_channel * alpha + background_channel * (1 - alpha)

Pour rgba(0, 0, 0, 0.5) sur blanc (rgb(255, 255, 255)) :

R = 0 * 0.5 + 255 * 0.5 = 127.5 ≈ 128
G = 0 * 0.5 + 255 * 0.5 = 127.5 ≈ 128
B = 0 * 0.5 + 255 * 0.5 = 127.5 ≈ 128

La couleur effective est rgb(128, 128, 128) ou #808080.

Conseils pratiques

Testez les ratios de contraste avec les outils développeur du navigateur (Chrome DevTools affiche les ratios dans le color picker)
Évitez si possible d'utiliser la transparence alpha pour les couleurs de texte : utilisez une couleur solide qui atteint le contraste voulu
Lorsque les overlays doivent être semi-transparents, assurez-vous que le texte au-dessus respecte encore les exigences de contraste
Utilisez la media query prefers-contrast pour augmenter le contraste pour les utilisateurs qui le demandent
Rappelez-vous que les exigences de contraste s'appliquent au texte comme au contenu non textuel (icônes, contrôles de formulaire, indicateurs de focus) à partir de WCAG 2.1
Pour le grand texte (18pt ou 14pt gras), le ratio minimal descend de 4.5
à 3
, mais visez quand même 4.5
pour une meilleure lisibilité

Exemples de programmation

JavaScript : RGBA vers hex

JavaScript23 lignes

Surligner le code...

580 caractères

function rgbaToHex(r, g, b, a = 1) {
  const toHex = (n) => {
    const hex = Math.round(n).toString(16).padStart(2, '0');
    return hex.toUpperCase();
  };

  const hexR = toHex(r);
  const hexG = toHex(g);
  const hexB = toHex(b);
  const hexA = toHex(Math.round(a * 255));

  // Return 6-digit if fully opaque, 8-digit otherwise
  if (a === 1) {
    return `#${hexR}${hexG}${hexB}`;
  }
  return `#${hexR}${hexG}${hexB}${hexA}`;
}

// Usage
rgbaToHex(255, 128, 0, 0.5);   // "#FF800080"
rgbaToHex(59, 130, 246, 1);    // "#3B82F6"
rgbaToHex(0, 0, 0, 0.75);     // "#000000BF"

JavaScript : hex vers RGBA

JavaScript21 lignes

Surligner le code...

645 caractères

function hexToRgba(hex) {
  hex = hex.replace('#', '');

  // Expand shorthand (#RGB or #RGBA)
  if (hex.length === 3) hex = hex.split('').map(c => c + c).join('');
  if (hex.length === 4) hex = hex.split('').map(c => c + c).join('');

  const r = parseInt(hex.substring(0, 2), 16);
  const g = parseInt(hex.substring(2, 4), 16);
  const b = parseInt(hex.substring(4, 6), 16);
  const a = hex.length === 8
    ? parseInt(hex.substring(6, 8), 16) / 255
    : 1;

  return { r, g, b, a: Math.round(a * 100) / 100 };
}

// Usage
hexToRgba('#FF000080');  // { r: 255, g: 0, b: 0, a: 0.5 }
hexToRgba('#3B82F6');    // { r: 59, g: 130, b: 246, a: 1 }

Python : RGBA vers hex

Python15 lignes

Surligner le code...

def rgba_to_hex(r, g, b, a=1.0):
    """Convert RGBA values to hex color code."""
    hex_r = format(round(r), '02X')
    hex_g = format(round(g), '02X')
    hex_b = format(round(b), '02X')
    hex_a = format(round(a * 255), '02X')

    if a == 1.0:
        return f'#{hex_r}{hex_g}{hex_b}'
    return f'#{hex_r}{hex_g}{hex_b}{hex_a}'

# Usage
print(rgba_to_hex(255, 128, 0, 0.5))   # #FF800080
print(rgba_to_hex(59, 130, 246))        # #3B82F6

CSS : utiliser les deux formats

CSS25 lignes

Surligner le code...

529 caractères

/* Hex for solid colors */
.button {
  background-color: #3B82F6;
  color: #FFFFFF;
  border: 1px solid #2563EB;
}

/* RGBA for overlays and transparency */
.modal-backdrop {
  background-color: rgba(0, 0, 0, 0.5);
}

/* 8-digit hex for transparency */
.glass-panel {
  background-color: #FFFFFF40; /* white at 25% opacity */
  backdrop-filter: blur(10px);
}

/* CSS custom properties with both formats */
:root {
  --color-primary: #3B82F6;
  --color-overlay: rgba(0, 0, 0, 0.5);
  --color-glass: #FFFFFF26; /* 15% opacity */
}

FAQ

Puis-je utiliser l'hex sur 8 chiffres dans du HTML d'e-mail ?

La prise en charge de l'hex sur 8 chiffres par les clients e-mail est incohérente. Outlook et certains anciens clients e-mail ne le prennent pas en charge. Pour les modèles d'e-mail, utilisez la fonction rgba() ou des couleurs solides avec opacité séparée si nécessaire. Testez toujours dans plusieurs clients e-mail avant d'utiliser des fonctionnalités CSS récentes.

Existe-t-il une différence de performance entre RGBA et hex ?

Non. Les deux formats sont parsés par le navigateur vers la même représentation de couleur interne. La différence de performance est nulle. Choisissez selon la lisibilité et les conventions d'équipe, pas selon la performance.

Comment convertir hex en RGBA en CSS ?

CSS n'a pas de fonction de conversion intégrée. Si vous avez besoin de valeurs RGBA à partir d'un code hex, utilisez un outil de conversion ou JavaScript. Cependant, vous pouvez utiliser les valeurs hex directement dans toute propriété CSS acceptant des couleurs : il n'y a pas besoin de convertir pour CSS. Les deux formats fonctionnent partout.

Pourquoi ma valeur alpha hex semble-t-elle incorrecte ?

Le problème le plus courant est l'étape d'arrondi. Alpha 0.5 vaut mathématiquement 127.5 lorsqu'il est multiplié par 255. Différents outils arrondissent différemment : certains à 127 (hex 7F), d'autres à 128 (hex 80). Cela produit des opacités légèrement différentes (49,8 % vs 50,2 %), visuellement indiscernables. Notre convertisseur utilise Math.round() pour la cohérence.

Dois-je utiliser hex ou RGBA pour les variables CSS ?

Les deux fonctionnent. Hex est plus compact et standard dans la plupart des design systems. Toutefois, si vous devez manipuler des canaux individuels (par exemple changer l'opacité en JavaScript), RGBA est plus facile à travailler. Un motif courant consiste à définir la couleur de base en hex et à utiliser RGBA lorsque vous avez besoin de variantes transparentes.

Quelle est la différence entre opacity et alpha ?

La propriété CSS opacity affecte un élément entier et tous ses enfants. L'alpha dans RGBA ou l'hex sur 8 chiffres affecte seulement la couleur précise à laquelle il est appliqué. Par exemple, opacity: 0.5 rend le texte, les bordures, les arrière-plans et les éléments enfants semi-transparents. background: rgba(0,0,0,0.5) rend uniquement l'arrière-plan semi-transparent tout en gardant le texte et les autres contenus pleinement opaques.

Cette distinction compte dans les motifs UI pratiques. Un backdrop de modal a besoin d'un arrière-plan semi-transparent (rgba(0,0,0,0.5)) tout en gardant son contenu enfant (la boîte modale) entièrement opaque. Utiliser opacity: 0.5 sur l'élément backdrop rendrait aussi la boîte modale semi-transparente, ce qui n'est pas le résultat voulu. De même, une carte avec effet verre dépoli utilise background: rgba(255,255,255,0.1) combiné avec backdrop-filter: blur(10px) : l'alpha crée la couche translucide tandis que le texte au-dessus reste net et lisible.

Comment parser RGBA depuis une chaîne CSS ?

Pour extraire les valeurs RGBA d'une chaîne CSS comme rgba(255, 128, 0, 0.5), utilisez une expression régulière :

JavaScript11 lignes

Surligner le code...

function parseRgba(str) {
  const match = str.match(/rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*([\d.]+))?\)/);
  if (!match) return null;
  return {
    r: parseInt(match[1]),
    g: parseInt(match[2]),
    b: parseInt(match[3]),
    a: match[4] ? parseFloat(match[4]) : 1,
  };
}

Cela gère les formats rgb() et rgba() avec la syntaxe traditionnelle séparée par des virgules. Pour la syntaxe moderne séparée par des espaces (rgb(255 128 0 / 0.5)), ajustez la regex pour faire correspondre les espaces et le slash.