How to Extract R, G, B, a Values from CSS Color

How to extract r, g, b, a values from CSS color?

var c = $('body').css('background-color');
var rgb = c.replace(/^(rgb|rgba)\(/,'').replace(/\)$/,'').replace(/\s/g,'').split(',');

for(var i in rgb) {
  console.log(rgb[i]);
}

Try it here http://jsbin.com/uhawa4

Edit :

var c = $('body').css('background-color');
var rgb = c.replace(/^rgba?\(|\s+|\)$/g,'').split(',');

for(var i in rgb) {
  console.log(rgb[i]);
}

or even simpler way, just aiming at numbers

var c = 'rgba(60,4,2,6)';
var rgb = c.match(/\d+/g);

for(var i in rgb) {
  console.log(rgb[i]);
}

How to extract color values from rgb string in javascript

You can use a regex:

function getRGB(str){  var match = str.match(/rgba?\((\d{1,3}), ?(\d{1,3}), ?(\d{1,3})\)?(?:, ?(\d(?:\.\d?))\))?/);  return match ? {    red: match[1],    green: match[2],    blue: match[3]  } : {};}
console.log(getRGB("rgb(211, 211, 211)"));console.log(getRGB("rgba(211, 0, 211, 0.5)"));

Extract RGB and RGBA from css Rules in JavaScript

I want to extract all rgba and rgb from the stirng

I hope you don't want to validate the digits in rgba and rgb, if yes then get the matched group from index 1 using capturing groups.

(rgba?\((?:\d{1,3}[,\)]){3}(?:\d+\.\d+\))?)

Live demo

---

You can get the values using Lazy way as well in the same way from matched group index 1.

(rgba?.*?\))

Live Demo

Last Pattern explanation:

  (                        group and capture to \1:
    rgb                      'rgb'
    a?                       'a' (optional)
    .*?                      any character except \n (0 or more times)
    \)                       ')'
  )                        end of \1

Regex to extract RGB(r,g,b) from RGBA(r,g,b,a)

You could also write a more consolidated version of the regex like this:

var str = 'rgba(14, 48, 71, 0.3)';/* Goal: rgb(14,48,71) */
var rgx = /^rgba\(((,?\s*\d+){3}).+$/
console.log (str.replace(rgx, 'rgb($1)'));

Getting the RGB values for a CSS/HTML named color in JavaScript

Minimal JavaScript function:

function nameToRgba(name) {
    var canvas = document.createElement('canvas');
    var context = canvas.getContext('2d');
    context.fillStyle = name;
    context.fillRect(0,0,1,1);
    return context.getImageData(0,0,1,1).data;
}

Simple JavaScript function to extract RBG from a style attribute

I answered this by using regex:

// Extract our hex from our style
var _rgb2hex = function (style) {

    // match our fill style
    var rgb = style.match(/^fill:\s?rgb[\s+]?\([\s+]?(\d+)[\s+]?,[\s+]?(\d+)[\s+]?,[\s+]?(\d+)\);/i);

    // If our array exists and is a length of 4
    if (rgb && rgb.length === 4) {

        // Create our hex
        var hex = ("0" + parseInt(rgb[1], 10).toString(16)).slice(-2) + ("0" + parseInt(rgb[2], 10).toString(16)).slice(-2) + ("0" + parseInt(rgb[3], 10).toString(16)).slice(-2);

        // Return our hex
        return hex;
    }

    // Fallback
    return '';
};

SASS Simple function to convert HEX color into RGB as a string without alpha

You can write the function like this:

@use "sass:color";
@function hex2rgb($hex) {
  @return red($hex), green($hex), blue($hex);
}

But the problem is sass could not parse the variables for html custom properties.
So this line --color-body-bg-light: $color-bg-light; won't work.

At the end, you will get this:

:root {
  --color-body-bg-light: $color-bg-light;
  --color-body-bg-light-rgb: $color-bg-light-rgb;
}

How does one extract the color-stop values from a string which contains the definition of a linear gradient?

You can use String#match.

let str = "linear-gradient(90deg, rgba(243,231,231,1), rgba(12,0,0,0.48))";
let res = str.match(/rgba\(.*?\)/g);
console.log(res);

Get a color component from an rgb string in Javascript?

NOTE - We're all on board with the regex ate my brains and kicked my dog attitude, but the regex version just seems the better method. My opinion. Check it out.

Non-regex method:

var rgb = 'rgb(200, 12, 53)';

rgb = rgb.substring(4, rgb.length-1)
         .replace(/ /g, '')
         .split(',');

console.log(rgb);

http://jsfiddle.net/userdude/Fg9Ba/

Outputs:

["200", "12", "53"]

Or... A really simple regex:

EDIT: Ooops, had an i in the regex for some reason.

var rgb = 'rgb(200, 12, 53)';

rgb = rgb.replace(/[^\d,]/g, '').split(',');

console.log(rgb);

http://jsfiddle.net/userdude/Fg9Ba/2

---

Related Topics