Color Picker

About the Color Picker

This color picker lets you sample any color directly from your screen using the browser EyeDropper API, then converts that color into every major CSS format — Hex, RGB, HSL, OKLCH, and CSS color() — with one click. Pick a color from any open window or web page, inspect its values, generate harmonious palettes, check WCAG contrast ratios, and copy ready-to-use CSS variables — all without leaving your browser and without sending any data to a server.

Designers and developers reach for a screen color picker when they need the exact value of a color already on their screen: a brand color on a reference site, a UI shade from a mockup, or a tone from a photo. Having all format conversions and accessibility checks in one place removes the round-trips between a color sampler, a converter, and a contrast checker.

Key Features

• Screen EyeDropper: Sample any pixel on your screen — browser tabs, desktop apps, images — using the native browser EyeDropper API.
• Format Converter: Instantly converts the picked color to Hex, RGB, HSL, OKLCH, and CSS color() syntax with individual copy buttons for each.
• Palette Generator: Produces five color harmonies — complementary, analogous, triadic, split-complementary, and monochromatic — based on your selected color.
• WCAG Contrast Checker: Tests foreground/background pairs against all four WCAG 2 levels (AA Normal, AA Large, AAA Normal, AAA Large) and shows a live text preview.
• Color History: Stores up to 50 previously picked colors in localStorage — persists across page reloads so your session is not lost.

How Does the Screen Color Picker Work?

The screen color picker relies on the EyeDropper API, a modern browser API that opens an operating-system-level color sampling cursor. When you click the eyedropper button, the browser hands control to the OS, which lets you move a magnified crosshair over any pixel on your screen — including content outside the browser window. Once you click a pixel, the API returns the selected color as a hex string and the page resumes.

All subsequent processing — format conversion, palette generation, contrast calculation — happens entirely in your browser using JavaScript. No color value is ever transmitted to a server.

The EyeDropper API is supported in Chromium-based browsers (Chrome, Edge, Opera) and is not yet available in Firefox or Safari. If your browser does not support it, the eyedropper button is hidden and you can still enter a hex value manually to use the format converter, palette generator, and contrast checker.

Supported Color Formats

The tool outputs the same color in five representations. Each serves a different context in CSS and design workflows:

• Hex (#rrggbb): The most common format in web development. A six-digit hexadecimal string that encodes red, green, and blue channels from 00 to ff. Universally supported in all browsers and design tools.
• RGB (rgb(r, g, b)): Expresses the same channels as decimal integers from 0 to 255. Useful when you need to manipulate individual channel values in code or apply alpha transparency with rgba().
• HSL (hsl(h, s%, l%)): Describes color as hue (0–360 degrees on the color wheel), saturation, and lightness. HSL is intuitive for making a color lighter, darker, or less saturated without changing its hue.
• OKLCH (oklch(l c h)): A perceptually uniform color space where equal numeric changes produce equal perceived differences. Preferred for generating accessible color scales and gradients that look consistent across hues.
• CSS color(): The modern CSS color(display-p3 r g b) syntax that targets the Display P3 wide-gamut color space available on modern screens. Useful for vivid colors that exceed the sRGB gamut.

How to Use the Color Picker

1. Pick a color: Click the eyedropper button. Your cursor changes to a color-sampling crosshair. Move it over any pixel on your screen and click to select it.
2. Review the color: The picked color appears in the active color swatch and is added to your history strip at the top.
3. Copy a format: Open the Formats tab. Each row shows the color in one format — Hex, RGB, HSL, OKLCH, or CSS color(). Click Copy next to any row to copy it to your clipboard.
4. Generate a palette: Open the Palette tab. Five color harmonies are displayed as swatches. Click any swatch to make that color active and continue working with it.
5. Check contrast: Open the Contrast tab. The picked color is pre-filled as the foreground. Enter or pick a background color. The tool shows the contrast ratio and whether the pair passes each WCAG level.
6. Revisit past colors: Click any swatch in the history strip to make it active again. Use the clear button to reset the history.

Color Palette Generation

The palette generator applies color theory relationships on the HSL color wheel to derive coordinated colors from your selected base. All five palette types start from the same hue and produce colors that work together visually:

• Complementary: The color directly opposite on the wheel (180 degrees away). Creates high-contrast pairings suited to call-to-action buttons and accent highlights.
• Analogous: Two colors adjacent to the base on the wheel (30 degrees on each side). These harmonies feel natural and calm, commonly used in backgrounds and illustrations.
• Triadic: Three colors evenly spaced at 120-degree intervals. Triadic palettes are vibrant and balanced — useful for bold, varied designs without clashing.
• Split-complementary: The two colors flanking the complement (150 and 210 degrees from the base). Provides contrast similar to complementary but with more variety and less tension.
• Monochromatic: Multiple shades and tints derived from the same hue by varying lightness. Produces cohesive, professional palettes for UI components that need visual hierarchy without introducing new hues.

WCAG Contrast Checker

The Web Content Accessibility Guidelines (WCAG) define minimum contrast ratios to ensure text is readable by people with low vision or color vision deficiencies. The contrast checker calculates the ratio between a foreground and background color using the WCAG relative luminance formula and reports pass/fail for four thresholds:

• AA Normal (4.5:1): Required for body text and UI components at standard size. The baseline accessibility level for most public websites.
• AA Large (3:1): Applies to text 18pt or larger, or 14pt bold. Large text is easier to read, so a lower ratio is permitted.
• AAA Normal (7:1): The enhanced level for body text, providing maximum legibility for users with severe low vision.
• AAA Large (4.5:1): Enhanced level for large text.

The live preview panel shows exactly what the foreground color looks like on the background, so you can make informed adjustments before committing to a color combination in your design.

Common Use Cases

• Web design: Extract exact brand colors from a client's site or marketing material and convert them to the formats your CSS framework expects.
• Graphic design handoff: When a designer provides a color in Hex and your system needs RGB or HSL, the format converter handles the translation instantly.
• Accessibility auditing: Test text and background color pairs for WCAG compliance during the design review phase, before code is written.
• CSS development: Generate CSS custom properties for a picked color and paste them directly into a design token file or stylesheet.
• Palette building: Start from a primary brand color and generate a complete set of harmonious accent colors using the palette generator.
• Identifying unknown colors: When you see a color in a screenshot or mockup and need its exact value, sample it with the eyedropper instead of guessing.

Frequently Asked Questions

Is my color data sent to any server?

No. Every operation — color sampling, format conversion, palette generation, and contrast calculation — runs entirely in your browser. Nothing is transmitted to or stored on any server. Your color history is saved only in your browser's localStorage and never leaves your device.

Which browsers support the screen color picker?

The EyeDropper API is supported in Chrome 95 and later, Edge 95 and later, and other Chromium-based browsers. Firefox and Safari do not currently support it. If you are using an unsupported browser, the eyedropper button will not appear, but you can still type a hex value into the input to use the format converter, palette generator, and contrast checker.

Can I sample colors from outside the browser?

Yes. The EyeDropper API opens an OS-level color sampler, which means the crosshair can move over any visible pixel on your screen — other browser windows, desktop applications, images — and return the color value. The browser does not limit sampling to its own content.

What is the difference between HSL and OKLCH?

HSL represents hue, saturation, and lightness in the sRGB color space. Its main limitation is that the perceived brightness differs across hues at the same lightness value — a yellow at 50% lightness looks much brighter than a blue at 50%. OKLCH is a perceptually uniform space where the lightness channel (L) correlates closely with how bright the color actually appears. This makes OKLCH better suited for generating accessible color scales and consistent gradients.

How is the WCAG contrast ratio calculated?

WCAG contrast is the ratio of relative luminance between two colors: (L1 + 0.05) / (L2 + 0.05), where L1 is the lighter color's luminance and L2 is the darker one's. Luminance is computed from the linearized RGB channels of each color. A ratio of 1:1 means no contrast (identical colors); the maximum is 21:1 (black on white).

Related Tools

You might also find these tools useful:

• Filters for Photos — Apply brightness, contrast, saturation, and other adjustments to images directly in the browser.
• Image Compressor — Reduce image file size without visible quality loss before exporting assets for the web.
• Image Resizer — Resize images to exact pixel dimensions for design mockups or web exports.
• Image Cropper — Crop images to a specific region or aspect ratio.
• Screenshot Tool — Capture a screenshot of any web page, then use the color picker to sample colors from it.