Softonic

Convertisseur de code couleur

Étape 1 / 2
Suivant

Collez une couleur au format hex (#ff6600 ou #f60), rgb(255, 102, 0), séparé par des virgules 255, 102, 0 ou hsl(24, 100%, 50%), et le convertisseur la renvoie instantanément dans les deux autres formats, avec un aperçu de l’échantillon en direct et une copie en un clic par format.

Comment fonctionne la conversion de code couleur

  1. 1

    Entrez une couleur dans un format pris en charge

    Hex (#abc, #abcdef), rgb(r, g, b), séparé par des virgules r, g, b ou hsl(h, s%, l%).

  2. 2

    Analysé en une représentation interne

    L'outil convertit la valeur en RGB en interne, puis en déduit les équivalents hex et HSL.

  3. 3

    Tous les formats affichés

    Les chaînes hex, RGB et HSL correspondantes sont affichées côte à côte.

  4. 4

    Aperçu de l'échantillon en direct

    Affiche la couleur obtenue d'un coup d'œil pour confirmer la conversion avant de la copier.

Formats pris en charge

Format Exemple Utilisation
Hex 3 #F66 Abrégé ; uniquement pour les couleurs avec des chiffres répétés
Hex 6 #FF6B6B Par défaut pour CSS et design graphique
RGB rgb(255, 107, 107) CSS, JS, logiciels de design
Séparé par des virgules 255, 107, 107 Comme RGB sans la syntaxe de fonction
HSL hsl(0, 100%, 71%) Plus facile à comprendre pour la teinte/saturation/luminosité

Quand utiliser quoi

  • Hex pour CSS statique et transfert de design.
  • RGB lorsque vous passez les canaux à JavaScript ou à un logiciel de design.
  • HSL lors de l’ajustement de la luminosité ou de la saturation, le modèle mental est plus clair que RGB.

D’autres formats comme HSV, CMYK, LAB, LCH et OKLCH existent dans les outils de design. Ils décrivent la même couleur de façons différentes, mais ce convertisseur se concentre sur les trois formats web de base ci-dessus.

Précision

  • Les conversions entre hex, RGB et HSL sont exactes : hex et RGB sont le même modèle de couleur, et HSL est dérivé de RGB avec une formule standard.
  • Les valeurs HSL sont arrondies à des nombres entiers, donc un aller-retour peut décaler le dernier chiffre. La couleur visible est identique ; utilisez hex quand vous avez besoin d’une copie exacte bit pour bit.

Questions fréquentes

Hex ou rgb() pour une large compatibilité. hsl() lorsque vous recherchez de la lisibilité. Les navigateurs modernes prennent aussi en charge oklch() et d’autres formats, mais hex reste la valeur par défaut la plus sûre.

Non, le convertisseur n’accepte que des couleurs opaques : hex à 3 ou 6 chiffres, rgb() et hsl() sans canal alpha. Gardez rgba() ou l’hex à 8 chiffres directement dans votre CSS.

Non, le convertisseur n’accepte que les trois formats numériques. Utilisez un sélecteur de couleurs ou une recherche en ligne pour convertir d’abord la couleur nommée en hex.

HSL est affiché avec une teinte, une saturation et une luminosité en nombres entiers, donc un aller-retour peut décaler la valeur d’un point. La couleur visible est identique ; utilisez hex quand vous avez besoin d’une copie exacte.

Outils similaires

Référence de la table ASCII

Table ASCII complète de 0 à 127 avec décimal, hexadécimal, octal, binaire et référence numérique HTML pour chaque caractère, y compris les codes de contrôle comme NUL, LF et DEL.

Référence des caractères HTML

Liste consultable des entités HTML, de leurs codes nommés et numériques, et un copier-coller en un clic pour les caractères et symboles spéciaux.

Référence des raccourcis clavier

Recherchez les raccourcis par défaut documentés de VS Code, Chrome et Bash avec GNU Readline sous macOS, Windows et Linux.

Générateur de lettres aléatoires

Générez des lettres A-Z aléatoires. Choisissez le nombre, les majuscules, les minuscules ou le mélange, puis utilisez le résultat pour des jeux ou la classe.

Générateur d’accordéon CSS

Créez un accordéon de trois sections avec details et summary. Personnalisez textes, couleurs, espacements, icône et ouverture, puis copiez ou téléchargez le code.

Générateur de palettes de couleurs aléatoires

Générez des palettes aléatoires de 2 à 15 couleurs, choisissez un style vif, pastel, sourd ou sombre, puis copiez les codes HEX ou les variables CSS.