Have you ever needed to subtract a specific value from a colour, e.g. only the reds? Have you ever wanted to convert a solid colour to one with an alpha component? Or maybe the other way 'round: remove that alpha component? Enter RGBa Generator! You can convert any valid CSS colour to RGB. That means: RGB, RGBa, HSL, HSLa, colour names and HEX values. And all that for a file of less than 700 bytes!

To list the things you can do: you can convert any colour to RGB(a), you can add or remove alpha components and you can export any colour as an RGB object. Note that jQuery is required. Examples are given below.

How to use

1. Download the latest version from the GitHub page. Use the minified version on production sites! The expanded version is suited for debugging and development only.

2. Include the plug-in on your web page. Make sure that you include the script after loading jQuery.

<script src="//code.jquery.com/jquery-2.1.4.min.js"></script>
<script src="js/rgbgenerator.jquery.min.js"></script>

3. Call the plug-in in a JavaScript file! E.g.

$.rgbaGenerator("white")

Options

RGBa Generator accepts one argument, the colour, and provides three options: asObject, addAlpha and removeAlpha. When the three options are omitted, the RGB colour will be returned as a string.

$.rgbaGenerator("white")
// Will return rgb(255,255,255)

Note that by default alpha components are included. If the input value contains an alpha value, the output will be in RGBa format.

$.rgbaGenerator("hsla(0,100%,50%,0.8)")
// Will return rgba(255,0,0,0.8)

You can disable this behaviour by setting removeAlpha to true. This will remove any alpha value from an initial HSLa or RGBa colour.

$.rgbaGenerator("hsla(0,100%,50%,0.8)", {removeAlpha: true})
// Will return rgb(255,0,0)

If, on the other hand, you want to add an alpha channel, you can do so by setting addAlpha to any value between 0 and 1. When the input is a non-transparent colour, the alpha value will be added. If it is a transparent one, the provided value will overwrite the alpha component of the input.

$.rgbaGenerator("hsl(0,100%,50%)", {addAlpha: 0.4})
// Will return rgba(255,0,0,0.4)

However, make sure that you are using a valid alpha value (between 0 and 1). If you use a number that's not in this range, the plugin will simply return the RGB colour without an alpha channel.

$.rgbaGenerator("yellow", {addAlpha: 5});
//  Will return rgb(255,255,0)

Finally it's also possible to output the RGB(a) colour as an object by setting asObject to true. It will consist of r, g, b and optionally a.

$.rgbaGenerator("hsla(0,100%,50%,0.8)", {asObject: true})
/* Will return
  {
    "r": 255,
    "g": 0,
    "b": 0,
    "a": 0.8
  }
*/

You can then extract only the value that you need, for instance the reds.

$.rgbaGenerator("hsla(0,100%,50%,0.8)", {asObject: true}).r
// Will return 255

On a final note, it is important to realise that when no colour is specified, the plugin won't return anything, i.e. undefined.

Try it yourself!



Result

Input:
Output: