Trích Xuất Màu Chủ Đạo

Về Công Cụ Trích Xuất Màu Chủ Đạo

Trích Xuất Màu Chủ Đạo phân tích ảnh được tải lên và trả về các màu chiếm tỉ lệ lớn nhất dưới dạng một bảng màu gọn, sắp xếp theo diện tích mỗi màu chiếm. Thuật toán đầu tiên lấy mẫu ảnh ở độ phân giải thấp để xử lý nhanh ngay cả với ảnh nhiều megapixel, sau đó áp dụng lượng tử hóa median-cut lên các pixel đã lấy mẫu: đám mây màu được chia đệ quy theo trục có biến thiên lớn nhất, tạo ra các hộp màu chứa số pixel xấp xỉ bằng nhau và trung bình mỗi hộp trở thành một mục bảng màu. Mỗi màu kết quả đi kèm mã HEX, bộ ba RGB và phần trăm pixel được ánh xạ vào nó, giúp bạn thấy ngay màu nào thực sự chiếm ưu thế. Kết quả được xuất theo bốn định dạng thân thiện với lập trình viên: danh sách HEX và RGB theo dòng, biến CSS dán thẳng vào style và mảng JSON. Mọi thứ chạy cục bộ trong trình duyệt qua Canvas API, không ảnh nào được tải lên máy chủ.

"Màu chủ đạo" thực sự nghĩa là gì với một bức ảnh?

Màu chủ đạo là màu chiếm diện tích lớn nhất khi các sắc thái khác nhau được gộp lại. Ảnh bầu trời xanh không chỉ có một sắc xanh duy nhất, mà hàng trăm sắc xanh hơi khác nhau. Lượng tử hóa giải quyết bằng cách gộp các sắc thái gần nhau thành một màu đại diện, và nhóm có nhiều pixel nhất chính là màu chủ đạo. Điều này khác với màu trung bình (trung bình từng kênh trên toàn ảnh, thường ra màu xám-be tẻ nhạt) và khác với màu bão hòa nhất (đẹp để làm điểm nhấn nhưng hiếm khi đại diện tổng thể). Công cụ này đặt màu chủ đạo lên đầu danh sách và sắp xếp các màu còn lại theo tỉ lệ giảm dần.

Vì sao chọn median-cut thay vì k-means?

Median cut là thuật toán xác định, chạy một lượt, do Paul Heckbert giới thiệu năm 1982 để chuyển ảnh 24-bit sang 8-bit chỉ mục. Nó xây dựng bảng màu bằng cách chia đệ quy khối lập phương màu theo trục dài nhất tại trung vị, nên mỗi màu trong bảng có gần bằng nhau số pixel ủng hộ. K-means có thể cho bảng màu chính xác hơn chút với ảnh có phân bố lưỡng cực mạnh nhưng cần nhiều vòng lặp, hạt giống ngẫu nhiên và đôi khi mắc kẹt ở cực tiểu cục bộ. Median cut chạy gần như tuyến tính, cho kết quả tái lập với cùng đầu vào và trùng với thuật toán dùng trong mã hóa GIF của trình duyệt, nên màu được chọn vẫn ổn khi ảnh được lưu sang định dạng lượng tử hóa. Cho hầu hết nhu cầu trích xuất UI và theme, hai thuật toán nhìn không khác nhau.

Vì sao màu chủ đạo trông nhạt hơn so với hình ảnh tôi thấy?

Có hai hiệu ứng kết hợp. Một, median-cut trung bình các pixel trong mỗi hộp; nếu chiếc áo đỏ rực bị bao quanh bởi các sắc đỏ tối ở vùng bóng, trung bình hộp sẽ làm nhạt sắc đỏ. Hai, hệ thị giác con người dồn trọng số bất cân vào vùng bão hòa nhất, nên một logo đỏ tươi trên nền be có thể cảm giác như màu chính dù chiếm ít diện tích hơn. Để có bảng màu sống động hơn, giảm số màu yêu cầu (thuật toán sẽ dồn ngân sách vào vùng bão hòa nhất), bật Bỏ qua gần trắng (loại nền trắng phẳng làm trung bình bị nhạt), hoặc cắt ảnh tập trung vào chủ thể bão hòa. Để lấy màu thương hiệu, cắt ảnh quanh logo trước khi trích xuất là mẹo rất hiệu quả.

Làm sao dùng bảng màu trong CSS hay Tailwind?

Công cụ đã tạo sẵn khối biến CSS dạng `--color-1: #RRGGBB;`. Dán vào selector :root rồi dùng từng màu với `var(--color-1)`. Với Tailwind, sao chép danh sách HEX và dán vào tailwind.config.js trong theme.extend.colors với tên mô tả: `primary: '#1a73e8'`, `accent: '#fbbc04'`, v.v. JSON cũng được thiết kế để đưa thẳng vào script build: mỗi phần tử có hex, rgb và count nên bạn có thể sắp xếp và lọc theo lập trình. Nếu cần thang sáng-tối cân đối từ một trong các màu trích xuất, hãy chạy mã HEX đó qua công cụ Color Shades Generator của WuTools để tạo bảng kiểu Material 50-900.

Vì sao công cụ bỏ qua pixel có alpha dưới 128?

Pixel có alpha thấp gần như trong suốt và hầu như không đóng góp vào hình ảnh khi render trên nền bất kỳ. Nếu giữ lại, các vùng trong suốt lớn trong PNG (đặc biệt là logo và sticker) sẽ làm bẩn bảng màu bằng bóng ma của nền có sẵn khi alpha được tính. Ngưỡng 128 (nửa trong suốt trở lên đặc) là lựa chọn thận trọng: giữ lại biên anti-alias của các hình đặc (mang đúng màu chủ thể) và loại bỏ vầng sáng quá trong suốt. Nếu bạn cần lấy màu từ vùng đặc nhỏ trên nền trong suốt, thuật toán vẫn hoạt động tốt: chỉ cần có vài trăm pixel đặc.

Ảnh có được tải lên máy chủ không?

Không. Ảnh được đọc trực tiếp bằng FileReader, vẽ lên Canvas ngoài màn hình và phân tích hoàn toàn trong tab trình duyệt của bạn. Không có yêu cầu mạng nào chứa dữ liệu ảnh, bạn có thể kiểm chứng bằng tab Network trong DevTools. Vì vậy, công cụ an toàn cho thiết kế bảo mật, ảnh khách hàng, ảnh chụp UI chưa công bố và các ảnh nhạy cảm khác. Cũng có nghĩa là vẫn dùng được khi không có mạng sau khi trang đã được cache. Chỉ tài nguyên trang là đi qua mạng, ảnh của bạn thì không.