Color Picker for Designers

Sample any pixel in an image, get hex / RGB / HSL, and pull a full palette in one click.

Every visual artefact you ship has a tool behind it. The tabs that do not need a design system: a drop-resize-compress loop before a hero lands, a QR for a poster, a swatch you picked off a screenshot. All of those happen in your browser, so the artefacts never leave the machine you are sitting at.

Open the Color Picker →

What it does for Visual designers and brand teams

How to use it

  1. Drop a PNG, JPG or SVG screenshot in. The image is drawn into a canvas at its native resolution.
  2. Click any pixel. The hex / RGB / HSL fields update, with the selected color also highlighted in a large swatch so you can sanity-check it.
  3. Copy the format your downstream tool wants. The palette button below pulls the five most dominant colors via a quick k-means pass.

Other tools Designers reach for

Image ResizeResize a hero or a thumbnail to exact pixel dimensions, with export to JPG / PNG / WebP.Image CompressorPull a JPG or PNG down to a smaller file size for the web, with a quality dial you can preImage Format ConverterConvert between JPG, PNG and WebP without a privacy-leaking upload.QR Code GeneratorGenerate a QR for a poster, a card, or a product label, with a foreground color you chooseBase64 Encoder / DecoderInline small assets into CSS or HTML without an upload step.

Common questions

Which notation should I hand off to the developer - HEX, RGB or HSL?

HEX for a flat, opaque brand value, because it is the most portable and the least surprising. Use RGB when the value has to carry alpha, and HSL when the system derives tints and shades, since lightness is comprehensible to whoever maintains the theme next.

Why does my accent colour look different in the design tool and in the browser?

Colour management. A design tool may render in a wider working space while the browser assumes sRGB, and a value pasted as HEX is interpreted in whichever space the receiving app has active. Compare the swatch inside a browser, not only between two design tools.

How do I check a pair of colours for contrast before shipping?

Read the ratio rather than trusting your eye: the WCAG thresholds are about 4.5:1 for body text and 3:1 for large text and interface edges. Pick the pair here, then verify the ratio - and remember that a colour which passes on a white card can fail once it sits on a tinted panel.