Screen Color Analysis Tool

Picking a color you can see but can't name

You often spot the exact shade you want on something already on your screen — a logo, a photo, another app — but you have no idea what its hex code is. This tool's "Pick Color from Screen" button uses the browser's native EyeDropper API to let you click any pixel anywhere on your display and read back its sRGB hex value. That API ships in Chromium-based browsers (Chrome, Edge, Opera). If your browser doesn't support it, the tool quietly falls back to the manual hex box, so you can still paste a code like #3b82f6 and analyze it. Everything after the pick happens with math in your browser; no color you sample is uploaded anywhere.

Six formats, and why they differ

Once a color is loaded, the tool converts it into HEX, RGB, HSL, CMYK, LAB, and LCH. These aren't redundant — each describes the same color through a different lens. RGB and HEX are how screens emit light. HSL (hue, saturation, lightness) is intuitive for designers because nudging one number does one predictable thing. CMYK approximates how inks mix on paper, which is why a vivid screen color can look duller once printed. LAB and LCH come from a perceptually-oriented color space, meaning equal numeric steps look like roughly equal visual steps to the human eye — useful when you need shades that feel evenly spaced.

The accessibility math behind the WCAG badges

The WCAG section is the part most worth understanding. For each color the tool computes relative luminance by first linearizing each RGB channel (reversing the display's gamma curve) and then weighting them as 0.2126·R + 0.7152·G + 0.0722·B. Green dominates because the human eye is most sensitive to it. It then forms a contrast ratio against pure white and pure black as (lighter + 0.05) / (darker + 0.05). The result maps to a badge: 7:1 or higher earns AAA, 4.5:1 earns AA, 3:1 earns "AA Large" (acceptable only for big or bold text), and anything below 3:1 fails.

Worked example: the default #3b82f6 blue has a luminance around 0.21. Against white that yields roughly 3.7:1 — it passes AA for large text but fails for small body copy, which is why blue links often need to be a touch darker. Against black it scores far higher. The tool shows both so you can choose your background deliberately.

Color harmonies, computed from the hue wheel

The harmony rows rotate your color's hue around the 360° wheel while keeping saturation and lightness fixed. Complementary adds 180° (the opposite side); analogous shifts ±30°; triadic uses 120° and 240°; split-complementary uses 150° and 210°; tetradic adds a four-color square. Monochromatic is the exception — it holds the hue and instead varies lightness and saturation to build a tonal set. Click any harmony swatch and it becomes the new active color, so you can walk a palette outward step by step.

Checking your design for color blindness

The simulation applies fixed transformation matrices for deuteranopia (the most common red-green type), protanopia, and tritanopia (blue-yellow), showing how your color collapses toward a colorblind viewer. The lesson is rarely about one swatch in isolation; it's about pairs. If your "success green" and "error red" look nearly identical in the deuteranopia preview, never rely on color alone — add an icon, a label, or a shape.

Practical tips and pitfalls

• The eyedropper reads what's rendered, not the source file. Sampling a JPEG shows the compressed, displayed pixel, which can differ slightly from the original asset.
• Closest CSS named color is approximate. The tool measures straight-line distance in RGB to a list of common names, so the nearest name may still be visibly off; treat it as a label, not an exact match.
• Hex must be six digits. Three-digit shorthand like #f00 isn't accepted by the analyzer — write it out as #ff0000.
• Your last 20 colors are kept in a history strip for quick comparison, and clearing it removes them entirely.