Skip to content
Use jQuery to transform any given colour (hex, hsl(a), colour name) to rgb(a)
Branch: master
Clone or download
Fetching latest commit…
Cannot retrieve the latest commit at this time.
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.gitignore
README.md
rgbagenerator.jquery.js
rgbagenerator.jquery.min.js

README.md

RGBa Generator

Transform any CSS colour into RGBa

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 0.7 kB!

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. Examples are given below or you can try RGBa Generator yourself here.

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/rgbagenerator.jquery.min.js"></script>

3. Call the plug-in in a JavaScript file! $.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)
$.rgbaGenerator("hsla(0,100%,50%,0.8)", {addAlpha: 0.4})
// Will return rgba(255,0,0,0.4)

Finally it's also possible to output the RGB(a) colour as an object. 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
  }
*/
$.rgbaGenerator("hsla(0,100%,50%,0.8)", {asObject: true}).r
// Will return 255
You can’t perform that action at this time.