Color Picker & Converter
Pick a color and convert between HEX, RGB, and HSL formats instantly.
About this tool
A colour picker lets you choose a colour visually and read its value in every format you might need: HEX for CSS and design tools, RGB for canvas and image editing, and HSL when you want to adjust lightness or saturation without changing the hue.
The three formats describe the same colour in different ways. HEX and RGB are the same information written differently — #2563EB is exactly rgb(37, 99, 235). HSL is the useful one when you are building a palette, because you can hold the hue steady and vary lightness to get a consistent set of tints and shades.
Everything runs locally in your browser, and each value can be copied with one click straight into your stylesheet or design file.
How to pick and convert a colour
- 1Use the colour field to choose a colour visually, or paste an existing HEX value to start from a known colour.
- 2Read the HEX, RGB and HSL values, all updating together as you move the picker.
- 3Click any value to copy it to your clipboard in the exact syntax CSS expects.
- 4Adjust the lightness in HSL to build lighter and darker variants of the same hue for a palette.
What this tool does
HEX, RGB and HSL together
All three formats are shown at once, so you never have to run a second conversion or look up a formula.
One-click copy
Each value copies in valid CSS syntax — #2563eb, rgb(37, 99, 235), hsl(221, 83%, 53%) — ready to paste into a stylesheet.
Visual picking
Choose colours by eye with the native colour field, or type an exact value when you are matching a brand colour.
No account, no upload
Runs entirely in your browser. Nothing is stored, and the tool works offline once the page has loaded.
Frequently asked questions
How do I convert HEX to RGB?
A HEX code is three pairs of hexadecimal digits for red, green and blue. #2563EB splits into 25, 63 and EB, which in decimal are 37, 99 and 235 — so rgb(37, 99, 235). This tool does the conversion for you as you pick.
What is the difference between RGB and HSL?
RGB describes how much red, green and blue light to mix. HSL describes hue (which colour on the wheel), saturation (how vivid) and lightness (how bright). HSL is easier for humans: to get a darker version of the same colour, you only lower the lightness.
Which format should I use in CSS?
All three are valid in every modern browser. HEX is the most common in codebases and design handoffs. RGB is convenient when you need transparency via rgba(). HSL is best for generating systematic colour scales.
What does the 8-digit HEX code mean?
An 8-digit HEX adds two characters for alpha transparency at the end — #2563EBFF is fully opaque, #2563EB80 is roughly 50% transparent. It is supported in all modern browsers.
Is my colour data sent anywhere?
No. Colour conversion is simple arithmetic done in your browser. Nothing is transmitted or stored.