True Colors

True Colors

The Weeknd has this track on Starboy called “True Colors,” and the whole song is built on one request: “girl, come show me your true colors, paint me a picture with your true colors.” He’s asking for honesty, for what’s actually there underneath the surface. Not the curated version, not the filtered one — the real thing.

That line kept coming back to me while building this tool, because that’s literally what an image color picker does. You give it a picture, and it shows you the true colors — every pixel, every shade, every value. No guessing, no approximation. You hover over a spot and it tells you exactly what’s there. “Paint me a picture with your true colors” — and the image already did.

This was one of my favorite builds. I had a clear reference point — imagecolorpicker.com — but I wanted ours to feel more intentional, more considered. The magnifier needed to be precise. The color output needed to be instant. The dominant palette needed to extract itself without being asked. It came together in a session where every decision felt like it was in the right place, which, when you’re building a tool about seeing things clearly, felt appropriate.

The result is an Image Color Picker that runs entirely in your browser. Upload an image, hover to preview, click to extract. HEX, RGB, HSL — all three, every time. “These are the questions of a new lover” — and this tool answers all of them at once.

I’ve Been Hearing Different Stories

“I’ve been hearing different stories about you.” In the song, it’s about inconsistency — hearing one thing from one place, another from somewhere else. Colors have the same problem. The same shade can be described as #0193db, or rgb(1, 147, 219), or hsl(200, 99%, 43%). Three different stories, same truth.

This tool gives you all three, every time you pick or hover. No switching between modes, no dropdown to select a format. Every color is displayed in HEX, RGB, and HSL simultaneously, and every value is clickable to copy. One tap and it’s on your clipboard, ready to paste into CSS, Figma, or wherever you need it.

Here’s what the tool does:

• Hover preview. Move your cursor over the image and the side panel updates in real time with the color underneath. You see the swatch, the HEX, the RGB, and the HSL before you even click. No commitment, just looking.
• The magnifier. A 9x9 pixel grid that follows your cursor, showing you exactly what’s around the point you’re about to pick. The center pixel is highlighted. Grid lines separate each cell. It flips position automatically when you get near the edges so it never goes off-screen.
• Click to pick. Click anywhere and the color is captured — added to your pick history, displayed in full detail. The exact pixel, not an average, not a blend. What’s there is what you get.
• Dominant palette. The moment your image loads, up to 8 dominant colors are extracted automatically. Sorted dark to light. No button to press, no waiting — it just appears.
• Pick history. Your last 20 picks are saved as swatches. Click any swatch to inspect it again. Duplicates are deduplicated — if you pick the same color twice, it moves to the front instead of doubling up.
• Paste from clipboard. Ctrl+V or Cmd+V and whatever image is on your clipboard lands directly in the tool. Screenshot something, paste it, start picking. No file dialog needed.

“I’d much rather hear the truth come straight from you.” Every value in this tool comes straight from the pixel. No interpretation, no rounding, no averaging.

So When I’m Touching You, Can I Trust in You?

“So when I’m touching you, can I trust in you?” The Weeknd’s asking about trust at the point of contact. In this tool, the point of contact is the click — and yes, you can trust it.

When you click on the image, the Canvas API reads the exact RGBA values of that single pixel. Not a region, not an area — one pixel. The coordinate is calculated by mapping your click position to the canvas resolution, accounting for any scaling between the display size and the actual image dimensions. It’s pixel-perfect, which is the kind of thing that matters when the difference between #0193db and #0194dc is the difference between your brand color and something that’s almost your brand color.

The magnifier works the same way but broader — it reads a 9x9 grid of pixels around your cursor using getImageData(), then renders each one as an SVG rectangle with the exact RGB fill. The grid lines are drawn at low opacity so you can see the pixel boundaries without them overpowering the colors. The center square is highlighted with a white stroke so you always know which pixel you’re about to pick.

The canvas context is created with willReadFrequently: true, which tells the browser to optimize for repeated pixel reads rather than rendering. Small flag, big performance difference when you’re reading color data on every mouse move.

“Can I trust in you?” — the answer is in the architecture. Everything happens on a canvas in your browser. Your image is loaded as a local object URL, read pixel by pixel, and never sent anywhere. No server processes your photos, no analytics track what colors you pick, no data leaves your device. The trust isn’t asked for — it’s built in.

Baby, Show Me You’re a Keeper

“Baby, show me you’re a keeper.” The Weeknd wants proof. The dominant palette is this tool’s proof — it shows you the colors that define your image before you even ask.

The palette is extracted using a median cut algorithm, which is a classic color quantization technique. Here’s what happens: the tool samples pixels across the image, groups them into color buckets, finds which bucket has the widest range of color values, splits it at the median, and repeats until there are 8 buckets. Each bucket is averaged down to one representative color, and the results are sorted by perceived luminance — darkest to lightest.

The sampling is smart about performance. Instead of reading every pixel in a 4000x3000 image, it calculates a step size based on resolution and reads roughly 10,000 evenly distributed pixels. Transparent pixels are skipped entirely. The whole process takes about 100 milliseconds on a typical image, which is why the palette appears instantly when you upload.

The luminance sorting uses the standard perceptual formula — 0.299 times red, plus 0.587 times green, plus 0.114 times blue. It’s weighted because human eyes are more sensitive to green than red, and more sensitive to red than blue. The palette isn’t sorted by brightness in a mathematical sense — it’s sorted by how bright each color looks to you. That distinction matters when you’re designing with the palette, because the ordering matches your visual intuition.

“Show me you’re a keeper” — and the palette keeps. Every dominant color is clickable, every value is copyable, and every color tells you the same truth in three formats.

It’s Been Hard for Me to Keep Up

“It’s been hard for me to keep up, you’ve been tryna keep me in the dark, but baby girl, I see you.” That’s The Weeknd cutting through the obscurity, seeing what’s really there. The magnifier does the same thing — it cuts through the image at pixel resolution and shows you what’s actually present in every tiny square.

The pick history is designed with the same clarity. Your last 20 colors are saved as swatches, each one inspectable on hover with full HEX, RGB, and HSL values. If the same color is picked again, it doesn’t duplicate — it moves to the front. The history is a living record of every color you’ve found interesting, deduplicated and ordered by recency.

All of this runs in your browser. Your image, your colors, your picks, your palette — none of it is uploaded, tracked, or stored anywhere but your own device. The tool sees your image clearly, and nobody else sees it at all.

Go try it. Upload a photo, hover across it, watch the colors reveal themselves. Pick the ones that matter. Copy them. Use them.

“Come show me your true colors, paint me a picture with your true colors” — the picture was already painted. This tool just helps you see it.