RGBA Color Picker

Menucool RGBA Color Picker is a website widget that allows users to select either HEX or RGBA colors for web form inputs.

It is FREE to use.




How to Install it to Your Website

  1. Download Source Code
  2. Include - Put the extracted files into your site, and add the following two links into the <head> section of your page. <link type="text/css" rel="stylesheet" href="(path)/rgbaColorPicker.css" /> <script type="text/javascript" src="(path)/rgbaColorPicker.js"></script>
  3. Add class="color" to your inputs that will interact with RGBA color picker: <input id="clr1" name="clr1" class="color" />

    You can also add a default color to it: <input id="clr1" name="clr1" class="color" value="rgba(100,100,100,0.5)" /> Done!


Sometimes you may want to update page elements when a color has been picked, as did the demo 2 shown above. Then the OnColorChanged event handler will help. You can place your code there to do whatever you want to do: <script type="text/javascript"> function OnColorChanged(selectedColor, inputId) { if (inputId == "input2") { var rgbaBox = document.getElementById("rgbaBox"); rgbaBox.style.backgroundColor = selectedColor; } } </script>

For details please view the source code in the test.html file in the source code download.


The styles of the RGBA color picker is configured by the rgbaColorPicker.css file. Customizing it is a breeze!

For example, if you prefer the color pallette align to the right of the color chooser, just change the current setting: #colorpicker {left:auto; right:0;} To: #colorpicker {left:0;right:auto;}

Browser Support

RGBA color, or transparent color, is supported by most browsers. IE 8 or lower doesn't support it. So usually you need to define a fallback HEX or RGB color before RGBA color: div { background: rgb(90, 90, 90); /* The Fallback */ background: rgba(90, 90, 90, 0.5); }

More ...



Your Name
+ =  

Question Title

If your question is about troubleshooting, please first go through the checking list in Troubleshooting Request.