10

how could i get the color-code from a linear gradient value using jQuery.Suppose if I have a linear gradient value as

background:linear-gradient(to right, #fff 87%,rgba(238,237,233,0) 100%);

how could i extract the color code from this.I should be getting the final output as #fff in this case..I tried using

$('selector').css('background-color');

which does not help me get the color-code.Could someone help me figure this out.Thanks.. :)

6

3 Answers 3

1

One possible solution would be to create a canvas element using the 'selector' class|id to style it.

Then you could establish the RGBA of a pixel on that canvas.. VERY 'hacky' but its the only thing my little brain can think of!

Something like this (Not tested!):

Lets say your html looks something like this :

<style>
.background_element{
background:linear-gradient(to right, #fff 87%,rgba(238,237,233,0) 100%);
}
</style>

Then you want to check the background colour .. so we create a canvas object to clone the div at that time.

var canvas = document.createElement('canvas');
//apply width and heigh 1px
canvas.css('background-color', $('.background_element').style.backgroundColor);

Then we cant to get the colour of a pixel on this canvas..

var pixelData = this.canvas.getContext('2d').getImageData(1, 1, 1, 1).data;
console.log('R: ' + pixelData[0] + '<br>G: ' + pixelData[1] + '<br>B: ' + pixelData[2] + '<br>A: ' + pixelData[3]);

This would log the RGBA to the console.. Maybe..

- Note: I dont recommend this for production env of course, meerly a proof of concept!

Inspiration

Alternatively

You could be very fancy and really strip into the RGBA with HTMLelement.prototype.alpha! :)

Something like :

HTMLElement.prototype.alpha = function(a) {
        current_color = getComputedStyle(this).getPropertyValue("background-color");
        match = /rgba?\((\d+)\s*,\s*(\d+)\s*,\s*(\d+)\s*(,\s*\d+[\.\d+]*)*\)/g.exec(current_color)
        a = a > 1 ? (a / 100) : a;
        console.log("rgba(" + [match[1],match[2],match[3],a].join(',') +")");
      }

Again very messy but there is a good chance this will be more percise !

0

Try

 $(function () {
     (function ($) {
         $.fn.rgb2hex = function (prop) {
             return $.map(
             $(this)
               .css(prop)
               .split(/([rgb|rgba|+[\(]+[\d]+[\,]+[ \d]+[\, \d]+[ \d]+[\)])/)
             , function (value, index) {
                 if (value.indexOf("rgb") != -1) {
                    var _rgba = function () {
                      return $.map(value.replace(/[rgba]|[rgb]|[\(|\)]/g, "")
                             .split(",").map(function (r) {
                             return parseInt(r, 10)
                         }), function (k, v) {
                             var h = k.toString(16);
                             var hex = h.length === 1 ? "0" + h : h;
                             var _hex = [];
                             _hex.push(hex);
                             return _hex;
                         });
                     };
                     return $.map([$.makeArray([], _rgba())]
                     , function (v, i) {
                         return (v.length === 4 
                                ? "#" + v.slice(0, 3).join("") 
                                : "#" + v.join("")
                                );
                     });
                 };
             });
         };
     })(jQuery);

     console.log($("div").css("background")
                 , $("div").rgb2hex("background")
                );

     $("div").html("css background: " 
                  + "<br /><br />" + $("div", this).css("background") 
                  + "<br /><br />" + "rgba to hex: " 
                  + "<br /><br />" + $("div", this).rgb2hex("background")
                  );
 })

jsfiddle http://jsfiddle.net/guest271314/9tgDt/

0

Fast efficace methode:

<a class="give-it-class" style="display:none" ><?php echo /* your color here  */;?> </a>

& at your jquery:

$('.give-it-class').text();

it will give you the value

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.