Image Color Palette, BlurHash & ThumbHash Generator Online

Q: Why does the palette not show a small detail colour?

Colours are weighted by area. Ask for more `colors` to see small regions; very small areas (under ~1%) may still merge with their neighbours.

Get the dominant colours of a PNG, JPEG or SVG with their share, the average colour, readable text colours, and BlurHash / ThumbHash placeholders.

Result

Press “Run” to see the result.

Upload an image (PNG, JPEG or SVG, as multipart file, raw body or file_base64) or give a url. The image is reduced to a 128 px thumbnail, pixels that are more than half transparent are ignored, and the colours are grouped by median cut and refined with a few k-means rounds. You get up to 16 colours (colors, default 6) sorted by share, each with hex, RGB, HSL, the share of the image, the WCAG contrast ratio against white and black and the text colour that reads best on it; plus the average colour, the dominant colour and is_dark.

For lazy-loading placeholders the API also computes a BlurHash (blurhash, MIT; 4×3 components for landscape and 3×4 for portrait images, or blurhash_x / blurhash_y 1–9) and a ThumbHash (thumbhash, MIT; base64), each with a tiny PNG data URI you can put straight into src or a CSS background while the real image loads.

Images up to 25 megapixels; nothing is stored.

Use this in your code

curl -X POST "https://apibox.io.vn/v1/image-palette?colors=5" \
  -H "Authorization: Bearer YOUR_API_KEY" \
  -F "file=@./my-file"

const form = new FormData();
form.append('file', fileInput.files[0]);

const res = await fetch('https://apibox.io.vn/v1/image-palette?colors=5', {
  method: 'POST',
  headers: { Authorization: 'Bearer YOUR_API_KEY' },
  body: form,
});
console.log(await res.json());

import requests

res = requests.post(
    "https://apibox.io.vn/v1/image-palette?colors=5",
    headers={"Authorization": "Bearer YOUR_API_KEY"},
    files={"file": open("my-file", "rb")},
    timeout=30,
)
print(res.json())

<?php
$ch = curl_init('https://apibox.io.vn/v1/image-palette?colors=5');
curl_setopt_array($ch, [
    CURLOPT_RETURNTRANSFER => true,
    CURLOPT_CUSTOMREQUEST => 'POST',
    CURLOPT_HTTPHEADER => ['Authorization: Bearer YOUR_API_KEY'],
    CURLOPT_POSTFIELDS => ['file' => new CURLFile('my-file')],
]);
$response = curl_exec($ch);
print_r(json_decode($response, true));

API documentation → Get a free API key

FAQ

BlurHash or ThumbHash?

Both are tiny strings decoded by small client libraries. ThumbHash keeps the aspect ratio and transparency and has more detail; BlurHash has wider library support (iOS, Android, React Native).

Why does the palette not show a small detail colour?

Colours are weighted by area. Ask for more colors to see small regions; very small areas (under ~1%) may still merge with their neighbours.

How is the text colour chosen?

It is black or white, whichever has the higher WCAG 2 contrast ratio with that colour; both ratios are returned.