Passer au contenu principal

Convertisseur de Couleurs

Un outil en ligne gratuit supportant la conversion entre formats de couleurs HEX, RGB et HSL.

#3498DB

🎨 Sélection de couleur

HEX

Le plus utilisé sur le web

RGB

HSL

🎨 Couleurs prédéfinies

Prend en charge la conversion entre les formats de couleur HEX, RGB et HSL. Sélectionnez une couleur avec le sélecteur ou entrez les valeurs directement.

Qu'est-ce qu'un format de couleur ?​

Il existe différentes façons de représenter les couleurs dans l'environnement numérique. Chaque format a son propre usage et ses avantages, et il faut choisir le format approprié selon la situation.

Fonctionnalités principales​

  • Support de 3 formats : HEX, RGB, HSL
  • Conversion en temps réel : Tous les formats se mettent à jour automatiquement lors de la modification d'un format
  • Sélecteur de couleurs : Sélection visuelle des couleurs
  • Grand aperçu : Vérification de la couleur sélectionnée en grand
  • Copie instantanée : Copie de chaque format en un clic
  • Couleurs prédéfinies : 10 couleurs populaires fournies

Description des formats de couleur​

HEX (Hexadécimal)​

Format le plus utilisé sur le web.

Format :

#RRGGBB

Exemples :

#3498db  /* Bleu */
#e74c3c  /* Rouge */
#2ecc71  /* Vert */

Structure :

  • # : Préfixe
  • RR : Rouge (00-FF)
  • GG : Vert (00-FF)
  • BB : Bleu (00-FF)

Format court 3 chiffres :

#f00  /* Identique à #ff0000 */
#abc  /* Identique à #aabbcc */

Avantages :

  • Concis
  • Format par défaut en CSS
  • Facile à copier

Inconvénients :

  • Difficile à comprendre pour les humains
  • Ajustement de couleur non intuitif

RGB (Red, Green, Blue)​

Format utilisant les trois couleurs primaires de la lumière.

Format :

rgb(R, G, B)

Exemples :

rgb(52, 152, 219)   /* Bleu */
rgb(231, 76, 60)    /* Rouge */
rgb(46, 204, 113)   /* Vert */

Plage de valeurs :

  • Chaque canal : 0-255
  • 0 = Sombre, 255 = Clair

RGBA (avec transparence) :

rgba(52, 152, 219, 0.5)  /* 50% transparence */

Avantages :

  • Facile à comprendre
  • Ajustement indépendant de chaque canal de couleur
  • Intuitif en programmation

Inconvénients :

  • Plus long que HEX
  • Ajustement de luminosité non intuitif

HSL (Hue, Saturation, Lightness)​

Format utilisant teinte, saturation et luminosité.

Format :

hsl(H, S%, L%)

Exemples :

hsl(204, 70%, 53%)   /* Bleu */
hsl(6, 78%, 57%)     /* Rouge */
hsl(145, 63%, 49%)   /* Vert */

Plage de valeurs :

  • H (Hue) : 0-360° (roue des couleurs)
    • 0° = Rouge
    • 120° = Vert
    • 240° = Bleu
  • S (Saturation) : 0-100% (saturation)
    • 0% = Gris
    • 100% = Couleur pure
  • L (Lightness) : 0-100% (luminosité)
    • 0% = Noir
    • 50% = Couleur pure
    • 100% = Blanc

HSLA (avec transparence) :

hsla(204, 70%, 53%, 0.5)  /* 50% transparence */

Avantages :

  • Ajustement de couleur très intuitif
  • Ajustement facile de luminosité/saturation
  • Utile pour créer des palettes de couleurs

Inconvénients :

  • Moins intuitif que HEX/RGB
  • Non supporté par certains anciens navigateurs

Comparaison des formats de couleur​

CaractéristiqueHEXRGBHSL
Concision⭐⭐⭐⭐⭐⭐⭐
Lisibilité⭐⭐⭐⭐⭐⭐
Support CSS⭐⭐⭐⭐⭐⭐⭐⭐⭐
Facilité d'ajustement⭐⭐⭐⭐⭐⭐
Transparence✗✓✓

Cas d'usage​

1. Style CSS​

/* HEX */
.button {
  background-color: #3498db;
}

/* RGB */
.button {
  background-color: rgb(52, 152, 219);
}

/* HSL */
.button {
  background-color: hsl(204, 70%, 53%);
}

2. Génération de palette de couleurs​

/* Création facile de couleurs similaires avec HSL */
.primary   { color: hsl(204, 70%, 53%); }
.lighter   { color: hsl(204, 70%, 70%); }  /* Augmentation L */
.darker    { color: hsl(204, 70%, 35%); }  /* Diminution L */
.desaturate{ color: hsl(204, 40%, 53%); }  /* Diminution S */

Couleurs prédéfinies​

Cet outil fournit 10 couleurs populaires :

CouleurHEXNom
🔴#e74c3cRouge
🔵#3498dbBleu
🟢#2ecc71Vert
🟠#f39c12Orange
🟣#9b59b6Violet
🔷#1abc9cTurquoise
⚫#34495eGris foncé
🟤#e67e22Marron
⚪#95a5a6Gris clair
🟧#d35400Orange foncé

Conseils pratiques​

1. Éclaircir/Assombrir une couleur​

/* Original */
.button { background: hsl(204, 70%, 53%); }

/* 10% plus clair */
.button-light { background: hsl(204, 70%, 63%); }

/* 10% plus foncé */
.button-dark { background: hsl(204, 70%, 43%); }

2. Ajout de transparence​

/* Ajout de transparence à HEX (8 chiffres) */
#3498db80  /* 50% transparence */

/* RGB/HSL */
rgba(52, 152, 219, 0.5)
hsla(204, 70%, 53%, 0.5)

Questions fréquentes​

Q : Quel format dois-je utiliser ?​

  • HEX : Utilisation concise en CSS, facile à copier
  • RGB : Programmation, quand ajustement de chaque canal nécessaire
  • HSL : Création de palette de couleurs, ajustement de luminosité/saturation

Généralement HEX recommandé !

Q : Quelle est la différence entre 3 et 6 chiffres en HEX ?​

3 chiffres est le format court de 6 chiffres :

  • #f00 = #ff0000
  • #abc = #aabbcc

Utilisez 6 chiffres pour une couleur précise !

Q : Pourquoi la valeur maximale de RGB est-elle 255 ?​

8 bits = 2^8 = 256 valeurs (0-255) Nombre total de couleurs = 256 × 256 × 256 = 16 777 216 couleurs

Compatibilité des navigateurs​

FormatChromeFirefoxSafariEdge
HEX✓✓✓✓
RGB✓✓✓✓
RGBA✓✓✓✓
HSL✓✓✓✓
HSLA✓✓✓✓

Confidentialité​

Cet outil fonctionne entièrement côté client. Les informations de couleur sélectionnées ne sont pas envoyées au serveur et sont traitées uniquement dans votre navigateur.

💬 Cet outil vous a-t-il été utile ?​

N'hésitez pas à nous faire part de vos commentaires si vous avez des questions ou des suggestions d'amélioration !