RGB Color Picker – Convert & Explore RGB Color Values
The RGB Color Picker lets you visually select any color by adjusting Red, Green, and Blue channel values from 0 to 255. Instantly see the resulting HEX code, HSL breakdown, and ready-to-use CSS snippets for your web or design projects. Whether you're a developer, designer, or student, this free tool makes color conversion fast and effortless.
Red channel value from 0 to 255.
Green channel value from 0 to 255.
Blue channel value from 0 to 255.
Alpha (opacity) value from 0 (transparent) to 1 (fully opaque).
Your results will appear here
How to Use This Calculator
1. Use the Red slider to set the red channel intensity between 0 (no red) and 255 (full red). 2. Adjust the Green slider to control the green channel from 0 to 255. 3. Move the Blue slider to set the blue channel value. 4. Optionally, set the Alpha (Opacity) slider to control transparency — 1 is fully opaque and 0 is fully transparent. 5. View the Color Preview along with the automatically calculated HEX code, RGB/RGBA string, HSL values, perceived brightness, and a ready-to-paste CSS snippet below.
Understanding RGB Colors
RGB stands for Red, Green, Blue — the three primary colors of light used in digital displays. By mixing different intensities of each channel, you can produce over 16 million unique colors.
RGB Channel Values
Each channel accepts an integer value from 0 (none of that color) to 255 (maximum intensity). For example:
- rgb(255, 0, 0) = pure red
- rgb(0, 255, 0) = pure green
- rgb(0, 0, 255) = pure blue
- rgb(255, 255, 255) = white
- rgb(0, 0, 0) = black
HEX Color Codes
A HEX color code is a 6-character hexadecimal representation of an RGB color, prefixed with #. Each pair of characters represents one channel (00–FF). To convert RGB to HEX, each channel value is converted from decimal (base 10) to hexadecimal (base 16).
Example: rgb(99, 160, 220) → #63A0DC
HSL Color Model
HSL stands for Hue, Saturation, Lightness. It's an alternative way to describe color that is often more intuitive for designers:
- Hue: The type of color, expressed as a degree on a color wheel (0°–360°).
- Saturation: How vivid or gray the color is (0%–100%).
- Lightness: How light or dark the color is (0% = black, 100% = white).
RGB to HSL Conversion
To convert, normalize each channel to 0–1, find the max and min, then compute lightness as (max + min) / 2, saturation based on the delta, and hue from which channel is dominant.
Alpha / Opacity
The alpha value controls transparency. In CSS, rgba() accepts a fourth parameter from 0 (invisible) to 1 (opaque). This is useful for overlays, shadows, and layered UI elements.
Perceived Brightness
Human eyes are not equally sensitive to all colors. Perceived brightness is calculated using the formula: √(0.299×R² + 0.587×G² + 0.114×B²). Green contributes the most to perceived brightness, followed by red, then blue.