Color Picker — HEX, RGB, HSL
Pick any color and instantly see its HEX, RGB and HSL values. Free, in-browser.
How to use this tool
- Open this page — it runs instantly in your browser, no signup or install.
- Allow any permission prompt if asked; everything stays on your device.
- Use the on-screen controls — results update live.
Pick any color and instantly see its HEX, RGB and HSL values. Free, in-browser.
How it works
The Color Picker provides an interactive color wheel and palette you can click or drag to select any color. As you move the selector the tool immediately displays the color's value in three formats: HEX (e.g. #3a7bd5), RGB (e.g. rgb(58, 123, 213)), and HSL (e.g. hsl(217, 61%, 53%)).
HEX is the format used in HTML and most CSS. RGB separates the red, green, and blue channels on a 0-255 scale and is common in design tools. HSL describes hue (the color itself), saturation (intensity), and lightness, and is often more intuitive when you want to darken or lighten a color.
You can also type a known HEX or RGB value directly into the input fields to convert it to the other formats instantly, making the tool useful as a quick converter as well as a freehand picker.
Everything runs in the browser with no server calls, so you can pick colors for a private or unreleased project without any information leaving your device.
Worked example
Convert a brand HEX color to RGB for a CSS gradient
- Type your brand color HEX code (e.g. #e63946) into the HEX input field.
- The RGB and HSL fields update automatically.
- Copy the RGB value shown (e.g. rgb(230, 57, 70)).
- Paste it into your CSS gradient declaration.
An accurate RGB equivalent ready to use in CSS without manual calculation.
Common mistakes to avoid
- Omitting the # symbol when typing a HEX value into the input field — always include the hash prefix.
- Confusing HSL lightness with brightness; pure white is HSL(0,0%,100%) and pure black is HSL(0,0%,0%) regardless of hue.
- Copying the HEX value without the # and then finding it does not work in CSS.
Key terms
- HEX color
- A six-character hexadecimal code (e.g. #ff6600) used in HTML and CSS to represent a color by its red, green, and blue channel values in base 16.
- RGB
- A color model that mixes red, green, and blue light on a scale of 0 to 255 to produce a color.
- HSL
- A color model describing a color by hue (0-360 degrees), saturation (0-100%), and lightness (0-100%).
Frequently asked questions
- How do I convert HEX to RGB?
- Each pair of hex digits maps to one color channel: #RRGGBB. Divide by 255 for 0-1 fractions or use as 0-255 integers.
- What is HSL?
- HSL stands for Hue, Saturation, Lightness — a more human-friendly way to describe colors than RGB.