Color Picker
Pick a color and convert between HEX, RGB and HSL in real time — with one-click copy and instant tints and shades, right in your browser.
Click the swatch to open your device's colour picker, or type an exact value on the right.
Tints & shades
Lighter and darker variations — click any swatch to select it.
Quick answer
A color picker lets you choose a color and read its exact code in every common format. Click the swatch to open your device's native picker, or type a value into the HEX, RGB or HSLfield — the others update instantly, so it doubles as a HEX to RGB and RGB to HEX converter. Copy any format with one click and grab ready-made tints and shades. It all runs privately in your browser.
HEX, RGB and HSL explained
Every color on the web can be written three ways. HEX is the six-character code you see most in HTML and CSS, like #2563EB, where pairs of digits set the red, green and blue channels in base 16. RGB writes those same channels as numbers from 0 to 255, which is intuitive when you think in terms of mixing light. HSL— hue, saturation and lightness — describes color the way designers often think, making it simple to keep the same hue while nudging it lighter or darker.
Converting between color formats
Because all three fields are linked, this tool is also a HEX to RGB, RGB to HEX and HSL converter. Paste a HEX code from a brand guide to read its RGB values for a design app, or type an RGB triple to get the HEX for your stylesheet. Short three-digit HEX codes like #39F are expanded automatically, and any value you copy is always a clean, valid CSS color.
Using tints and shades
Good interfaces rarely rely on a single flat color. Starting from one base, a tint (mixed with white) works well for backgrounds and subtle hover states, while a shade (mixed with black) suits text, borders and pressed buttons. The swatch row gives you several lighter and darker steps at a glance — click any one to make it your active color and read its exact code. It is a fast way to build a small, consistent palette from a single starting point.
Frequently asked questions
How do I convert HEX to RGB (or RGB to HEX)?+
Just type or paste a value into any field. Enter a HEX code like #2563EB and the RGB and HSL fields update instantly; type an RGB value and the HEX code follows. Every format stays in sync, so the tool works as a two-way HEX to RGB and RGB to HEX converter automatically.
What is the difference between HEX, RGB and HSL?+
They describe the same color in different ways. HEX is a six-digit code used in HTML and CSS (#RRGGBB). RGB lists the red, green and blue channels from 0 to 255. HSL uses hue (0–360°), saturation and lightness, which makes it easy to create lighter or darker versions of a color by adjusting one number.
What are tints and shades?+
A tint is your color mixed with white, giving a lighter version; a shade is mixed with black for a darker one. They are handy for building hover states, borders and accessible color scales from a single brand color. Click any swatch to make it the active color.
Can I use these colors in CSS?+
Yes. Copy the HEX, RGB or HSL value and paste it straight into your stylesheet — for example color: #2563EB, or background: rgb(37, 99, 235). All three formats are valid CSS color values.
Is the color picker private?+
Completely. It runs entirely in your browser with JavaScript, so the colors you pick are never uploaded, logged or shared. It also keeps working offline once the page has loaded.