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.
Demo
RGBA
How to Install it to Your Website
- Download Source Code
-
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> -
Add class="color" to your inputs that will interact with RGBA color picker:
<input id="input1" name="input1" class="color" />If you prefer the dropdown color picker to "dropup", you can add class class="color up"You can also add a default color to it:
<input id="input2" name="input2" class="color" value="rgba(100,100,100,0.5)" />Done!
Add Title
If you need to add title to the popup color picker, you can add data-title="(title text)" to the input element.
OnColorChanged
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 accomplish what you want:
<script type="text/javascript">
function OnColorChanged(selectedColor, input) {
if (input.id == "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.
Styles
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 input element, 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);
}