Color Picker & Palette
Inspect screen colors using browser EyeDropper API or palette picker. Instant conversions between HEX, RGB, and HSL with recent color history.
Selected colors will appear here automatically.
Color Formats
RGB Channel Controls
WCAG 2.1 Contrast Checker
Check legibility of this color against white, black, or custom background colors.
How to use Color Picker & Palette
Simple steps to get your task done in seconds
Choose or Sample a Color
Click the color swatch, type or paste a HEX code, adjust RGB sliders, or use the screen EyeDropper to sample any visible pixel.
Inspect Formats & Check Contrast
Review synchronized HEX, RGB, and HSL values while verifying real-time WCAG 2.1 AA and AAA contrast ratings against white and black.
Copy Codes & Save History
Click any code card to copy formatted CSS values to your clipboard. Your last 16 unique color selections are automatically saved in local browser storage.
Browser-Based Color Picking & Contrast Analysis
ZapPebble combines an interactive color studio, real-time HEX/RGB/HSL conversion, screen pixel sampling via the browser EyeDropper API, and live WCAG 2.1 accessibility contrast checking. Everything runs 100% locally inside your browser memory without transmitting your color data or screen content to remote servers.
Multi-Format Conversion
Instantly view and copy synchronized HEX (#2563EB), RGB (rgb(37, 99, 235)), and HSL (hsl(221, 83%, 53%)) values as you adjust colors or sliders.
WCAG 2.1 Contrast Testing
Verify legibility against white, black, or custom background colors with real-time pass/fail ratings for normal text (AA/AAA) and large headings.
Screen EyeDropper & History
Sample any visible pixel directly from your display on supported browsers, and store up to 16 recent color swatches in your local browser profile.
How to Use the Color Picker
Select, adjust, and export colors in three simple steps:
Choose or Sample a Color
Click the native color swatch, type or paste a 3- or 6-digit HEX code, tweak the red/green/blue sliders, or click Pick Color from Screen to sample pixels directly using the browser EyeDropper.
Inspect Formats & Contrast
Review synchronized HEX, RGB, and HSL values in the format rows. Check the WCAG 2.1 contrast score against white, black, or a custom background color to ensure text legibility.
Copy Values & Reuse Palettes
Click Copy next to HEX, RGB, or HSL to paste directly into your CSS or design files. Recent colors are automatically saved to your local palette for quick recall.
HEX vs. RGB vs. HSL: What's the Difference?
Each color model represents the same visual spectrum using a different mathematical structure. Understanding their differences helps you choose the right format for your workflow:
| Format | Structure & Notation | How It Works | Best For |
|---|---|---|---|
| HEX | #2563EB | Hexadecimal base-16 shorthand representing red, green, and blue intensities from 00 to FF (0 to 255). | CSS stylesheets, Tailwind configuration, Figma, design tokens, brand style guides |
| RGB | rgb(37, 99, 235) | Additive light model specifying Red, Green, and Blue channels as decimal integers from 0 to 255. | Canvas manipulation, WebGL, image processing, CSS opacity functions (rgba) |
| HSL | hsl(221, 83%, 53%) | Cylindrical model: Hue (0–360° on color wheel), Saturation (0–100%), and Lightness (0–100%). | Design systems, hover/active state variations (adjusting lightness without changing hue) |
Convert HEX, RGB, and HSL Values
ZapPebble computes equivalent representations in real time. Changing any channel slider immediately updates the hexadecimal, RGB, and HSL outputs.
Need to generate a QR code with custom brand colors? Use our QR Code Generator to create high-contrast scannable codes.
Pick a Color Directly From Your Screen
On supported web browsers, ZapPebble utilizes the native W3C EyeDropper API to sample any visible pixel from your screen—including other browser tabs, images, videos, and desktop windows.
Supported Browsers
The EyeDropper API is natively supported in modern Chromium-based desktop browsers including Google Chrome, Microsoft Edge, Brave, and Opera. When available, the Pick Color from Screen button activates immediately.
Browser Security & Fallback
Browsers require an explicit user gesture (a direct click) to activate the eyedropper loupe. If your browser does not support the API (such as Firefox or Safari), ZapPebble displays a helpful fallback notice and provides full access via the native color spectrum swatch and HEX input.
What Is Color Contrast Ratio?
Contrast ratio measures the difference in relative luminance (perceived brightness) between two colors. The scale ranges from 1:1 (zero contrast, identical colors) to 21:1 (maximum contrast, pure black against pure white).
Low contrast makes text difficult or impossible to read for users with low vision, color blindness, or age-related vision decline. It also impairs readability for all users under direct sunlight or on low-brightness mobile screens. Testing your text colors against their background ensures inclusive, readable user experiences.
WCAG AA vs. AAA Contrast Levels
The Web Content Accessibility Guidelines (WCAG 2.1) establish clear mathematical threshold requirements based on text size and font weight:
| Text Category | Definition | WCAG Level AA (Minimum) | WCAG Level AAA (Enhanced) |
|---|---|---|---|
| Normal Text | Body copy, paragraphs, labels, and small UI text under 18pt (or under 14pt bold) | ≥ 4.5:1 | ≥ 7.0:1 |
| Large / Bold Text | Headings, hero text, and titles at or above 18pt (or at/above 14pt bold ~24px) | ≥ 3.0:1 | ≥ 4.5:1 |
How to Choose More Accessible Colors
Follow these practical design principles when building user interfaces:
Test Light & Dark Backgrounds
A brand color that passes on white may fail on dark slate backgrounds. Use ZapPebble's quick preset buttons to test your color against both white (#FFFFFF) and black (#000000).
Don't Rely on Color Alone
Always accompany color cues with icons, underlines, or text labels (e.g. error alerts should include an alert icon, not just red text) so color-blind users can navigate confidently.
Save and Reuse Recent Colors
ZapPebble automatically saves up to 16 unique recent color picks to your local browser storage. You can click any saved swatch to restore its values, or click Clear History at any time to reset your palette.
Your color history is stored exclusively in your browser's local storage. It is never synchronized across external accounts, never transmitted over the network, and never shared with third parties.
Using Picked Colors in CSS
Copying values from ZapPebble is ready for direct insertion into CSS rules, Tailwind configs, and design systems:
/* Hex Code */
.button-primary {
background-color: #2563EB;
}
/* RGB Syntax */
.card-border {
border-color: rgb(37, 99, 235);
}
/* HSL Syntax (easy to adjust lightness for hover states) */
.link-hover:hover {
color: hsl(221, 83%, 43%); /* 10% darker */
}Why Two Colors Can Look Different but Still Have Weak Contrast
A common trap in web design is assuming that because two colors have completely different hues (e.g. bright green and bright yellow), they will provide sufficient contrast for text.
The human eye perceives contrast through differences in lightness (photopic luminance), not chromatic hue. Green and yellow share similar relative luminance values. Placing green text over a yellow background creates severe visual vibration and fails WCAG AA standards despite being clearly different colors. Always rely on mathematical luminance contrast ratios rather than subjective color differences.
100% Client-Side Privacy: Your Color Data Stays in Your Browser
All color space conversions (HEX, RGB, HSL), relative luminance computations, WCAG ratio evaluations, and EyeDropper sampling run entirely within your local browser sandbox.
ZapPebble does not transmit sampled screen pixels, color selections, or recent palettes to any external server. There are no tracking scripts, no third-party APIs, and no remote storage.
Frequently Asked Questions
Related tools
Other utilities that pair well with Color Picker & Palette