web-dev-qa-db-fra.com

Convertir RGBA en HEX

Étant donné une valeur de couleur CSS comme:

 rgba(0, 0, 0, 0.86)

Comment puis-je convertir cela en une valeur hexadécimale RVB qui prend en compte la composante alpha, en supposant un fond blanc?

htmlcsscolorshexrgba
24
Michael Böckling

Étant donné que la valeur alpha atténue à la fois la couleur d'arrière-plan et la valeur de la couleur, quelque chose comme cela pourrait faire l'affaire:

function rgba2rgb(RGB_background, RGBA_color)
{
    var alpha = RGBA_color.a;

    return new Color(
        (1 - alpha) * RGB_background.r + alpha * RGBA_color.r,
        (1 - alpha) * RGB_background.g + alpha * RGBA_color.g,
        (1 - alpha) * RGB_background.b + alpha * RGBA_color.b
    );
}

(Essayez-le interactivement: http://marcodiiga.github.io/rgba-to-rgb-conversion )

44
Marco A.

vous pouvez convertir le rouge, le vert et le bleu individuellement en utilisant .toString(16) puis combiner le résultat dans un cas, si vous voulez simplement convertir un rgb en hex ... puisque vous cherchez à convertir rgba en hex je pensais il serait préférable de convertir le rgba en rgb puis en hex comme je l'ai fait dans ce qui suit Fiddle , qui considérerait également le background-color du parentdiv.

0
Green Wizard

En supposant que les valeurs sont 0 ... 1 par canal. Et en supposant que l'abréviation dans l'appel de méthode/fonction dans la question correspond aux arguments, ce qui suit devrait fonctionner.

A = 255 * 0.86
R = 255 * 0
G = 255 * 0
B = 255 * 0

Notez que vous voudrez peut-être changer la façon dont il se termine ici car cela peut donner des inexactitudes dans les couleurs.

À ce stade, les valeurs sont en fait toujours des valeurs à virgule flottante, mais leur conversion en octet ou en caractère (selon la langue) devrait en théorie fonctionner.

var _A = (byte)219.3
var _R = (byte)0
var _G = (byte)0
var _B = (byte)0

Maintenant, tout ce que vous avez à faire est de les convertir en une chaîne hexadécimale chacun, de les concaténer (ARGB) et de mettre une jolie petite balise de hachage devant (#)

En C #, vous pourriez faire quelque chose de semblable à:

var hexString = string.Format("#{0:X2}{1:X2}{2:X2}{3:X2}", _A, _R, _G, _B);

Donner un résultat final de quelque chose comme:

#DB000000
0
t0yk4t