Color Picker
Pick any color and instantly get HEX, RGB, HSL values. Use the EyeDropper to sample any pixel on screen.
Color Picker
Pick a color, convert between HEX, RGB and HSL instantly. Sample any pixel on screen with the native EyeDropper.
#6D28D9rgb(109, 40, 217)hsl(263, 70%, 50%)RGB
HSL
Shades
--color-primary: #6D28D9; --color-primary-rgb: 109, 40, 217; --color-primary-hsl: 263, 70%, 50%;
Sponsored
Related Tools
Markdown Editor
Write, preview, and export Markdown with live rendering
Regex Tester
Test regex patterns with live matches and groups
Git Commit Generator
Paste a git diff and generate clean conventional commit messages instantly
Email Validator
Validate email addresses, inspect domains, and generate mailto links
Free Online Color Picker — HEX, RGB, HSL Color Converter
This color picker lets you visually select any color and instantly get its value in HEX, RGB, and HSL formats — ready to copy into your CSS, Figma, or design tool. No installation, no account required.
Use the built-in EyeDropper to sample any color directly from your screen — a pixel from an image, a website, or any application. It's the fastest way to grab exact color codes without leaving your browser.
What you can do with this tool
- Pick any color using the visual color wheel and sliders
- Use the EyeDropper to sample a pixel from anywhere on your screen
- Copy color values in HEX (
#ff6b35), RGB (rgb(255, 107, 53)), and HSL (hsl(20, 100%, 60%)) - See a live color preview as you adjust values
- Convert between color formats instantly — no manual math
How to use the Color Picker
- Click on the color wheel or drag the sliders to select a color
- Or click the eyedropper icon and click any pixel on your screen
- Copy the HEX, RGB, or HSL value with one click
- Paste directly into your CSS, Tailwind config, or design tool
FAQ
Can I pick colors from images or other apps?
Yes — click the EyeDropper button and then click any pixel on your screen, including images, browser windows, or desktop apps. This uses the native browser EyeDropper API (supported in Chrome, Edge, and Opera).
Does this color picker work offline?
Yes. All processing happens in your browser. Once the page loads, the color picker works without any internet connection.
What is the difference between HEX, RGB, and HSL?
HEX is a 6-digit hexadecimal code used in CSS and design tools. RGB defines a color by its red, green, and blue channels (0–255). HSL defines hue (0–360°), saturation, and lightness — useful for adjusting color programmatically.