Creating a Color Palette from an Image(amandahinton.com)
amandahinton.com
Creating a Color Palette from an Image
https://amandahinton.com/blog/creating-a-color-palette-from-an-image
19 comments
This might be the best color palette generator I’ve ever seen. I used to work in Operating Systems, and trying to get a good color palette from a photo is HARD. A lot of very smart very well paid people have dedicated years of their life to this type of thing. Really fantastic work.
If the author of the blog post ever comes across this thread/ comment, bravo and I hope you feel pride in your work and I’d go so far to say discovery.
If the author of the blog post ever comes across this thread/ comment, bravo and I hope you feel pride in your work and I’d go so far to say discovery.
Can you talk a bit more on what makes this hard from your experience/pov, asking as someone who doesn't have much experience with this type of work
Agreed - I remember implementing colour quantisation in MATLAB at university and it seemed simple enough, though we only used it for some simple cases (to learn the theory more than anything). Looking at some of the example images there it looks like it's easy to hit edge cases.
Can you show the link to it? I just don't see it.
I agree with the kudos, but back when I was an interesting person and in early 2000s I stumbled on this same/similar approach of using K-means clusters with LAB color space for a painting algorithm I was using in my masters project. RGB was not effective.
Related from same author: Generating a color spectrum for an image
https://news.ycombinator.com/item?id=47783062
This is quite amazing. The quality of the created palettes is surprisingly good.
For the fourth iteration (guarding against phantom blue from shadow pixels), I wonder if it may help to also take into account how close the pixels in each cluster actually cluster together in the actual photo. (None of the heuristics used here seem to be interested in the position of the pixels at all, only in their values - as-is, it seems one could sort the photo's pixels before running the program and get the same result.) Actual objects usually form connected areas, whereas at least in the fruit image, the phantom shadows are spread across the entire photo in largely disconnected chunks.
For the fourth iteration (guarding against phantom blue from shadow pixels), I wonder if it may help to also take into account how close the pixels in each cluster actually cluster together in the actual photo. (None of the heuristics used here seem to be interested in the position of the pixels at all, only in their values - as-is, it seems one could sort the photo's pixels before running the program and get the same result.) Actual objects usually form connected areas, whereas at least in the fruit image, the phantom shadows are spread across the entire photo in largely disconnected chunks.
I've been working on an adjacent problem (extracting website branding data from a URL) for the past year, and previously had to rely on procedural techniques such as these -- props to the author!
However, models are now getting to the point where we are starting to learn the bitter lesson[0] even with stuff like color-palette generation. Nano Banana 2 [gemini-3.1-flash-image-preview] especially is adept at performing arbitrary operations on images. Before then, you would have to use a model such as Gemini Flash to perform segmentation[1] and then post-analyze those segments.
Here's a prompt I used with Nano Banana 2 in AI Studio
> Derive a coherent, designer's color palette from this image alone.
> Provide 5 distinct HEX color codes as your response.
[Attachment == the picture of the car, first in the author's article] [Settings: Output .. images & text; Thinking level .. minimal]
Response:
> I have extracted five distinct hex color codes directly from the key elements in this image, representing the colorful facade and the vintage car:
> #FF96C5 (The main pink wall)
> #38C6F1 (The light blue car)
> #AEF6A5 (The green wall)
> #E51988 (The dark pink trim and railing)
> #5F432B (The dark wood of the door and windows)
And they all pretty-much check out. Not hyper-accurate, but really not far off anymore. I didn't even have to try!
[0] - https://en.wikipedia.org/wiki/Bitter_lesson [1] - https://ai.google.dev/gemini-api/docs/image-understanding#se...
However, models are now getting to the point where we are starting to learn the bitter lesson[0] even with stuff like color-palette generation. Nano Banana 2 [gemini-3.1-flash-image-preview] especially is adept at performing arbitrary operations on images. Before then, you would have to use a model such as Gemini Flash to perform segmentation[1] and then post-analyze those segments.
Here's a prompt I used with Nano Banana 2 in AI Studio
> Derive a coherent, designer's color palette from this image alone.
> Provide 5 distinct HEX color codes as your response.
[Attachment == the picture of the car, first in the author's article] [Settings: Output .. images & text; Thinking level .. minimal]
Response:
> I have extracted five distinct hex color codes directly from the key elements in this image, representing the colorful facade and the vintage car:
> #FF96C5 (The main pink wall)
> #38C6F1 (The light blue car)
> #AEF6A5 (The green wall)
> #E51988 (The dark pink trim and railing)
> #5F432B (The dark wood of the door and windows)
And they all pretty-much check out. Not hyper-accurate, but really not far off anymore. I didn't even have to try!
[0] - https://en.wikipedia.org/wiki/Bitter_lesson [1] - https://ai.google.dev/gemini-api/docs/image-understanding#se...
Very cool. Looks very nice. I have a small utility that I made for myself and just added your algo to it: https://github.com/wkoszek/imgstat -- palette looks much better to what I had before.
Cool, I wonder how different the results would have been for us had we used your tool: https://foundinglean.substack.com/p/how-we-got-consistent-he...
We just threw Cursor/Claude at the images and it dug out the colours we wanted.
We just threw Cursor/Claude at the images and it dug out the colours we wanted.
This is cool, I’m going to try write my own implementation to follow along as a learning exercise
Is there an example tool in the blogpost? Seems like would make sense
edit: Did vibecode one https://simon-frey.com/amandacolor
edit: Did vibecode one https://simon-frey.com/amandacolor
Was there a link to the code or app or something in there that I missed?
Did not fine one as well. Did vibecode an tiny single html page based tool: https://simon-frey.com/amandacolor
Interesting design choices.
Have you ever tried allrgb.com? The idea is to use every 24-bit RGB triplet once and only once. Many people naturally choose 4096x4096 as the final image size.
Have you ever tried allrgb.com? The idea is to use every 24-bit RGB triplet once and only once. Many people naturally choose 4096x4096 as the final image size.
https://okpalette.color.pizza
https://meodai.github.io/RYBitten
https://rybitten.space