Lấy bảng màu ảnh, tạo BlurHash và ThumbHash online

Lấy màu chủ đạo của ảnh PNG, JPEG, SVG kèm tỷ lệ, màu trung bình, màu chữ dễ đọc, và chuỗi BlurHash / ThumbHash làm ảnh giữ chỗ.

Công cụ miễn phí: 20 request mỗi phút.

Kết quả

Bấm “Chạy” để xem kết quả.

Tải ảnh lên (PNG, JPEG hoặc SVG, qua file multipart, body thô hoặc file_base64) hoặc đưa url. Ảnh được thu nhỏ còn 128 px, bỏ qua điểm ảnh trong suốt hơn một nửa, rồi gom màu bằng thuật toán median cut và tinh chỉnh vài vòng k-means. Kết quả có tối đa 16 màu (colors, mặc định 6) xếp theo tỷ lệ, mỗi màu có mã hex, RGB, HSL, tỷ lệ diện tích trong ảnh, độ tương phản WCAG với nền trắng và đen, và màu chữ dễ đọc nhất khi đặt lên màu đó; kèm màu trung bình, màu chủ đạo và is_dark (ảnh tối hay sáng).

Để làm ảnh giữ chỗ khi tải chậm (lazy-load), API tính thêm BlurHash (thư viện blurhash, MIT; 4×3 thành phần với ảnh ngang, 3×4 với ảnh dọc, hoặc đặt blurhash_x / blurhash_y 1–9) và ThumbHash (thư viện thumbhash, MIT; dạng base64), mỗi loại có sẵn một ảnh PNG rất nhỏ dạng data URI để gắn thẳng vào src hoặc nền CSS trong lúc chờ ảnh thật.

Ảnh tối đa 25 megapixel; không lưu lại dữ liệu.

Dùng trong code của bạn

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

Tài liệu API → Nhận API key miễn phí

Hỏi đáp

Nên dùng BlurHash hay ThumbHash?

Cả hai đều là chuỗi ngắn, giải mã bằng thư viện nhỏ phía client. ThumbHash giữ tỷ lệ khung hình, độ trong suốt và chi tiết hơn; BlurHash có nhiều thư viện hơn (iOS, Android, React Native).

Vì sao bảng màu thiếu màu của chi tiết nhỏ?

Màu được tính theo diện tích. Tăng colors để thấy vùng nhỏ; vùng rất nhỏ (dưới khoảng 1%) vẫn có thể bị gộp với màu bên cạnh.

Màu chữ được chọn thế nào?

Là đen hoặc trắng, chọn màu có tỷ lệ tương phản WCAG 2 cao hơn với màu nền đó; cả hai tỷ lệ đều được trả về.