Passer au contenu principal

Convertisseur de couleurs

Le Convertisseur de couleurs est un outil en ligne qui convertit entre les formats de couleur HEX, RGB et HSL. Prend en charge la conversion bidirectionnelle en temps réel et la sélection de couleurs prédéfinies.

#3498DB

🎨 Sélecteur de Couleur

HEX

Le plus couramment 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 les couleurs directement avec le sélecteur de couleur ou entrez les valeurs manuellement.

Fonctionnalités​

  • Prise en charge de plusieurs formats : Prend en charge les formats HEX, RGB, HSL
  • Conversion en temps réel : Synchronise automatiquement tous les formats
  • Aperçu des couleurs : Affiche la couleur sélectionnée en temps réel
  • Couleurs prédéfinies : Sélection rapide de 10 couleurs courantes
  • Copie en un clic : Copiez rapidement la valeur de couleur dans n'importe quel format

Formats de couleur​

HEX (Hexadécimal)​

Code hexadécimal à 6 chiffres représentant la couleur :

#RRGGBB
#FF5733 → Rouge:255, Vert:87, Bleu:51

RGB (Rouge Vert Bleu)​

Utilise trois valeurs dans la plage 0-255 :

rgb(255, 87, 51)

HSL (Teinte, Saturation, Luminosité)​

  • Teinte (H) : 0-360 degrés (couleur sur la roue chromatique)
  • Saturation (S) : 0-100% (intensité de la couleur)
  • Luminosité (L) : 0-100% (clarté/obscurité)
hsl(9, 100%, 60%)

Exemples de programmation​

JavaScript​

// HEX vers RGB
function hexToRgb(hex) {
  const result = /^#?([a-f\d]{2})([a-f\d]{2})([a-f\d]{2})$/i.exec(hex);
  return result ? {
    r: parseInt(result[1], 16),
    g: parseInt(result[2], 16),
    b: parseInt(result[3], 16)
  } : null;
}

console.log(hexToRgb('#FF5733'));
// Sortie: {r: 255, g: 87, b: 51}

// RGB vers HEX
function rgbToHex(r, g, b) {
  return "#" + [r, g, b].map(x => {
    const hex = x.toString(16);
    return hex.length === 1 ? "0" + hex : hex;
  }).join('');
}

console.log(rgbToHex(255, 87, 51));
// Sortie: #ff5733

Utilisation CSS​

/* HEX */
.element {
  color: #FF5733;
}

/* RGB */
.element {
  color: rgb(255, 87, 51);
}

/* RGBA (avec transparence) */
.element {
  color: rgba(255, 87, 51, 0.5);
}

/* HSL */
.element {
  color: hsl(9, 100%, 60%);
}

/* HSLA (avec transparence) */
.element {
  color: hsla(9, 100%, 60%, 0.5);
}

Couleurs prédéfinies​

Nom de couleurHEXRGBUsage
Rouge#FF0000rgb(255, 0, 0)Erreur, avertissement
Bleu#0000FFrgb(0, 0, 255)Lien, information
Vert#00FF00rgb(0, 255, 0)Succès, confirmation
Jaune#FFFF00rgb(255, 255, 0)Avertissement, attention
Violet#800080rgb(128, 0, 128)Créativité, luxe
Orange#FFA500rgb(255, 165, 0)Action, énergie
Rose#FFC0CBrgb(255, 192, 203)Romance, douceur
Cyan#00FFFFrgb(0, 255, 255)Fraîcheur, moderne
Gris#808080rgb(128, 128, 128)Neutre, équilibre
Noir#000000rgb(0, 0, 0)Contraste, élégance

Cas d'usage​

1. Développement Web​

Définir les couleurs dans CSS :

:root {
  --primary-color: #667eea;
  --secondary-color: rgb(102, 126, 234);
  --accent-color: hsl(232, 75%, 67%);
}

2. Système de design​

Établir une palette de couleurs cohérente :

const colors = {
  primary: {
    hex: '#667eea',
    rgb: 'rgb(102, 126, 234)',
    hsl: 'hsl(232, 75%, 67%)'
  }
};

3. Visualisation de données​

Utiliser des codes de couleur dans les graphiques et diagrammes.

Outils associés​