Bạn thấy một màu muốn dùng lại — trong một bức ảnh, một ảnh chụp màn hình của một trang bạn thích, một logo cũ mà file gốc đã mất từ lâu — và bạn cần mã hex thực, không phải một phỏng đoán. Ước lượng bằng mắt không bao giờ chuẩn; màn hình nói dối và "cái màu xanh đó" thực chất là sáu màu xanh hơi khác nhau. Rút bảng màu thẳng từ pixel cho bạn các mã bạn có thể dán vào CSS, một công cụ thiết kế, hay một tài liệu thương hiệu.
Đây là cách làm nó, và cách có một bảng màu thực sự dùng được thay vì một mớ pixel ngẫu nhiên.
"Trích xuất một bảng màu" thực sự làm gì
Công cụ quét ảnh và tìm các màu đại diện tốt nhất cho nó — các tông chủ đạo cộng các điểm nhấn đáng chú ý — rồi đưa bạn mỗi cái dưới dạng một mã hex bạn có thể sao chép. Thay vì một triệu màu pixel riêng lẻ, bạn có một bộ gọn gàng (chẳng hạn 5 hay 8) tóm tắt ảnh.
Điều này thực sự hữu ích cho vài công việc phổ biến:
- Khôi phục màu thương hiệu từ một logo hay tài sản cũ khi bạn không có thông số gốc.
- Dựng một bảng màu thiết kế từ một bức ảnh mà bạn muốn khớp tâm trạng — một phong cảnh, một ảnh sản phẩm, một tác phẩm nghệ thuật.
- Khớp một trang hay đồ họa hiện có mà bạn chỉ có một ảnh chụp màn hình.
- Chọn một nền hay điểm nhấn hài hòa với một ảnh bạn đang dùng.
Thả một ảnh vào và đọc các mã:
Dùng tùy chỉnh số lượng để có một bảng màu dùng được
Thiết lập quan trọng nhất là bạn rút bao nhiêu màu. Nó thay đổi câu trả lời hoàn toàn.
- Ít màu hơn (3–5) cho bạn bảng màu cốt lõi — nhúm tông định nghĩa ảnh. Đây là thứ bạn thường muốn cho thương hiệu hay một hệ thống thiết kế, nơi một bộ gọn là một ưu điểm, không phải một giới hạn.
- Nhiều màu hơn (8–12) bắt được các điểm nhấn tinh tế và gradient. Hữu ích khi một ảnh phong phú và đa dạng và bạn muốn cả các tông phụ, hoặc khi bạn đang nghiên cứu chính xác một bức ảnh được bố cục thế nào.
Nếu kết quả đầu tiên cảm thấy sai — một sắc thái chi phối, hoặc một điểm nhấn bạn muốn bị gộp mất — hãy điều chỉnh số lượng và đọc lại. Một bức ảnh 80% là bầu trời sẽ đưa bạn rất nhiều màu xanh ở số lượng thấp; đẩy số lượng lên để làm nổi các điểm màu nhỏ hơn.
Nhấn để sao chép — quy trình quan trọng
Đọc một mã hex và gõ nó ra là nơi lỗi len vào (#3A7BD5 so với #3A7BD6 và bạn đã tốn mười phút tự hỏi vì sao nó trông sai). Trong Công cụ Bảng màu, mỗi ô màu sao chép mã hex của nó khi nhấn, nên bạn đi thẳng từ ảnh tới clipboard tới bảng kiểu mà không đụng vào bàn phím.
Một luồng thực tế:
- Nạp ảnh.
- Đặt số lượng khớp với công việc — thấp cho một bảng màu thương hiệu, cao hơn để bắt điểm nhấn.
- Nhấn mỗi ô màu bạn muốn; dán nó vào nơi nó sẽ đến.
- Không đủ dải màu? Nhích số lượng và lấy các màu thêm.
Đọc kết quả bằng con mắt của nhà thiết kế
Vài điều đáng biết để bảng màu ra tốt:
- Màu chi phối không phải luôn là màu hữu ích. Một ảnh sản phẩm trên nền trắng sẽ báo rất nhiều trắng hay gần-trắng. Điều đó chính xác, nhưng màu bạn thực sự quan tâm là sản phẩm — đẩy số lượng lên cao để rút nó ra, hoặc cắt về chủ thể trước.
- Ảnh có nhiều màu hơn vẻ ngoài. Da, bóng, và phản chiếu thêm các tông bạn không nhận ra một cách có ý thức. Số lượng cao hơn hé lộ chúng; số lượng thấp hơn giấu chúng sau các giá trị trung bình.
- Hex có tính di động. Mọi mã bạn sao chép hoạt động trực tiếp trong CSS, Figma, Photoshop, Canva, hay một tài liệu thương hiệu. Không cần chuyển đổi.
Vì sao nó ở lại trong trình duyệt của bạn
Cả việc trích xuất chạy cục bộ — ảnh được đọc và phân tích trong trình duyệt của bạn bằng Canvas, và nó không bao giờ được tải lên máy chủ. Điều đó quan trọng khi "ảnh" là một mockup chưa ra mắt, một tài sản thương hiệu riêng của khách hàng, hay một ảnh chụp màn hình nội bộ mà bạn không nên đăng lên một công cụ web bất kỳ. Nó miễn phí, không cần đăng ký, và sau lần truy cập đầu tiên nó hoạt động offline.
Lấy các màu, nhấn để sao chép, dán chúng vào nơi chúng thuộc về.