Trình trích xuất bảng màu

Tải lên một hình ảnh để trích xuất các màu chủ đạo. Nhận mã HEX cho mỗi ô màu, sao chép chỉ với một cú nhấp. Mọi thứ chạy trong trình duyệt.

Cách Trình trích xuất bảng màu hoạt động

Công cụ trích xuất bảng màu phân tích ảnh của bạn và xác định các màu chiếm ưu thế về mặt thị giác nhất bằng thuật toán phân cụm k-means chạy trên dữ liệu pixel trong Canvas. Kết quả là tập hợp các ô màu với giá trị HEX mà bạn có thể sao chép riêng lẻ. Không byte ảnh nào rời khỏi trình duyệt của bạn; việc lấy mẫu pixel chạy cục bộ trong Web Worker để luồng chính vẫn phản hồi.

Quá trình trích xuất nhóm hàng trăm nghìn màu pixel riêng lẻ thành số lượng nhỏ hơn các cụm đại diện. Số màu đầu ra có thể cấu hình để bạn có thể trích xuất bảng màu gọn 5 màu hoặc bộ rộng hơn 12 màu. Điều này hữu ích để nhanh chóng lấy màu thương hiệu từ logo, xác định tông màu chiếm ưu thế của ảnh cho bảng mood board, hoặc kiểm tra những màu xuất hiện trong ảnh do người dùng tải lên.

Tác giả: Bastien Sulyan

Cách sử dụng Trình trích xuất bảng màu, từng bước

Kéo thả ảnh vào khu vực tải lên hoặc nhấp để duyệt file.
Đặt số màu bạn muốn trích xuất (thường từ 5 đến 12).
Nhấp Trích xuất. Phân cụm pixel chạy cục bộ trong Web Worker.
Xem các ô màu kết quả và giá trị HEX của chúng.
Nhấp bất kỳ ô màu nào để sao chép mã HEX vào clipboard.

Trường hợp sử dụng thường gặp

Một nhà thiết kế trích xuất bảng màu chiếm ưu thế từ ảnh thương hiệu để đảm bảo tài liệu tiếp thị mới phù hợp với câu chuyện màu sắc hiện có.
Lập trình viên xác định màu chính trong avatar do người dùng tải lên để tạo màu nhấn UI phù hợp một cách động.
Nghệ sĩ xây dựng bảng mood board tham chiếu bằng cách trích xuất bảng màu từ nhiều ảnh tham chiếu và so sánh các mã HEX đã trích xuất.
Blogger lấy năm tông màu chiếm ưu thế từ ảnh header để chọn màu văn bản và nút bổ sung cho bố cục bài viết.

Câu hỏi thường gặp

Thuật toán trích xuất màu hoạt động như thế nào?

Công cụ đọc tất cả giá trị pixel từ ảnh qua Canvas.getImageData(), giảm mẫu để tăng tốc, rồi chạy phân cụm k-means. Mỗi centroid cụm trở thành một trong các màu đầu ra. K-means nhóm các pixel theo độ gần màu sắc để các tông màu thị giác chiếm ưu thế xuất hiện dưới dạng màu centroid.

Việc trích xuất màu có yêu cầu tải ảnh lên không?

Không. Việc lấy mẫu pixel diễn ra trong Web Worker trong trình duyệt của bạn. Ảnh được đọc từ ổ đĩa cục bộ của bạn, vẽ lên OffscreenCanvas, và mảng pixel được xử lý trong bộ nhớ. Dữ liệu không rời thiết bị của bạn.

Tại sao các màu đã trích xuất trông hơi khác so với những gì tôi thấy trong ảnh?

Các centroid k-means biểu diễn giá trị trung bình toán học của một cụm màu pixel. Màu rất phổ biến nhưng hơi biến đổi (bầu trời xanh với biến đổi gradient nhỏ) sẽ tạo ra centroid là màu trung bình thay vì bất kỳ giá trị pixel chính xác nào bạn có thể chỉ ra. Kết quả là giá trị trung bình đại diện, không phải mẫu của một pixel cụ thể.

Tôi có thể trích xuất bảng màu từ ảnh có độ trong suốt không?

Các pixel hoàn toàn trong suốt (alpha = 0) bị loại khỏi quá trình phân cụm để tránh vùng trong suốt làm lệch màu đã trích xuất về phía đen hoặc trắng tùy thuộc vào màu nền Canvas. Các pixel bán trong suốt được đưa vào mẫu với trọng số theo giá trị alpha của chúng.

Mã màu ở định dạng nào?

Công cụ xuất mã HEX (như #3A7BD5). Nếu bạn cần RGB, HSL hoặc các định dạng khác, sao chép giá trị HEX vào công cụ Color Converter, chấp nhận HEX và chuyển đổi sang tất cả các mô hình màu phổ biến.

Công cụ liên quan

Giữ mọi thứ cục bộ, khám phá các công cụ bổ trợ.

Tất cả công cụ ảnh