Color Picker: Hex, RGB, HSL Converter & Eyedropper Online
Free online color picker with hex to RGB, RGB to hex, and HSL conversion. Pick colors with visual picker or eyedropper. WCAG contrast checker, shareable URL, palette export. No sign-up.
● Pick Colors, Convert Hex ↔ RGB ↔ HSL, Check Contrast—All in the Browser
Our free online color picker lets you pick colors with a visual picker or eyedropper, convert hex to RGB, RGB to hex, and HSL in any direction. Copy hex, rgb(), or hsl() with one click. Paste a color in any format and the picker updates. The current color is in the URL so you can share or bookmark. A built-in WCAG contrast checker shows AA/AAA pass/fail for accessibility. All processing runs in your browser—no data is sent to a server.
What is the Color Picker Tool?
This color picker is a free, client-side tool for choosing colors and converting between hex, RGB, and HSL. You use a visual hue/saturation/lightness picker or—in supported browsers—an eyedropper to sample a color from the screen. The tool shows the same color in hex (e.g. #06b6d4), RGB (e.g. rgb(6, 182, 212)), and HSL (e.g. hsl(187, 94%, 43%)). You can paste any of these formats and the picker updates. Recent colors are kept as swatches; you can export the palette as JSON or CSS variables. The contrast checker computes WCAG ratios for text and UI accessibility.
💡 Quick Tip
Paste a hex, RGB, or HSL value into the tool and click Apply—the picker jumps to that color. Use the copy button next to each format to copy the value you need for CSS, Tailwind, or design tools.
Why Use an Online Color Picker?
Designers and developers use a color picker to unify hex, RGB, and HSL without memorizing formulas or opening a separate app:
🎨Design & CSS
- •Get hex, RGB, or HSL for CSS, Tailwind, or design tools
- •Eyedropper to sample from mockups or live sites
- •Export palette as CSS variables or JSON for design systems
♿Accessibility
- •Contrast checker with WCAG AA/AAA for text and UI
- •Test foreground vs background before shipping
- •No extra app—check contrast in the same tab as your picker
Using the Color Picker (Step by Step)
Our Color Picker is built for quick workflows:
1Pick or Paste a Color
Drag on the saturation/lightness box and the hue strip to choose a color, or paste a hex, RGB, or HSL value and click Apply. In Chrome and Edge, use "Pick from screen" to sample any pixel.
2Copy the Format You Need
Click the copy button next to HEX, RGB, or HSL to copy that format to the clipboard. Use recent color swatches to recall the last 10 picked colors.
3Check Contrast & Export Palette
Open the Contrast checker, set a background color, and see the ratio plus WCAG AA/AAA pass/fail. Export current and recent colors as JSON or CSS variables for design systems.
Features at a Glance
| Feature | Description |
|---|---|
| Visual picker | Hue strip and saturation/lightness area; drag to choose any color |
| Hex, RGB, HSL | See and copy current color in all three formats; paste any format to update picker |
| Eyedropper | Pick from screen in Chrome/Edge to sample a color from any pixel |
| Shareable URL | Current color in query string (?hex=…) for sharing or bookmarking |
| Recent colors | Last 10 colors as swatches for quick recall |
| Contrast checker | WCAG ratio and AA/AAA pass/fail for text and UI |
| Export palette | Copy as JSON or CSS variables |
| 100% client-side | No server upload; all processing in the browser |
Example Conversions (Hex, RGB, HSL)
Same color in all three formats—paste any row into the tool to see the picker update:
| HEX | RGB | HSL |
|---|---|---|
| #06b6d4 | rgb(6, 182, 212) | hsl(187, 94%, 43%) |
| #ffffff | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| #ef4444 | rgb(239, 68, 68) | hsl(0, 84%, 60%) |
Best Practices
♿Check Contrast Before Shipping
Use the contrast checker with your text color and background. Aim for WCAG AA (4.5:1 normal text, 3:1 large) or AAA (7:1 normal, 4.5:1 large) for accessible UI and copy.
🔗Share or Bookmark with the URL
The tool puts the current color in the URL. Share the link with teammates or bookmark it to revisit a brand or palette color later.
Common Pitfalls
⚠️Eyedropper Requires Supported Browser
"Pick from screen" uses the browser’s Eyedropper API and works in Chrome and Edge. Other browsers may not support it; use the visual picker or paste a color value instead.
❌Contrast Checker Is for Relative Luminance Only
The tool computes WCAG contrast from the two colors you enter. It does not account for font size, weight, or other design factors—use it as a guide and test with real content.
Pro Tips
🔗Use with HTML & Code Tools
Pick a color, copy hex or RGB, then paste into your styles in the Code Editor or HTML Preview. For escaping or encoding, use HTML Entities or Base64 as needed.
✅ Pick & Convert Colors in Your Browser
Use our free Color Picker to choose colors, convert hex ↔ RGB ↔ HSL, sample with the eyedropper, and check WCAG contrast. Shareable URL, palette export, no sign-up—all client-side.
Related Articles
Magic Box: Intelligent Content Detection That Learns Your Workflow
Discover how Magic Box instantly detects JSON, HTML, curl, JWT, CSV, regex, and 20+ formats. Learn how it adapts to your patterns and suggests workflows to accelerate your development.
Flow Canvas: Free Online Flowchart & Flow Diagram Maker
Create flowcharts and flow diagrams online by clicking to add nodes and dragging to connect. Auto-styling for database, API, user. Templates, export, share. No syntax—visual flowchart maker in the browser.
UUID Generator: Complete Guide to Generating and Using UUIDs
Learn what UUIDs are, when to use v4, v1, v7, or nil, and how to generate, validate, and export UUIDs with our free UUID Generator tool. Best practices and common pitfalls.