Get background colour from linear-gradient color value

Question

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.. :)

is [this](http://stackoverflow.com/questions/5999209/how-to-get-the-background-color-code-of-an-element) will help u? — chriz, Jun 21 '14 at 12:18
See http://stackoverflow.com/questions/5623838/rgb-to-hex-and-hex-to-rgb , http://stackoverflow.com/questions/5999209/how-to-get-the-background-color-code-of-an-element — guest271314, Jun 21 '14 at 14:02
@ButaniVijay tanx for the reply.but that is not what i asked for. — Nibin, Jun 21 '14 at 15:50
@guest271314.tanx,but that does not help me with this question mate.. — Nibin, Jun 21 '14 at 15:51

Pogrindis · Answer 1 · 2014-06-21T13:17:38.057

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 !

score 0 · Answer 2 · answered Jun 22 '14 at 04:03

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/

score 0 · Answer 3 · answered Jul 01 '18 at 18:18

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

answered Jul 01 '18 at 18:18

phpier

55
4

Get background colour from linear-gradient color value

3 Answers3

Alternatively