Color Picker
Pick colors and convert between HEX, RGB, HSL, and HSB formats instantly.
Navigation
Private by default
Files stay in your browser. Nothing is uploaded unless a tool says otherwise.
When to use this
You found the perfect blue on a competitor's landing page with your browser's eyedropper, but it came back as an RGB value and your CSS file uses HEX. Or you're building a design system and need to generate lighter and darker variants of a brand color — easy in HSL (just change the lightness channel), nearly impossible to eyeball in HEX. This color picker lets you move fluidly between formats without manual math or switching between tools.
It's also the tool you reach for when a designer hands you an HSB value from Figma and you need the HSL equivalent for your stylesheet, or when a print vendor asks for RGB breakdowns of a color you only have as a hex code. Every format has a one-click copy button, so you pick once and paste wherever you need it.
The recently-used colors panel remembers up to 10 swatches per session, which is useful when you're comparing two near-identical blues or building a palette of complementary tones. Edit any input field directly — type a hex code, nudge an HSL hue slider, adjust a single RGB channel — and all other formats update in real time.
Good to know
HSL is the friendliest format for creating variants. Need a hover state that's 10% darker? Subtract 10 from the lightness value. Need a muted version? Drop the saturation. HEX and RGB make these adjustments opaque because the channels don't map to human perception the way HSL does.
HEX shorthand works — but only for doubles. #3B82F6 cannot be shortened, but #FFFFFF compresses to #FFF. The picker always outputs full six-character HEX so there's no ambiguity when pasting into tools that don't support shorthand.
HSB and HSL are not the same thing. Both use Hue, but HSB's "Brightness" channel behaves differently from HSL's "Lightness." A color at HSB 100% brightness can still be fully saturated; at HSL 100% lightness it's pure white. Figma and Photoshop use HSB, while CSS uses HSL — mixing them up shifts your colors.
RGB values are device-dependent. rgb(59, 130, 246) looks slightly different on a wide-gamut display versus an sRGB monitor. For web work this rarely matters, but for print or color-critical design, be aware that RGB is a relative color space.
Quick Reference
| Format | Syntax Example | Primary Use | Best For |
|---|---|---|---|
| HEX | #3B82F6 | CSS, HTML, SVG | Web development, design handoffs |
| RGB | rgb(59, 130, 246) | CSS, Canvas API, LED control | Programmatic color manipulation |
| HSL | hsl(217, 91%, 60%) | CSS, design systems | Creating tints, shades, and palettes |
| HSB / HSV | hsb(217, 76%, 96%) | Photoshop, Figma, Illustrator | Visual design tools and color pickers |