Color Picker – Free Online Tool

Color Picker lets you pick a colour visually and instantly read it as HEX, RGB and HSL. No installs, no sign-in — every conversion runs in the browser. Useful when you copy a colour from a design file and need to drop the equivalent CSS into your stylesheet, or when you want to see what a hand-typed HEX looks like alongside its RGB/HSL breakdown.

• 100% free with no hidden costs or daily limits
• Works offline after the first page load
• Lightweight page weight that loads quickly even on slow connections
• Outputs valid CSS, Tailwind, and design-tool color formats side-by-side
• Works with any color input format — HEX, RGB, RGBA, HSL, HSLA, named colors

1. Click the color swatch to open the native color picker, or type a HEX code directly
2. Watch HEX, RGB and HSL values update in real time
3. Use the copy button next to each format to grab the value
4. Combine with the Color Palette Generator to build a full scheme around your pick

• Translating a Figma/Sketch swatch into CSS-ready values
• Sampling a colour for a Tailwind config or custom CSS variable
• Confirming the RGB breakdown of a colour referenced by name in a brand guide
• Generating HSL values to feed into a darken/lighten function

Typed HEX shows an error or no preview.

Accepted forms are #RGB (3 digits) and #RRGGBB (6 digits). Anything else (alpha, named colours like "red") needs the Color Converter instead.

HSL values look slightly different from another tool.

Some tools round HSL components differently. Our rounding matches the CSS spec: hue 0-360, saturation/lightness 0-100, no decimals.