Lấy bảng màu từ bất kỳ ảnh nào, kèm công cụ kiểm tra độ tương phản

Cách chọn màu sắc

Công cụ sẽ tạo một bản sao nhỏ của ảnh, tối đa 160 pixel ở cạnh dài nhất, rồi đếm từng pixel không trong suốt. Sau đó nó nhóm các pixel giống nhau bằng phân cụm k-means và báo cáo màu trung bình của mỗi nhóm, nhóm lớn nhất trước. Phần trăm trên mỗi ô màu là tỷ lệ phần ảnh mà nhóm đó chiếm.

Điểm bắt đầu được cố định chứ không ngẫu nhiên: nó khởi đầu với màu phổ biến nhất, rồi liên tục thêm màu xa nhất so với các màu đã có. Nhờ vậy cùng một ảnh luôn cho ra cùng một bảng màu, và một điểm nhấn nhỏ rực rỡ, như logo đỏ trên hộp trắng, sẽ có ô màu riêng thay vì bị hòa lẫn vào nền.

Hãy yêu cầu 5 đến 8 màu. Một ảnh sản phẩm trên nền trơn thường chỉ cần 5 hoặc 6. Một ảnh phong cách sống nhiều chi tiết sẽ đọc tốt hơn ở mức 8. Nếu ảnh có ít màu rõ rệt hơn số bạn yêu cầu, công cụ sẽ cho biết và hiển thị những màu tìm được.

Đọc ma trận tương phản

Mỗi màu được ghép với mọi màu khác, cộng thêm trắng và đen thuần, và mỗi ô hiển thị tỷ lệ tương phản cho chữ màu ở hàng trên nền màu ở cột. Tỷ lệ này tuân theo định nghĩa của WCAG: (L1 + 0.05) / (L2 + 0.05), trong đó L1 và L2 là độ sáng tương đối của màu sáng hơn và màu tối hơn. Nó chạy từ 1:1 (cùng một màu hai lần) đến 21:1 (đen trên trắng).

Các nhãn là những ngưỡng WCAG đặt ra:

• AA: ít nhất 4.5:1 cho chữ thường và 3:1 cho chữ lớn (Tiêu chí thành công 1.4.3).
• AAA: ít nhất 7:1 cho chữ thường và 4.5:1 cho chữ lớn (Tiêu chí thành công 1.4.6).
• Chữ lớn nghĩa là ít nhất 18 point, hoặc 14 point in đậm (định nghĩa chữ cỡ lớn của WCAG).

Một ô được đánh dấu AA large thì ổn cho tiêu đề lớn nhưng quá mờ cho chú thích. Giải thích về 1.4.3 của W3C cũng nói tỷ lệ không nên làm tròn, nên 4.499:1 không đạt 4.5:1. Công cụ xét con số chính xác và hiển thị nó cắt tới hai chữ số thập phân, không bao giờ làm tròn lên.

Một ví dụ cụ thể

Giả sử ảnh cho bạn màu xanh hải quân #1a3c6e và màu kem #fdf6e3. Độ sáng tương đối của màu xanh hải quân tính ra khoảng 0.046 và của màu kem khoảng 0.923. Tỷ lệ là (0.923 + 0.05) / (0.046 + 0.05), tức khoảng 10.1:1 với những con số làm tròn đó và 10.16:1 với con số chính xác. Mức này đạt AAA cho mọi loại chữ, nên chữ xanh hải quân trên thẻ kết thúc màu kem là an toàn ở mọi cỡ. Đặt một màu cam trung tính như #e07a2e trên cùng màu kem thì tỷ lệ tụt xuống 2.78:1, không đạt ngay cả với chữ lớn. Hãy để dành màu cam cho nút bấm có chữ đen (6.99:1, đạt AA nhưng vừa thiếu một chút so với AAA), hoặc cho một hình khối không có chữ.

Sử dụng bản xuất

Bản xuất CSS là một khối :root gồm các thuộc tính tùy chỉnh, --color-1 cho màu chiếm nhiều ảnh nhất và cứ thế giảm dần. JSON có mã hex, RGB, HSL của từng màu cùng tỷ lệ phần ảnh nó chiếm, dễ dán vào tệp design token hoặc đưa cho một script. Hãy đổi tên các biến khi bạn đã biết màu nào là nền, màu nào là chữ và màu nào là điểm nhấn.

Công cụ này không làm gì

Nó không biết màu nào thuộc thương hiệu của bạn. Ảnh sản phẩm của bạn trên bàn gỗ sẽ bao gồm cả chiếc bàn. Hãy cắt lấy phần sản phẩm hoặc bao bì trước nếu bạn chỉ muốn màu của chúng. Nó cũng không thể cho bạn biết màu in chính xác: các con số là pixel trong tệp, sau khi qua máy ảnh và mọi chỉnh sửa, nên hãy đối chiếu với cẩm nang thương hiệu trước khi công bố. Và nó chỉ xét tương phản của chữ. WCAG có các quy tắc riêng cho biểu tượng và thành phần giao diện, mà ma trận này không chấm điểm.

Nếu bạn không muốn làm việc này bằng tay

Hermoso là marketing tự lái: nó nghiên cứu những quảng cáo đang hiệu quả trong thị trường của bạn, tạo quảng cáo ảnh và video đúng thương hiệu, lên lịch bài đăng và chạy chiến dịch trả phí trên chính tài khoản quảng cáo của bạn. Khi bạn thêm thương hiệu từ website của mình, nó học sản phẩm, logo và bảng màu của bạn, và bạn có thể đặt màu chú thích và thẻ kết thúc bằng mã hex. Nó hoạt động trong ứng dụng web, hoặc trong Claude, ChatGPT và Cursor thông qua máy chủ MCP của nó.

Công cụ miễn phí: Hướng dẫn kích thước mạng xã hội · Trình tạo lưới Instagram · Trình tạo Open Graph

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

Làm sao để lấy bảng màu từ một bức ảnh?

Thả ảnh vào công cụ và chọn số màu bạn muốn, từ 5 đến 8. Nó gom các pixel tương tự và hiển thị màu trung bình của mỗi nhóm dưới dạng HEX, RGB và HSL, nhóm lớn nhất trước, mỗi màu kèm nút sao chép.

Tôi cần tỷ lệ tương phản bao nhiêu cho văn bản?

WCAG 2.2 mức AA yêu cầu ít nhất 4.5:1 cho văn bản thường và 3:1 cho văn bản lớn. Mức AAA yêu cầu 7:1 và 4.5:1. Văn bản lớn là từ cỡ 18 point, hoặc 14 point in đậm.

4.49:1 có đủ gần để đạt AA không?

Không. W3C nói tỷ lệ tính được không nên làm tròn khi so với ngưỡng, nên 4.499:1 không đạt 4.5:1. Công cụ này đánh giá theo con số chính xác.

Vì sao mỗi lần tôi đều nhận được bảng màu giống nhau?

Việc phân cụm bắt đầu từ một điểm cố định, là màu phổ biến nhất, rồi thêm màu xa nhất so với những màu đã chọn. Không có điểm khởi đầu ngẫu nhiên, nên một ảnh luôn cho một kết quả.

Ảnh của tôi có được tải lên không?

Không. Nó được đọc bằng trình đọc tệp của chính trình duyệt bạn và được đếm trong một canvas trên thiết bị của bạn. Không có gì được gửi đi đâu hay lưu lại.