Tuesday, 15 May 2012

css - Convert 8-digit hex colors to rgba colors? -


Whatever I have found on this subject, just converts hex to RGB and then adds alpha of 1 . I want to meet as well as the expected alpha with hex digits.

A color such as # 949494E8 or # DCDCDC8F is clearly an alpha value that is not 0 or 1.

I have created a quick JSfield form that lets you convert from 8-digit hex code to CSS Allows RGBA value;)

This base is very easy - to divide the given wire in the 2-point part, and convert it to the percent ratio for the alpha channel. , And follow the markup for Decimal for RGB channels:

  & lt; Form action = "" & gt; & Lt; Select ID = "Format" & gt; & Lt; Option value = "RGBA" & gt; RGBA: RRGGBA & lt; / Options & gt; & Lt; Option value = "arg"> ARGb: AARRGGbb & lt; / Options & gt; & Lt; / Select & gt; & Lt; Input type = "text" id = "hex" value = "# 949494E8" /> & Lt; Button & gt; Convert & lt; / Button & gt; & Lt; / Form & gt; & Lt; P id = "rgba" & gt; & Lt; / P & gt; Remove  

argument:

  // hash var hex = $ ('# hex'). Val (). Piece (1); // split to four channel var c = hex.match (/. {1,2} / g); // Function: for decimal (for RGB) var d = function (v) {return parseInt (v, 16); }; // function: percent (for alpha), var p = function for 3 decimal (v) {return parsefloat (parseInt ((parseInt (v, 16) / 255) * 1000) / 1000); }; // Check format: if it is argb, pop the alpha value from the end and forward it to var a, rgb = []; If ($ ('# format'). Val () == 'argb') {c.unshift (c.pop ()); } // change the array to RGB values ​​a = p (c [3]); $ .each (C. salis (0,3), function (i, v) {rgb.push (d (v));});  

The summary of the conversion is as follows:

  • Changing RGB channels in Hexa, converting into decimal values. This is done using the parseInt (hexvalue, 16) .
  • By changing the alpha channel in hex, in percentage ratio. This is done only by changing the decimal values ​​(see above point), and its relative value is calculated to 255.

No comments:

Post a Comment