Image Color Palette

No limits on the file

There is no file size limit, and the slider for the number of colors recalculates the palette on the spot, with no wait for a server response. You can paste a screenshot straight from the clipboard without saving it to a file.

Colors are measured the way the eye sees them

The usual way to build a palette is to average colors by their red, green, and blue values. The trouble is that distance between RGB numbers does not match how different colors look to a person: in the green part of the scale the eye picks up a difference where the numbers are nearly equal, while in dark blue it misses one even when the numbers diverge. That is why on a sunset photo such services return five shades of grayish brown.

We convert the pixels into OKLab space, where ordinary geometry matches perception, and group them there. Shades the eye cannot tell apart merge into one, and instead of six nearly identical swatches you get six genuinely different colors.

Every palette color exists in the image

The center of a group is an average value, and that exact color may not appear in the frame at all. We take instead the real pixel nearest to the center. The difference shows when you later use the palette to style a site: an averaged shade can fall outside the screen gamut and shift to a neighboring color on conversion.

Each color's share of the frame

Next to each color sits its share, and above the list runs a bar where each segment's width equals that share. Without it you cannot tell which color dominates the image: a bright spot covering a quarter of a percent draws more attention than a background filling half the frame.

Text legibility is visible right away

Most people take a palette to color a site, and the first question is whether text reads on that background. For every color we calculate its contrast against black and white and show which one to pick and with what margin. The thresholds come from WCAG 2.1: 4.5:1 for normal text, 3:1 for large text, 7:1 for the AAA level.

A single point, not just a palette

Clicking the image picks the color from that exact pixel and adds it as a separate list item. This is how you grab a logo shade or a specific detail that missed the main palette because its area was too small.

Take it into your code

The finished palette exports as a set of CSS variables, SCSS lines, a JSON object with shares and contrast, or a plain list of HEX values. A separate button saves the palette as an image, handy to attach to a mockup or send in a chat. To break down a single color, the nearby HTML color codes tool converts between HEX, RGB, and HSL and checks the contrast of a pair.