Comment convertir des codes de couleur RVB en codes de couleur hexadécimaux en JavaScript ?

Extraire des codes de couleur hexadécimaux à partir de valeurs RVB

Obtenir des valeurs RVB des arrière-plans d'éléments à l'aide de jQuery peut ne pas toujours suffire. Vous devrez peut-être convertir ces valeurs en leurs équivalents hexadécimaux. Cet extrait de code montre comment extraire les valeurs RVB :

$('#selector').css('backgroundColor');

Notre objectif est d'obtenir les valeurs hexadécimales correspondantes pour les valeurs RVB.

Solution

La solution TL;DR fournit une fonction concise sur une seule ligne qui gère à la fois RVB et RGBA formats :

const rgba2hex = (rgba) => `#${rgba.match(/^rgba?\((\d+),\s*(\d+),\s*(\d+)(?:,\s*(\d+\.{0,1}\d*))?\)$/).slice(1).map((n, i) => (i === 3 ? Math.round(parseFloat(n) * 255) : parseFloat(n)).toString(16).padStart(2, '0').replace('NaN', '')).join('')}`

Solution mise à jour (2021)

Les navigateurs modernes prennent désormais en charge les fonctionnalités ECMAScript 5 et 2015, permettant une solution plus élégante :

const rgb2hex = (rgb) => `#${rgb.match(/^rgb\((\d+),\s*(\d+),\s*(\d+)\)$/).slice(1).map(n => parseInt(n, 10).toString(16).padStart(2, '0')).join('')}`

Cette fonction mise à jour simplifie la transformation des codes de couleur RVB en codes de couleur hexadécimaux.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!