Convertir un code hexadécimal en chaîne RGB

JavaScriptJavaScriptBeginner
Pratiquer maintenant

This tutorial is from open-source community. Access the source code

💡 Ce tutoriel est traduit par l'IA à partir de la version anglaise. Pour voir la version originale, vous pouvez cliquer ici

Introduction

Dans ce laboratoire, nous allons explorer la manière de convertir un code couleur hexadécimal en une chaîne rgb() ou rgba() à l'aide de JavaScript. Nous apprendrons à utiliser les opérateurs bit à bit et le masquage pour extraire les valeurs RGB du code hexadécimal. Le laboratoire couvrira également la manière de traiter les codes hexadécimaux à 3 et 6 chiffres et de incorporer une valeur alpha dans la chaîne résultante.


Skills Graph

%%%%{init: {'theme':'neutral'}}%%%% flowchart RL javascript(("JavaScript")) -.-> javascript/BasicConceptsGroup(["Basic Concepts"]) javascript(("JavaScript")) -.-> javascript/AdvancedConceptsGroup(["Advanced Concepts"]) javascript/BasicConceptsGroup -.-> javascript/variables("Variables") javascript/BasicConceptsGroup -.-> javascript/data_types("Data Types") javascript/BasicConceptsGroup -.-> javascript/arith_ops("Arithmetic Operators") javascript/BasicConceptsGroup -.-> javascript/comp_ops("Comparison Operators") javascript/BasicConceptsGroup -.-> javascript/cond_stmts("Conditional Statements") javascript/BasicConceptsGroup -.-> javascript/obj_manip("Object Manipulation") javascript/AdvancedConceptsGroup -.-> javascript/higher_funcs("Higher-Order Functions") javascript/AdvancedConceptsGroup -.-> javascript/spread_rest("Spread and Rest Operators") javascript/AdvancedConceptsGroup -.-> javascript/template_lit("Template Literals") subgraph Lab Skills javascript/variables -.-> lab-28375{{"Convertir un code hexadécimal en chaîne RGB"}} javascript/data_types -.-> lab-28375{{"Convertir un code hexadécimal en chaîne RGB"}} javascript/arith_ops -.-> lab-28375{{"Convertir un code hexadécimal en chaîne RGB"}} javascript/comp_ops -.-> lab-28375{{"Convertir un code hexadécimal en chaîne RGB"}} javascript/cond_stmts -.-> lab-28375{{"Convertir un code hexadécimal en chaîne RGB"}} javascript/obj_manip -.-> lab-28375{{"Convertir un code hexadécimal en chaîne RGB"}} javascript/higher_funcs -.-> lab-28375{{"Convertir un code hexadécimal en chaîne RGB"}} javascript/spread_rest -.-> lab-28375{{"Convertir un code hexadécimal en chaîne RGB"}} javascript/template_lit -.-> lab-28375{{"Convertir un code hexadécimal en chaîne RGB"}} end

Conversion hexadécimal en RGB

Pour convertir un code couleur hexadécimal (avec ou sans préfixe #) en une chaîne RGB, suivez les étapes suivantes :

  1. Ouvrez le Terminal/SSH et tapez node pour commencer à pratiquer la programmation.
  2. Utilisez l'opérateur de décalage arithmétique vers la droite bit à bit et masquez les bits avec l'opérateur & (ET).
  3. Si le code couleur est à 3 chiffres, convertissez-le d'abord en version à 6 chiffres.
  4. Si une valeur alpha est fournie avec le code hexadécimal à 6 chiffres, renvoyez une chaîne rgba().

Voici le code JavaScript pour la conversion :

const hexToRGB = (hex) => {
  let alpha = false,
    h = hex.slice(hex.startsWith("#") ? 1 : 0);
  if (h.length === 3) h = [...h].map((x) => x + x).join("");
  else if (h.length === 8) alpha = true;
  h = parseInt(h, 16);
  return (
    "rgb" +
    (alpha ? "a" : "") +
    "(" +
    (h >>> (alpha ? 24 : 16)) +
    ", " +
    ((h & (alpha ? 0x00ff0000 : 0x00ff00)) >>> (alpha ? 16 : 8)) +
    ", " +
    ((h & (alpha ? 0x0000ff00 : 0x0000ff)) >>> (alpha ? 8 : 0)) +
    (alpha ? `, ${h & 0x000000ff}` : "") +
    ")"
  );
};

Vous pouvez utiliser la fonction hexToRGB avec les exemples suivants :

hexToRGB("#27ae60ff"); // 'rgba(39, 174, 96, 255)'
hexToRGB("27ae60"); // 'rgb(39, 174, 96)'
hexToRGB("#fff"); // 'rgb(255, 255, 255)'

Résumé

Félicitations! Vous avez terminé le laboratoire Hex vers RGB. Vous pouvez pratiquer d'autres laboratoires sur LabEx pour améliorer vos compétences.