A color workflow that starts with the actual pixels.
A palette can begin with a photograph, a product mockup, a screenshot, or one small detail you want to carry into another design. The color studio combines deliberate pixel selection with a quick overview of the dominant shades in an image. You can inspect a location through the magnification lens, pick an exact decoded pixel, and export a value in the notation your next tool expects. The source image stays local throughout the process.
How the precision loupe works
The image is decoded in a worker and transferred as a bitmap to the sampling canvas. The canvas retains the source pixel dimensions even when the image is displayed smaller on the page. Pointer positions are mapped back to that original grid before sampling. The lens displays a thirteen-pixel neighborhood at eight times its size with smoothing disabled, which makes the individual squares visible. Clicking or tapping selects the pixel under the pointer instead of averaging a broad region of the displayed thumbnail.
Keyboard navigation provides another way to make a deliberate choice. Focus the canvas, move one pixel at a time with the arrow keys, hold Shift to move ten pixels, and press Enter to keep the current shade. The readout includes the pixel coordinate and its alpha value. Fully transparent pixels can contain unhelpful color data, so pay attention to opacity when sampling near cutout edges. HEX, RGB, and HSL exports describe the color channels; they do not include that alpha value.
Choosing a notation for the next step
HEX represents the red, green, and blue channels as a compact hexadecimal string. RGB spells out the same three channels numerically, while HSL expresses a related color through hue, saturation, and lightness. These are different notations for the selected sRGB color, not different swatches. The Tailwind export wraps the HEX value in an arbitrary background-color utility so it can be used directly in a project that supports that syntax. Each export button copies its complete displayed value.
Where the browser supports a secure native EyeDropper, the screen-picking button opens the browser's own selection mode. That can sample a visible color outside the image canvas and may include the effects of display rendering. When the API is unavailable, the image loupe remains the primary local picker. Clipboard permissions can also vary. The CSS export text remains selectable, so you can copy it manually if your browser does not grant programmatic clipboard access.
From one pixel to a useful palette
Dominant palette generation samples a bounded thumbnail in a worker, groups similar color channels into quantized buckets, and ranks those groups by occurrence. Nearby candidates are merged to avoid presenting several nearly identical shades. The result contains up to eight representative colors, depending on the image. A single-color icon should not acquire eight invented colors just to fill a row. Pixels with low opacity are excluded so a transparent background does not dominate the palette.
Frequency is useful, but it is not the same as visual importance. A small accent can be central to a design and still occupy too few pixels to appear in the dominant list. Use the loupe to add those deliberate selections. Copy the palette as CSS custom properties or save it as a stylesheet, then give the variables names that match their roles in your own interface. Test text contrast separately; an attractive source palette does not automatically produce accessible combinations for buttons, labels, or body copy.
Three steps. A finished file.
Open an image locally
Choose a JPG, PNG, or WebP image. The worker decodes it and computes a bounded dominant palette.
Select a precise shade
Move the eight-times loupe over the image and click, or navigate the canvas by keyboard and press Enter.
Export the color or palette
Copy HEX, RGB, HSL, or a Tailwind utility. Copy the generated CSS variables or download the palette stylesheet.
A little clarity.
Why does the palette contain fewer than eight colors?
Similar shades are grouped, and mostly transparent pixels are excluded. Images with only a few distinct opaque colors naturally produce a shorter palette.
Does the screen picker work in every browser?
No. Native EyeDropper availability depends on browser support and a secure context. The Canvas loupe and keyboard sampling work without that API.
Will the value match every design application?
The value describes browser-decoded sRGB channels. Color profiles, HDR rendering, display calibration, and application color management can produce different appearances.
Related tools
Free online image compressor
Compress JPG, PNG, and WebP images online for free. Compare quality, set a target file size, and download batches. No uploads, sign-up, or added watermarks.
Free online image cropper
Crop, rotate, flip, and resize images online for free. Choose an aspect ratio or exact pixel dimensions and export JPG, PNG, or WebP without uploading files.
SVG optimizer
Optimize and minify SVG files online for free. Compare vector previews, preserve viewBox, and export smaller SVG or React components. No uploads required.
PDF splitter & merger
Split and merge PDF files online for free. Preview pages, reorder documents, extract selections, and rotate pages locally. No uploads, sign-up, or watermarks.