Vì sao chúng tôi thêm tính năng trích xuất bảng màu tự động vào công cụ chọn màu

Công cụ chọn màu của chúng tôi luôn cho phép bạn tải ảnh lên và bấm vào bất kỳ điểm ảnh nào để lấy giá trị chính xác HEX, RGB và HSL. Điều đó trả lời câu hỏi “điểm cụ thể này là màu gì?” — hữu ích, nhưng không phải câu hỏi mà hầu hết mọi người thực sự muốn hỏi khi tải một bức ảnh lên. Thường thì họ muốn biết “bảng màu tổng thể của bức ảnh này là gì?” — lấy bảng màu thương hiệu từ một logo, hoặc khớp không khí của một ảnh tham khảo cho bảng màu của một trang web.

Lấy mẫu một điểm ảnh không thể trả lời điều đó. Vì vậy chúng tôi đã thêm tính năng trích xuất bảng màu: tải ảnh lên, và công cụ giờ đây tự động rút ra tám màu chủ đạo nhất và hiển thị chúng dưới dạng các ô màu có thể bấm được.

Cách hoạt động

Không có mô hình AI nào tham gia và không có gì được tải lên bất cứ đâu — đây là một thuật toán đếm tần suất đơn giản chạy trong vài mili giây:

Ảnh được giảm mẫu xuống canvas 80×80. Không cần độ phân giải đầy đủ cho thống kê màu sắc, và việc giảm mẫu giữ cho mọi thứ diễn ra tức thì ngay cả với ảnh lớn.
Mỗi điểm ảnh được phân vào các nhóm dựa trên phiên bản làm thô của màu sắc — 5 bit cao nhất của mỗi kênh RGB, để các điểm ảnh gần như giống hệt nhau về mặt thị giác rơi vào cùng một nhóm thay vì mỗi cái được đếm là một màu riêng.
Các nhóm được sắp xếp theo số điểm ảnh rơi vào đó, và tám nhóm lớn nhất trở thành bảng màu, mỗi nhóm hiển thị dưới dạng màu trung bình của mọi thứ trong nhóm đó.

Chỉ vậy thôi. Không có học máy, không có dịch vụ bên ngoài — chỉ là giảm mẫu và đếm, đó là lý do tại sao nó diễn ra tức thì và không bao giờ rời khỏi trình duyệt của bạn.

Bấm vào một ô màu, lấy mã màu

Mỗi ô màu trong bảng màu đều có thể bấm được: bấm vào một ô và nó trở thành màu đang hoạt động của công cụ, với HEX, RGB và HSL được điền tự động và mã hex được sao chép vào clipboard ngay trong cùng một cú bấm. Cũng có nút “sao chép tất cả” nếu bạn muốn toàn bộ bảng màu dưới dạng danh sách phân cách bằng dấu phẩy, hữu ích để dán trực tiếp vào một công cụ thiết kế hoặc khối custom properties CSS.

Thử ngay

Tải lên bất kỳ ảnh nào — ảnh chụp màn hình, logo, ảnh chụp — trên trang công cụ chọn màu và bảng màu sẽ tự động xuất hiện bên dưới.