Color Picker Online — HEX, RGB, HSL and HSV
Pick any colour and get its HEX, RGB, HSL and HSV values instantly. Editable inputs for each format. Free, browser-based.
This colour picker converts between HEX, RGB, HSL, and HSV colour formats in real time. Click on the colour swatch to open the native colour picker, or type directly into any of the format input fields — changing one updates all others instantly. Use this tool to find the equivalent representation of a colour across different CSS formats, or to explore how colours relate in different colour spaces.
How to use
- Click the colour swatch to open the colour picker, or type a HEX value directly into the HEX input field.
- All four formats (HEX, RGB, HSL, HSV) update instantly to show the same colour in each representation.
- Click the 'Copy' button next to any format to copy that value to clipboard.
FAQ
What is the difference between HEX, RGB, HSL, and HSV?
All four formats describe the same colours but in different coordinate systems. HEX (#RRGGBB) is the standard CSS format — three pairs of hex digits for red, green, and blue channels. RGB (red, green, blue) is the same model with decimal values 0-255 per channel. HSL (hue, saturation, lightness) uses an artist-friendly model where hue is the colour angle (0-360°), saturation is the colour intensity (0-100%), and lightness is how light or dark the colour is. HSV (hue, saturation, value) is similar to HSL but with a different definition of the third dimension — value is the brightness of the colour (100% is the purest colour, 0% is black).
When should I use HSL instead of HEX?
HSL is often more intuitive for programmatic colour manipulation. To make a colour darker, decrease the lightness. To make it more muted, decrease the saturation. To create colour themes, keep the saturation and lightness constant and rotate the hue. HSL is natively supported in CSS (color: hsl(220, 80%, 50%)) and is ideal for generating colour palettes, theming systems, and animations. HEX is more compact and is the format most designers work with in design tools.
Can I enter a colour value in any format?
Yes. You can type directly into the HEX field (with or without the # prefix), or into the individual R, G, B, H, S, L, or V fields. Changing any field updates all others in real time. If the value you enter is invalid (out of range or not a valid hex colour), the field reverts to the last valid value.
Does the colour picker support transparency (alpha)?
This tool works with fully opaque colours only (alpha = 1). Transparent colours (RGBA, HSLA) are not currently supported. The native browser colour picker input also does not support transparency. For colours with alpha channels, use a design tool like Figma or the developer tools colour picker in your browser.
What is the HSV colour space used for?
HSV (also called HSB — Hue, Saturation, Brightness) is used in many image editors and colour pickers because it is more intuitive for selecting pure colours. At 100% value, colours are at their most saturated. Reducing value darkens the colour towards black. By contrast, HSL's lightness of 50% is the 'pure' colour — going to 100% lightness produces white and going to 0% produces black. HSV is used in Photoshop's colour picker; HSL is used in CSS.
Can I use this to find CSS colour values?
Yes. The HEX value can be used directly in CSS (color: #2563eb). The RGB value maps to CSS rgb() notation. The HSL value maps to CSS hsl() notation. Simply copy the format you need and paste it into your stylesheet. The HSV format does not have a direct CSS equivalent — convert to HSL or RGB for use in CSS.