Color Picker

Picking a pixel: HEX, RGB and the palette grid

Upload any image and it renders to a canvas. Move the pointer over the photo and the readout updates to the color directly under the cursor; click to lock a value. The readout shows the HEX triplet (for example #FFFFFF) and the RGB channel values (for example 255, 255, 255), and clicking either value copies it to the clipboard. The tool page also documents HSL as the third working color model, useful when you want to describe a tint by hue, saturation and lightness instead of channel numbers.

Besides point sampling, extractPalette() runs once the image loads and again when you press the re-extract button: it scans the photo for its dominant tones and renders them as a swatch grid. Copy all colors flattens every swatch into the clipboard in one go, ready to paste into a style sheet or design token list.

• Sample near solid regions: colors on an anti-aliased or noisy edge blend two neighbors together and will not match the brand swatch exactly.
• A photo with one dominant subject (a product shot, a brand poster) produces a cleaner palette than a busy outdoor scene.
• The canvas only displays the image locally; nothing is uploaded when you sample or extract.

Where sampled colors feed back into production

The typical loop is: pull the brand palette from a reference photo, paste the HEX values into your CSS, then use the same palette on generated assets. If a sampled icon needs to ship inline in a web page, the Base64 encoder converts the image to a data URI. If the reference photo itself needs correction before sampling, the Enhancer can even out exposure so dark and bright regions do not distort the extracted tones.

Sampling strategy and copy workflow

The most reliable samples come from large, flat regions: a painted wall, a solid garment, a brand block in a poster. Avoid sampling along edges, anti-aliased text strokes or JPEG noise, because those pixels blend two neighboring colors and produce a value that exists only on your screen. Hover first, watch the readout settle, then click to lock. Clicking the HEX or RGB readout itself copies that value, so you do not need to select text.

The extracted palette is a starting point, not a finished system: press re-extract when a first pass over-produces one dominant color, then copy all colors into your tokens file. For a palette destined for a web page, pair the sampled HEX values with the Base64 encoder for any tiny swatch icons; for fixing an overexposed reference photo before sampling, the Enhancer re-balances exposure so bright highlights stop skewing the palette toward white.

Reading a sampled value in context

HEX and RGB are the same color described two ways: #FF5733 is rgb(255, 87, 51). HSL separates hue from the amount of color and its lightness, which is handier when you want a lighter or darker sibling of the same brand tone rather than a new hue entirely. Click the swatch in the palette grid to copy it too, and keep the re-extract button in mind whenever the first palette favors one obvious color.

Pick Exact Colors From Any Image

A consistent palette makes a design feel cohesive. PixlReady’s color picker analyses an image entirely in your browser: move over the picture to read the color under the cursor and click to copy its HEX, RGB and HSL values. The palette view automatically extracts the dominant colors, giving you a ready-made scheme pulled from a logo, a photo or a reference design.

Use the copied values directly in CSS, design software or brand guidelines. Because the image never leaves your device, you can sample colors from confidential mockups and client work with no privacy concern.

Tips for best results

• Sample a few nearby pixels on gradients and average them for a representative tone.
• Pull 4 to 6 dominant colors from a logo to build a matching page theme.
• Record both HEX (for web/CSS) and HSL when you need to tune lightness consistently.
• Avoid sampling JPEG-compressed edges, where colors can shift; choose flat areas.

Common use cases

• Matching a website or presentation to a brand logo
• Building color palettes from mood boards and photography
• Finding the exact hex code of a competitor or reference color
• Checking accessibility-friendly foreground and background combinations

Frequently Asked Questions