Color Picker Online: How to Pick a Color Without Photoshop

You need the exact hex of one pixel — a competitor's button, a screenshot from a client, a photo you're building a palette around. Opening Photoshop for that is absurd, and a licence you don't have is worse. A color picker online does the same job in about four seconds, in a browser tab, without uploading the image anywhere. Here's how it works and where the sharp edges are.

#TL;DR

• A browser color picker reads pixels locally via canvas — no upload needed.
• HEX, RGB, HSL, and OKLCH describe the same pixel in four notations.
• The EyeDropper API samples any screen pixel, but Chromium desktop only.
• <input type="color"> gained alpha and colorspace attributes in Safari 18.4.
• Always check WCAG contrast before committing a picked color to a UI.

#How to pick a color from an image without Photoshop

There are exactly three places a color value can come from, and knowing which one you're in saves a lot of guessing.

#The three ways to get a color value

From a file you have. You load a PNG, JPG, or screenshot into a picker and click a pixel. The tool decodes the image, draws it to a <canvas>, and calls getImageData() on the coordinate you clicked. That returns four bytes — R, G, B, A — which get formatted into whatever notation you asked for.

From anywhere on screen. Chromium desktop browsers expose the EyeDropper API, which opens a native magnifier and returns the color of any pixel you click, including pixels belonging to other applications. Firefox and Safari have not shipped it, so it is an enhancement, never the whole feature.

From a value you already have. Often you don't need to sample anything — you have rgb(79 70 229) from a spec sheet and need it as hex for a Figma field. That's conversion, not picking, and it's the more common case in practice.

#Picking a color from an image in the browser

The mechanics are unremarkable, which is the point — the whole operation is about fifteen lines:

const ctx = canvas.getContext('2d', {
  willReadFrequently: true
});
ctx.drawImage(img, 0, 0);

canvas.addEventListener('click', (e) => {
  const r = canvas.getBoundingClientRect();
  const x = Math.floor(e.clientX - r.left);
  const y = Math.floor(e.clientY - r.top);
  const [red, green, blue] =
    ctx.getImageData(x, y, 1, 1).data;
  console.log(red, green, blue);
});

Nothing here touches the network. That is why a client-side picker can promise no upload and actually mean it: the image never leaves the File object you handed it. The iKit Color Picker works exactly this way — load a file, click a pixel, copy the value.

#Picking a color from anywhere on screen

When the EyeDropper API is available, it is strictly better for sampling outside the tab:

if ('EyeDropper' in window) {
  const dropper = new EyeDropper();
  const { sRGBHex } = await dropper.open();
  // sRGBHex is "#RRGGBB"
}

Per MDN, open() only resolves in response to a user click on a pixel, the cursor visibly changes to a magnifier, and Esc cancels — deliberate friction so a page can't quietly read your screen. It returns one thing: an sRGB hex string. No alpha, no wide-gamut option. We covered the full API surface in a separate post.

#What do HEX, RGB, HSL, and OKLCH actually mean

A picker that only gives you hex is half a tool. Different surfaces want different notations, and converting by hand is a waste of a minute you'll spend ten times a week.

#Same pixel, four notations

All four rows describe one pixel. HEX and RGB are trivially interchangeable — two hex digits per channel, base 16 to base 10. HSL is a reshuffle of the same sRGB cube into a cylinder. OKLCH is the odd one out: it comes from the Oklab perceptual space defined in CSS Color Module Level 4, and its lightness axis tracks what your eye actually reports.

#Why HSL lightness lies and OKLCH doesn't

Take hsl(60 100% 50%) — a yellow — and hsl(240 100% 50%) — a blue. Same stated lightness, wildly different perceived brightness. That mismatch is why a palette built on HSL steps looks lumpy. OKLCH fixes it by construction, which is why design systems have been migrating; we went through the comparison in detail in HSL vs OKLCH.

Practical rule: pick in whatever notation you're comfortable with, but store design tokens in OKLCH.

#When you need alpha

If the color sits over another layer — an overlay scrim, a hover state, a shadow tint — you need a fourth channel. CSS gives you three ways to write it:

.scrim { background: #0F172A80; }
.hover { background: rgb(79 70 229 / 0.12); }
.tint  { background: oklch(52% 0.24 277 / 0.4); }

The 8-digit hex form (#RRGGBBAA) is the one people get wrong most often, because the last byte is 00–FF, not 0–100. We wrote up the conversion table and the rounding traps separately.

#Is the browser's built-in color picker good enough

Every browser ships a color picker already. It's worth knowing exactly where it stops being useful.

#What <input type="color"> can do in 2026

For years the native widget was frozen in 2010: opaque sRGB, seven-character hex, nothing else. That changed when WHATWG added two attributes to the element. Per the WebKit announcement, Safari 18.4 was the first browser to ship them:

<input type="color"
       colorspace="display-p3"
       alpha
       value="oklab(59% 0.1 0.1 / 0.5)">

alpha adds an opacity slider. colorspace takes limited-srgb (the default) or display-p3, unlocking the wider gamut that Apple hardware has shipped since the 2015 Retina iMac. The value attribute now accepts any CSS color, not just hex. Browsers without support fall back to the old sRGB-only picker, so it's safe to use today — MDN's compatibility data still lists the feature as not Baseline, so treat it as progressive enhancement rather than a guarantee.

#Why the native picker still isn't a design tool

It gives you a color. It does not give you the color in the notation you need, does not tell you whether the result passes contrast against your background, does not remember the last twelve colors you sampled, and cannot read a pixel out of a screenshot you were sent on Slack. Those are the actual jobs. The native control is one input in a form, not a workflow.

#Photoshop vs an online color picker: which to use when

Neither is universally better. The split is cleaner than most comparison posts admit.

#Where Photoshop still wins

• Sampling with an averaged radius (3×3, 5×5) instead of a single pixel — genuinely useful on noisy photos.
• Working inside a managed color profile with soft-proofing for print.
• Picking from layered, non-flattened source files.
• CMYK and Lab workflows destined for a press.

#Where the browser wins

For screen work — a hex for a CSS variable, a palette from a photo, a contrast check before a PR — the browser wins on every axis that matters. For anything heading to a printing press, open Photoshop.

#Why does the color picker give a different hex than the screenshot

This is the single most common support question about color pickers, and it almost always has one of three causes.

#JPEG artifacts shift the value

JPEG is lossy in chroma. Sample a flat brand-blue region from a JPEG and you'll routinely find neighbouring pixels differing by 2–4 per channel, more near edges. If you need the canonical brand color, sample from a PNG, an SVG, or the brand guidelines — never from a compressed photo of a screen.

#Screenshot color profile conversion

A screenshot taken on a P3 display and viewed on an sRGB display has been through at least one profile conversion. The numbers you read are the numbers in the file, which may not be the numbers the original CSS specified. If exactness matters, read the value from the source stylesheet, not from a picture of the rendered result.

#Anti-aliased edges

Click one pixel inside the letterform of a rendered heading and you'll get a blend of the text color and the background, not the text color. Zoom in and sample from a solid interior region. This is where the averaged-radius option in desktop tools earns its keep — and where clicking carefully in a zoomed browser picker gets you the same answer for free.

#How to pick a brand color that actually passes contrast

Picking is the easy half. A color that looks good in isolation and fails accessibility on your actual background is a bug you'll ship.

#Check contrast before you commit

WCAG 2.2 asks for a 4.5:1 contrast ratio for normal body text at level AA, and 3:1 for large text. The maths is a relative-luminance ratio, not a vibes check — a mid-tone brand color on white will frequently land near 3.9:1 and quietly fail. Run the number before the color reaches a component; the full calculation is here.

#Build a scale, not a single swatch

One brand hex is never enough. You need a hover state, a disabled state, a border, a tinted background. Generating those by nudging HSL lightness produces the lumpy ramp described above. Generate them as an OKLCH tonal scale instead — hold chroma and hue, step lightness evenly — using a palette generator, then check that each step still passes contrast against the surface it will sit on.

#Take the color into a gradient carefully

Interpolating between two picked colors in sRGB routinely runs through a muddy grey midpoint. Interpolating the same two colors in OKLCH keeps chroma up across the transition. If your picked color is heading into a background gradient, build it in a gradient generator that supports OKLCH interpolation rather than hand-writing linear-gradient() and hoping.

#References

• EyeDropper API — MDN Web Docs — security model, user-gesture requirement, and Baseline status of the screen-sampling API.
• Picking colors of any pixel on the screen with the EyeDropper API — Chrome for Developers — Chrome/Edge 95 support baseline and the sRGBHex return shape.
• Add wide gamut P3 and alpha transparency to your color picker in HTML — WebKit — source for the alpha and colorspace attributes shipping in Safari 18.4.
• <input type="color"> — MDN Web Docs — current attribute list and browser-compatibility data for the native picker.
• CSS Color Module Level 4 — W3C — definitions of the sRGB, Display P3, and Oklab/OKLCH color spaces used throughout.

#Related on iKit

• The EyeDropper API is how a web page samples pixels outside its own tab — the full JavaScript API behind screen-wide picking, with the fallback you still need.
• HEX and RGB are the same number in two bases — the byte-level maths a picker runs every time you switch notation.
• Going the other way, RGB to HEX, has its own rounding traps — why rgb(79.6 …) and #50 don't always agree.
• Eight-digit hex is the compact way to carry alpha — the #RRGGBBAA byte table for every opacity you actually use.
• HSL and OKLCH disagree about what "50% lightness" means — why the notation you pick in changes how your palette looks.
• CSS Color Level 4 added the functions this article keeps referencing — oklch(), color(), color-mix(), and relative color syntax in one place.
• Contrast ratios are arithmetic, not opinion — how AA and AAA thresholds are computed from the color you just picked.
• A single brand hex needs to become a full tonal ramp — turning one picked swatch into an evenly-spaced OKLCH scale.