Color Picker

Pick a color and get HEX, RGB, and HSL values

HEX #7b8cff
RGB rgb(123, 140, 255)
HSL hsl(232, 100%, 74%)

Recent Colors

Pick a color to start building history

About this tool

This color picker lets you choose any color visually or by typing a hex code, and instantly shows the matching HEX, RGB, and HSL values with a Copy button beside each one. Everything runs locally in your browser — nothing is sent to a server. A Recent Colors grid keeps your last 24 picks so you can click back to any of them.

Use the square picker for visual selection, or type a six-digit hex code like #ff6600 into the HEX field and press Enter. Press the space bar to jump to a completely random color. All three formats update together as you pick.

When to use it

HEX, RGB, and HSL: same color, three notations

All three formats describe the identical color. HEX and RGB are two spellings of the same red-green-blue values: #7b8cff means red 123 (7b), green 140 (8c), and blue 255 (ff), which is exactly rgb(123, 140, 255). HSL restates that as hue 232 degrees on the color wheel, 100% saturation, and 74% lightness. HSL is the most human-friendly for adjustments — keep the hue, lower the lightness, and you get a darker shade of the same color.

Frequently asked questions

What's the difference between HEX and RGB?

Nothing but notation. Both express the same red, green, and blue channels from 0 to 255; hex just writes each channel as a two-digit base-16 number.

When should I use HSL instead?

Use HSL when you want to adjust a color rather than just record it. With hue, saturation, and lightness separate, you can darken a hover state by lowering lightness alone.

Why isn't my typed hex code updating the color?

The field expects a full six-digit code with the leading #, like #1a2b3c. Three-digit shorthand like #fff isn't expanded; the color only updates once all seven characters are present or you press Enter.

Is my color history saved anywhere?

Only in the page's memory while it's open. The Recent Colors grid holds up to 24 colors, and refreshing or closing the tab starts you fresh.