Color Picker
Professional color picker with RGB, HSL, and HEX support
Color Picker
HEX
#3B82F6
RGB
rgb(59, 130, 246)
R: 59
G: 130
B: 246
HSL
hsl(217, 91%, 60%)
H: 217°
S: 91%
L: 60%
Complete Guide to Color Picking
Everything you need to know about color models, output formats, eyedropper sampling, and building accessible palettes — from pixel to production.
Understanding Colors
How Color Pickers Work
- Screen colors use the RGB model: each pixel emits red, green, and blue light at 0–255 intensity
- HEX codes (#RRGGBB) are compact RGB notation using hexadecimal — #FF0000 = pure red
- HSL adds perceptual axes: hue (0–360°, the color wheel position), saturation (0–100%, intensity), lightness (0–100%, black to white)
- The eyedropper / color sampling tool reads individual pixel RGB values from any on-screen element
- Color pickers return values in multiple formats — choose whichever your workflow needs
- Browser support: <input type="color"> is supported in all modern browsers with native OS color picker
- The EyeDropper API (Chrome/Edge 95+) allows sampling any pixel on screen, including outside the browser
- Color values are device-dependent — the same HEX looks different on sRGB vs P3 displays
Color Spaces for Digital Work
- sRGB: standard color space for web, most monitors, and images — 16.7 million colors
- Display P3: wider gamut (~25% more colors) used on modern Apple devices and HDR monitors
- Adobe RGB: larger gamut for professional photography and print prepress
- ProPhoto RGB: very wide gamut for raw photo editing (not safe for web)
- CSS Color Level 4: adds P3, LAB, LCH, oklch color functions
- HEX/RGB: always interpreted as sRGB unless CSS color() function specifies a profile
- oklch: the new CSS standard for perceptually uniform colors — same L value = same perceived brightness
- When colors look different on two screens, it's usually a color profile or gamut mismatch
Features & Formats
Output Format Reference
- HEX: #RRGGBB (6 hex digits) — most common for web CSS
- Short HEX: #RGB — only when each channel is identical (e.g., #FF33AA → #F3A)
- RGBA: rgba(R, G, B, A) — A is alpha opacity 0.0–1.0
- HSL: hsl(H, S%, L%) — H=hue 0-360°, S=saturation 0-100%, L=lightness 0-100%
- HSLA: hsla(H, S%, L%, A) — adds alpha to HSL
- CSS Color Level 4: color(display-p3 R G B) for wide gamut
- oklch: oklch(L% C H) — perceptually uniform, great for UI scales
- RGB integer: rgb(R, G, B) — channels 0–255
- RGB normalized: (R/255, G/255, B/255) — used in shader programming
Eyedropper Sampling
- EyeDropper.open(): opens OS-level color picker for sampling any pixel
- Trigger: requires user gesture (click) — cannot be called programmatically on page load
- Returned value: {sRGBHex: '#rrggbb'} in sRGB color space
- Browser support: Chrome 95+, Edge 95+, Opera 81+ — not supported in Firefox or Safari (as of 2024)
- Fallback: canvas-based pixel sampling from uploaded image when EyeDropper unavailable
- Pixel perfect: reads the exact rendered color including blending, gradients, and transparency effects
- Screenshot-based: when sampling outside browser on supported platforms, captures screen region
- Use case: matching existing UI colors, extracting brand colors from logos
Color History & Palettes
- Recent colors: stored in localStorage, persist across sessions
- Palette building: add any sampled or entered color to a named palette
- Palette export: JSON format containing HEX codes and custom names
- Import: paste a comma-separated list of HEX codes to create a palette
- Color distance: ΔE (Delta E) measurement of perceptual difference between colors (< 2 = not noticeable)
- Sorting: palettes can be ordered by hue, saturation, lightness, or creation time
- Favorites: star any color for quick recall
- Clipboard: one-click copy of any format (HEX, RGB, HSL) to clipboard
Applications
UI/UX Design
- Sample colors from design mockups to match exact brand values
- Build consistent design system palettes with HSL lightness variations
- Check WCAG contrast ratios for text/background combinations
- Extract color values from screenshots to recreate designs in code
- Create accessible color scales with consistent perceptual lightness steps
- Sample hover/active state colors from competitor websites
- Generate tints (lighter) and shades (darker) from a base brand color
- Build gradient stops by sampling intermediate colors
Brand & Identity Work
- Extract exact brand colors from company logos (PNG/SVG screenshots)
- Match print-to-screen color values for omnichannel consistency
- Document brand colors in all required formats (HEX, RGB, CMYK, Pantone)
- Build brand color palettes for design system tokens
- Sample colors from physical products photographed for web
- Verify vendor-delivered assets match brand color specifications
- Create secondary and tertiary brand palettes from primary colors
- Document color usage guidelines with sampled examples
Web Development
- Convert Figma/Sketch HEX values to CSS custom property format
- Pick colors for CSS gradients and background definitions
- Sample exact border and shadow colors from existing UI elements
- Generate CSS color variable sets from a design file screenshot
- Extract colors from third-party UI libraries to match their theme
- Validate that CSS implementation matches the design spec
- Build color-blind safe alternatives by examining hue separation
- Sample colors from email templates to match web and print
Content Creation
- Match text colors to photo backgrounds for social media graphics
- Sample dominant colors from images for cohesive slide deck backgrounds
- Extract theme colors from photos for consistent Instagram feeds
- Pick complementary accent colors from hero images
- Sample foreground colors that pop against specific background photos
- Create consistent thumbnail color schemes from a reference image
- Match video overlays and lower-third colors to production design
- Align presentation template colors with brand screenshots
Best Practices
Getting Consistent Colors
- Always work in sRGB for web — it's the web standard color space
- When sampling, zoom in first — individual pixels may vary from the average perceived color
- Use HSL for generating variations — lightness is easy to control, unlike RGB math
- Check sampled colors in context — the same color looks different on different backgrounds
- Calibrate your monitor before critical color work — uncalibrated screens shift colors significantly
- Use relative luminance, not just lightness, for accessibility checks
- Sample at 100% zoom to avoid anti-aliasing averaging multiple adjacent pixels
- Convert to CMYK only when preparing final print files — not during design
Building Good Palettes
- Start with one base color; use HSL to create a 9-step scale (50, 100, 200…900)
- Keep semantic meaning: 500 = base, 600–700 = dark/hover, 100–200 = light/subtle backgrounds
- Limit to 3–4 primary colors in a UI — each additional color adds cognitive load
- Always test your palette against white and dark gray backgrounds
- Ensure at least a 3:1 contrast ratio between any two colors used together
- Use oklch for modern CSS projects — it avoids the color "mud" problem in HSL gradients
- Document the purpose of each color, not just its value
Examples by Category
Brand Color Extraction
- Uploaded Google logo PNG → sampled blue → #4285F4 = RGB(66,133,244) = HSL(217°,89%,61%)
- Slack screenshot → sampled purple → #4A154B = RGB(74,21,75) = HSL(299°,56%,19%)
- Spotify logo → sampled green → #1DB954 = RGB(29,185,84) = HSL(141°,73%,42%)
- YouTube red → #FF0000 = pure red, 100% saturation
- Netflix red → #E50914 = RGB(229,9,20) = HSL(357°,96%,47%)
- Twitter/X blue → #1D9BF0 = RGB(29,155,240) = HSL(206°,87%,53%)
CSS Variable Generation
- Base blue #3B82F6 → --color-blue-500: #3B82F6
- Lightened 20% → --color-blue-300: #93C5FD
- Darkened 20% → --color-blue-700: #1D4ED8
- 10% opacity → rgba(59,130,246,0.1) for subtle backgrounds
- HSL hover state: hsl(217, 91%, 50%) (5% darker)
- Focus ring: rgba(59,130,246,0.5) for visible focus with alpha
Accessibility Checking
- White text on blue-500 (#3B82F6): ratio 3.0:1 → fails AA for normal text
- Black text on blue-500: ratio 4.6:1 → passes AA
- White on blue-700 (#1D4ED8): ratio 7.2:1 → passes AAA
- Gray-400 (#9CA3AF) on white: ratio 2.85:1 → fails (common mistake in placeholders)
- Yellow-300 (#FDE047) on white: ratio 1.4:1 → catastrophic fail
- Dark navy #1E293B on white: ratio 14.0:1 → excellent
Frequently Asked Questions
What is the eyedropper tool and how does it work?▾
The eyedropper samples the exact RGB color of any pixel on your screen. Click the eyedropper button, then click anywhere — on a website, image, or app window. It uses the browser's EyeDropper API (Chrome/Edge) or canvas-based pixel reading as a fallback. The returned HEX color is in the sRGB color space.
Why does my picked color look different in another app?▾
Color appearance varies by display profile, monitor calibration, and application color management. A color that looks vibrant on an uncalibrated display may appear washed out on a calibrated one. HEX values are numerically identical — the visual difference is your display rendering. For accurate cross-device matching, use a calibrated monitor and always specify your color profile.
Can I sample colors from outside the browser?▾
On Chrome/Edge with the EyeDropper API, yes — you can sample colors from any part of your screen, including desktop apps, other browser tabs, and images. On Firefox and Safari, sampling is limited to within the browser canvas. The feature requires a user click to activate for privacy and security reasons.
What is the difference between HSL and HSV/HSB?▾
Both use Hue (color wheel), Saturation, and a third channel. HSL's Lightness goes from black (0%) through the full color (50%) to white (100%). HSV/HSB's Value/Brightness goes from black (0%) to the full color (100%) — it can't represent white without reducing Saturation. HSL is more intuitive for designers; HSV matches how painters mix colors with black.
How do I use the color picker for web accessibility?▾
Enter your text color and background color as HEX or RGB values. The tool calculates the WCAG 2.1 contrast ratio: 4.5:1 minimum for normal text (AA), 3:1 for large text (AA), 7:1 for enhanced AAA. Adjust one color's lightness in HSL until the ratio passes. Most accessibility issues are fixed by simply making text darker or background lighter.
Are palette colors saved permanently?▾
Palettes are saved in your browser's localStorage — they persist until you clear your browser data. They are not stored on any server and won't sync across devices or browsers. To back up your palette, use the JSON export feature and save the file. To restore, import the JSON file on any device.