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.
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 section of your page. (path) /rgbaColorPicker.css»/>
- Add class=»color» to your inputs that will interact with RGBA color picker: 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: 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:
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 To: #colorpicker
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); >
RGBA Color Picker
A color space is a mathematical model used to represent physical colors. An RGB color space is a color space composed of three channels: red, green, blue, representing the three-dimensional information about the color. Each channel is represented by 8 bits, and the value of each channel is a value from 0 to 255.
The RGB color space is a combination of the red, green, and blue light components of additive color. The components of RGB are represented by the mathematical model:
R = red (0 ≤ R ≤ 255) G = green (0 ≤ G ≤ 255) B = blue (0 ≤ B ≤ 255)In the RGB color space, the light intensity of each channel is equal to the value of each channel. For example, if the value of each channel is set to 255, the color of the visualized color space results in white. Also, if the value of each channel is set to 0, the color of the visualized color space results in black.
Equal values of each channel are represented by the same color in the RGB color space, but the combination of different values of each channel leads to different colors. The RGB color space is used to calculate the color of each pixel that can be displayed on the screen.
RGB 565 is an alternative representation of RGB colors that uses 16 bits to represent the color: 5 bits for red, 6 bits for green, and 5 bits for blue. This color space is used in some embedded systems, such as microcontrollers. To pick RGB 565 colors, check out our RGB 565 Color Picker.
RGB 0-1 or Float RGB is another alternative representation of RGB colors that uses three decimal numbers between 0 and 1 to represent the color: one each for red, green, and blue, and one for an optional alpha channel. To pick RGB 0-1 colors, check out our RGB 0-1 Color Picker.
To pick RGB/RGBA/Hex/HSL colors from an image (without uploading it to any server), check out our Image Color Picker.
RGBA Color Space
The RGBA color space is a color space that includes an extra channel (alpha channel) for representing the transparency information of an image. An RGBA color is composed of four channels, where each channel is represented by 8 bits. In RGBA, the transparency information is stored in the alpha channel, and the color information is stored in the three RGB channels.
The alpha channel can be displayed as a grayscale image. This means that the alpha channel is composed of 256 levels of transparency, where 0 represents the maximum level of transparency, and 255 represents the maximum level of opacity.
In the RGBA color space, the alpha channel is considered the same as a fourth channel, and the light intensity of each channel is equal to the value of each channel. For example, if the value of each channel is set to 255, the color of the visualized color space results in white. Also, if the value of each channel is set to 0, the color of the visualized color space results in black.
Equal values of each channel are represented by the same color in the RGBA color space, but the combination of different values of each channel leads to different colors.
The RGBA color space is used to calculate the color of each pixel that can be displayed on the screen. In addition, the alpha channel can be accessed in order to make an image transparent. This means that if the alpha channel has a value of 255 (opaque), it does not represent a transparent pixel.
Other Color Spaces
In addition to the RGB and RGBA color spaces, there are other color spaces that are widely used in programming:
CMYK: The CMYK color space is the color space that is used for printing. It is a color space composed of four channels, where each channel is represented by 8 bits. The CMYK color space is a subtractive color space, in which the color of each channel is created by subtracting the color of one channel from the remaining channels. At least one of the channels is black, and the color of this channel is known as the key color. The other channels are the colors mixed with the key color, and the color of each channel is determined by the amount of the key color mixed in.
HSV: This color space is used to represent the color of a single hue. It is represented by a position on a hue circle, saturation, and value.
HSL: This color space is used to represent the color of a single hue. It is represented by a position on a hue circle, lightness, and value.
LAB: This color space is used to represent the colors including the brightness of a given color. It is represented by a position on a curve, a lightness value, and a red/green/blue value.
Choose your colors, Learn and Create!
Ran out of imagination? Explore our color picker and choose the perfect color for your project. RGB, HEX, HSL, CMYK, we’ve got you covered. Our color picker is smart enough to understand all color codes.
HEX
RGB
HSL
We got hundreds of color combinations! Check out our color chart page to get inspired. Explore flat design colors, Google Material design, fluent colors, metro design scheme, all with HEX and RGB color codes.
We have created a wonderful section to share your color palettes and we also did an awesome color palette creator for you to create the most epic palettes ever. Show us your talent!
Dont know how to create gradients? No problem, with our gradients and gradients generator you would realize how easy and beautiful is to create gradients. Take a look!
What are the 8 HTML Color Values?
Now we are talking about the 8 HTML color values (HEX, RGB, RGBA, HSL, HSLA, HSV, HWB, CMYK).
The HEX Color Value is represented in hexadecimal, so the range goes from 00 to FF for each of them. The code is expressed as follows: #RRGGBB, each of the 2-digit values being the range of each of the 3 colors, with which we choose the final value that represents each color.
The RGB Color Value, Red — Green — Blue, is based on mixing these 3 colors to get the full range. Each of the colors takes a value between 0 and 255, a total of 256, with which a total of 256 x 256 x 256 is achieved = 16,777,216 different colors. Mixing these three colors would give you a rgb color code represented like this RGB(23,34,255).
The RGBA Color Value, Red — Green — Blue — Alpha that add a new factor, the alpha channel, that is, the opacity or transparency that follows the same percentage scheme: 0% represents absolute transparency and 100% represents absolute opacity which is the way we traditionally see colors.
The HSL Color Value, This model includes two additional parameters to the hue or chroma to obtain the color, which are saturation or brightness or tone. Hence its acronym: HSL (H — hue or hue, S — saturation or saturation, L — luminosity or luminosity / tone).
The HSLA Color Value, (H — hue or hue, S — saturation or saturation, L — luminosity or luminosity / tone — A — ALPHA), is a system is not a system that has been commonly used in web design, but it is used in other areas such as photographic editing or design (in general).
The HSV Color Value includes two additional parameters to the hue or chroma to obtain the color, which are saturation and value. Hence its acronym: HSV (H — hue or hue, S — saturation or saturation, V — value or value).
The HWB Color Value, (Hue-Whiteness-Blackness), is very similar to the HSV (Hue, Saturation, Value) and HSL (Hue, Saturation, Lightness), except that neither HSV nor HSL provides saturation for whiteness.
The CMYK Color Value is a subtractive model and is used in printing from pigments of three basic colors: C — cyan, M — magenta and Y — yellow. The K comes from the black, since the combination of the three previous ones produces a black little pure.
FOR MORE INFORMATION VISIT THE LINKS THAT ARE IN THE TEXT OR VISIT OUR COLOR THEORY.
| Color Name | Color Code | Color Name | Color Code |
|---|---|---|---|
| Red | #FF0000 | White | #FFFFFF |
| Cyan | #00FFFF | Silver | #C0C0C0 |
| Blue | #0000FF | Gray | #808080 |
| DarkBlue | #0000A0 | Black | #000000 |
| LightBlue | #ADD8E6 | Orange | #FFA500 |
| Purple | #800080 | Brown | #A52A2A |
| Yellow | #FFFF00 | Maroon | #800000 |
| Lime | #00FF00 | Green | #008000 |
| Magenta | #FF00FF | Olive | #808000 |
Common Colors
What better way to help you find your perfect color than giving you the common colors of this time . Take a look and good luck!