What Is a Color Picker?
A color picker is an interactive tool that lets designers and developers select any color and instantly retrieve its value in multiple formats. Instead of doing manual hex-to-RGB conversions in your head or hunting through documentation, a color picker centralizes everything: choose a color once, get every format you need in one click.
This free online color picker works entirely in your browser — no installation, no account, no server calls. Just open the page and start picking.
HEX, RGB, HSL — Which Format Should You Use?
The right format depends on where you're working:
- HEX (#rrggbb) — The most common format for web design. Compact and widely supported across CSS, SVG, and design tools.
- RGB (red, green, blue) — Great for when you need to manipulate individual channels, or when working with CSS
rgba() for transparency.
- HSL (hue, saturation, lightness) — The most human-friendly format. Easy to adjust: tweak lightness to make a color lighter/darker without changing its hue.
- HSB / HSV — Used natively in most design applications like Figma, Photoshop, and Illustrator. Brightness at 100% gives the purest, most saturated form of a color.
- CMYK — Used in print design. Represents how a color is mixed from cyan, magenta, yellow, and key (black) inks.
How to Use the Eyedropper to Pick Screen Colors
The Eyedropper button uses the browser's native EyeDropper API — available in Chrome and Edge — to let you sample any color from any part of your screen. This is useful when you're looking at a design mockup, a website, or an image and need to extract the exact color value.
Click the Eyedropper button, then click anywhere on your screen. The color picker will immediately update all format outputs to match the sampled color and add it to your recent colors history.
Understanding Contrast Ratios
The WCAG (Web Content Accessibility Guidelines) defines minimum contrast ratios to ensure text is readable by people with low vision or color blindness. This tool shows your color's contrast ratio against both white and black backgrounds:
- 4.5:1 or higher — Passes WCAG AA for normal body text
- 3:1 or higher — Passes WCAG AA for large text (18px+ or bold 14px+)
- 7:1 or higher — Passes WCAG AAA for the strictest accessibility requirement
When choosing text or background colors for a web project, always check the contrast ratio first. Good contrast improves readability for everyone, not just users with visual impairments.
Recent Colors History
Every color you pick is automatically saved to a recent colors strip at the bottom of the output panel. Click any swatch to instantly restore that color across all formats. Your history persists between sessions using browser localStorage — no account needed. Click Clear to wipe the history at any time.
CSS Custom Properties
The CSS VAR output gives you a ready-to-paste CSS custom property in the format --color: #rrggbb;. This is useful when you're building a design system or theming a component and want to define colors as variables. Simply rename the variable to something meaningful (e.g. --brand-primary) and drop it into your :root block.