Color Picker
How it works
Use the visual picker (a 2D gradient with a hue slider) to pick any color, or type a value directly in any supported format: HEX (`#FF9F43`), RGB (`rgb(255, 159, 67)`), HSL (`hsl(30, 100%, 63%)`) or HSV. Every format updates in real time as you change the color, so you can pick in whichever representation feels natural and copy the value you actually need for your code.
What the tool shows for every color: • HEX, 6-digit or 8-digit with alpha: the format you paste into CSS, design tools and brand guidelines • RGB / RGBA, functional notation: useful when you need to interpolate or compose colors programmatically • HSL / HSLA, hue-saturation-lightness: best for building palettes (shift the hue for variants, drop lightness for shades) • HSV, hue-saturation-value: what Photoshop and most design tools use internally • A "copy" button next to every format for one-click clipboard access
Color history: every color you pick is stored in your browser's localStorage, so it survives reloads. Click any swatch in the history to restore it. That turns the tool into a personal palette between design sessions: pull in the brand colors once and keep them at hand.
A practical mental model for picking colors without a design background: • Hue is the color itself (red, blue, green). Change it to get a different color. • Saturation is how vivid it is. 0% is grey, 100% is pure color. Most professional UIs sit at 40–70%. • Lightness / Value is how bright it is. 50% is the pure color; go toward 100% for tints, toward 0% for shades.
To build a harmonious palette from one base color, keep saturation and lightness fixed and shift the hue by ±30° (analogous colors), by 120° (triadic) or by 180° (complementary). HSL makes that arithmetic obvious, which is exactly what HEX and RGB cannot do.
Frequently Asked Questions
What color formats are supported?
- HEX (3, 4, 6 or 8 digit), RGB / RGBA, HSL / HSLA and HSV. Type any of them in the matching field and the others update as you go. Modern CSS color notation like hsl(30 100% 63% / 50%) is accepted too.
How do I convert a HEX color to RGB (or RGB to HEX)?
- Paste the HEX value into the HEX field and the RGB, HSL and HSV boxes update with it, so you can copy whichever one you need. It works in reverse as well: type an RGB triplet and read the HEX. Every conversion is exact, with no lossy rounding between formats.
What is the difference between HSL and HSV?
- The third dimension. Both use a hue circle and a saturation axis, but HSL's lightness puts pure white at 100% and pure black at 0%, with the fully-saturated pure color at 50%. HSV's value puts black at 0% and the fully-saturated pure color at 100%, with no pure white at all. Designers tend to prefer HSL; most image editors use HSV internally.
Does the tool give me a color name?
- Yes, for CSS named colors (#FF0000 is "red", #00FF00 is "lime"). Arbitrary colors have no official name, so the tool shows the closest named CSS color and you can use that as a label.
Is color history saved between sessions?
- Yes. Colors you pick are stored in your browser's localStorage and restored when you come back. The history lives on your device only and is never synced to a server. To clear it, use the Clear button in the history panel or clear site data in your browser settings.
Is my data safe?
- Yes. There is no backend: the picker is a static client-side app, and your input is processed by JavaScript inside your browser tab, never transmitted anywhere. Open DevTools → Network to confirm it, using the tool produces zero outbound HTTP requests.