🖌️ Color Picker
Choose a colour and copy it in HEX, RGB, RGBA, HSL or HSV, with sliders for each channel.
Hue
Opacity
Previous (click to restore)
Current
OS Color Picker
Click the swatch to open your system color picker for advanced selection
Color Values
HEX
RGB
HSL
RGBA
HSV
Manual Input
#
Accepts 3 or 6 character hex codes, with or without #
Channel Sliders
Red
Green
Blue
Color History
Related Tools
🎨
🎨
🌈
📱
Color Palette Generator
Build a coordinated colour palette from a base shade and copy every hex code for CSS or design work.
Hex to RGB Converter
Convert hex to RGB and HSL, view each channel, and copy the matching CSS colour declarations.
Gradient Generator
Design linear, radial or conic CSS gradients with live preview and copy the generated background property.
QR Code Generator
Encode a URL or block of text as a QR code, choose its size and colours, and download the result as a PNG.
How one colour becomes five notations
Underneath every format is the same trio of channel values: red, green and blue, each an integer from 0 to 255. HEX is simply that trio written in base 16, two digits per channel, so the pair after the hash is red, the next pair green and the last pair blue. Typing a HEX code reverses the process by parsing each pair back into a number.
HSL and HSV are cylindrical views of the same point. Each channel is first scaled to a range of 0 to 1, then the largest and smallest of the three are found. Lightness in HSL is the average of that maximum and minimum, while value in HSV is just the maximum. Saturation is derived from the difference between the maximum and minimum, divided by a term that depends on lightness in HSL and simply by the maximum in HSV. Hue is an angle from 0 to 360 degrees, determined by which channel is largest and by how the other two compare.
Opacity is carried separately as a percentage and appears in the RGBA string as a decimal alpha between 0 and 1, since a standard six-digit HEX code has no room for transparency.
HSL and HSV are cylindrical views of the same point. Each channel is first scaled to a range of 0 to 1, then the largest and smallest of the three are found. Lightness in HSL is the average of that maximum and minimum, while value in HSV is just the maximum. Saturation is derived from the difference between the maximum and minimum, divided by a term that depends on lightness in HSL and simply by the maximum in HSV. Hue is an angle from 0 to 360 degrees, determined by which channel is largest and by how the other two compare.
Opacity is carried separately as a percentage and appears in the RGBA string as a decimal alpha between 0 and 1, since a standard six-digit HEX code has no room for transparency.
Worked example: converting the HEX code 4F46E5
Type 4F46E5 into the HEX field. Read as pairs of hexadecimal digits, 4F is 79, 46 is 70 and E5 is 229, so the RGB triplet is 79, 70, 229.
Scaled to a 0 to 1 range those become 0.3098, 0.2745 and 0.8980. The maximum is the blue channel at 0.8980 and the minimum is green at 0.2745, giving a difference of 0.6235.
For HSL, lightness is the average of maximum and minimum: 0.8980 plus 0.2745 is 1.1725, halved to 0.5863, or about 59 per cent. Since lightness is above 0.5, saturation is 0.6235 divided by 2 minus 1.1725, which is 0.6235 divided by 0.8275, or 0.7535, about 75 per cent. Blue is the largest channel, so hue is 60 multiplied by 4 plus the red minus green difference divided by 0.6235, which is 60 times 4.0566, or 243 degrees. The result is hsl(243, 75%, 59%).
For HSV, value is the maximum, 0.8980, or 90 per cent, and saturation is 0.6235 divided by 0.8980, which is 0.6943, about 69 per cent, giving hsv(243, 69%, 90%).
Scaled to a 0 to 1 range those become 0.3098, 0.2745 and 0.8980. The maximum is the blue channel at 0.8980 and the minimum is green at 0.2745, giving a difference of 0.6235.
For HSL, lightness is the average of maximum and minimum: 0.8980 plus 0.2745 is 1.1725, halved to 0.5863, or about 59 per cent. Since lightness is above 0.5, saturation is 0.6235 divided by 2 minus 1.1725, which is 0.6235 divided by 0.8275, or 0.7535, about 75 per cent. Blue is the largest channel, so hue is 60 multiplied by 4 plus the red minus green difference divided by 0.6235, which is 60 times 4.0566, or 243 degrees. The result is hsl(243, 75%, 59%).
For HSV, value is the maximum, 0.8980, or 90 per cent, and saturation is 0.6235 divided by 0.8980, which is 0.6943, about 69 per cent, giving hsv(243, 69%, 90%).
Choosing the right format and avoiding rounding drift
Pick the notation that suits the job. HEX is the most compact and the usual choice for static CSS and design handovers. RGB and RGBA are easier to generate from code and are the only way to express transparency without a separate opacity property. HSL is the one for building a palette, because changing lightness while holding hue and saturation produces a coherent tint or shade, which is painful to do by hand in HEX.
Rounding is the main thing to watch. Hue, saturation and lightness are shown as whole numbers, so converting a HEX code to HSL and straight back can land one or two units away from where you started. When a colour must match exactly, such as a brand value, keep the HEX or RGB form as the source of truth and treat HSL as a working view.
A standard six-digit HEX code cannot carry opacity, so a colour set to 60 per cent alpha needs the RGBA string rather than the HEX value. And the same code can look noticeably different across screens, because monitor calibration and colour profiles vary; for print, convert to CMYK or a spot reference rather than using screen values.
Rounding is the main thing to watch. Hue, saturation and lightness are shown as whole numbers, so converting a HEX code to HSL and straight back can land one or two units away from where you started. When a colour must match exactly, such as a brand value, keep the HEX or RGB form as the source of truth and treat HSL as a working view.
A standard six-digit HEX code cannot carry opacity, so a colour set to 60 per cent alpha needs the RGBA string rather than the HEX value. And the same code can look noticeably different across screens, because monitor calibration and colour profiles vary; for print, convert to CMYK or a spot reference rather than using screen values.
Frequently Asked Questions
Five: HEX, RGB, RGBA, HSL and HSV. Each has its own copy button, and a copy-all option grabs the complete set at once. You can also enter a colour in HEX, RGB or HSL form directly, and the other notations update to match, with a clear error if the string cannot be parsed.
Set the opacity control to the percentage you need and use the RGBA output, where alpha appears as a decimal from 0 to 1. A standard six-digit HEX code has no alpha channel, so the HEX value will continue to describe the solid colour regardless of the opacity you choose.
Both use the same hue angle, but they measure brightness differently. HSL lightness is the midpoint between the strongest and weakest channel, so 100 per cent is white. HSV value is simply the strongest channel, so 100 per cent is the most vivid version of that hue. Saturation is calculated differently in each as a result.
HSL and HSV components are displayed as rounded whole numbers, so a round trip from HEX to HSL and back can shift a channel by a unit or two. Keep the HEX or RGB value as your reference when precision matters, and use HSL for adjusting a colour rather than for storing it.
Yes. Colours you select are added to a history strip on the page, and clicking any swatch restores it as the current colour with all five notations regenerated. It is the quickest way to compare two candidate shades back and forth while deciding between them.