Trích xuất bảng màu ví dụ trước, sau đó sử dụng việc chọn chính xác và chỉnh sửa thủ công để quyết định màu nào thuộc về dự án của riêng bạn. Mở Công cụ chọn màu hình ảnh.
Tải lên và trích xuất bảng màu khởi đầu
Mở Image Color Picker và tải lên một hình ảnh được hỗ trợ, hoặc thử mẫu. Việc trích xuất tự động sẽ tải nguồn lên máy chủ. Mẫu trong hướng dẫn này là collage-botanical.jpg, một bức ảnh 1200 x 900 về hoa, lá và nền màu đào.
Để Colors to extract ở mức 6 và chọn Dominant cho ví dụ. Dominant ưu tiên các màu chính của hình ảnh, trong khi Vibrant làm cho các điểm nhấn đầy màu sắc có ảnh hưởng hơn. Một yêu cầu có thể sử dụng từ 3 đến 12 màu; một hình ảnh có ít nhóm màu rõ rệt hơn có thể trả về ít màu hơn.
Kết quả Dominant thực tế chứa #E3B49F, #A5927F, #F3C2AC, #FBCEBA, #746E4F, #C297CA. Nhóm lớn nhất là #E3B49F chiếm khoảng 28.88% số điểm ảnh hiển thị được lấy mẫu. Việc trích xuất đã sử dụng mẫu 512 x 384; các tỷ lệ phần trăm đó không phải là thống kê chính xác của hình ảnh có độ phân giải đầy đủ.
Một màu bảng màu có thể là trung bình của các màu lân cận. Chọn một điểm ảnh cụ thể khi bạn cần giá trị của một chi tiết nhỏ.
Chọn và tinh chỉnh từng màu riêng lẻ
Nhấp hoặc chạm vào hình ảnh để kiểm tra điểm ảnh bằng kính lúp. Tập trung vào hình ảnh và sử dụng các phím mũi tên để di chuyển một điểm ảnh, Shift cộng với mũi tên để di chuyển mười điểm, sau đó nhấn Enter để chọn. Sao chép HEX, RGB hoặc HSL bằng nút sao chép riêng của nó, hoặc sử dụng Add to palette.
Chọn một mẫu màu để thay đổi giá trị HEX hoặc màu sắc của nó, di chuyển sang trái hoặc phải, hoặc xóa nó. Thêm màu tùy chỉnh chấp nhận giá trị HEX mà bạn chọn. Khóa màu giúp bảo toàn mẫu màu đã chọn khi Làm mới bảng màu hoặc cài đặt trích xuất thay đổi tạo ra bảng màu bắt đầu khác.
Lấy mẫu & độ trong suốt cung cấp Màu nguồn và Tổng hợp trên nền. Màu nguồn bao gồm độ mờ trong các mã được sao chép khi liên quan; Tổng hợp hiển thị pixel được hòa trộn trên nền Mẫu đã chọn. Bản thân các mẫu bảng màu là các giá trị RGB không trong suốt. Các màu đã chỉnh sửa và chọn không có tỷ lệ phần trăm nguồn ước tính.
Hình ảnh có thể giải mã bằng trình duyệt sử dụng các mẫu sRGB của trình duyệt. Nếu bản xem trước chuẩn hóa được sử dụng, bộ chọn sẽ dán nhãn rõ ràng các màu và tọa độ của nó là xấp xỉ.
Ví dụ trong hướng dẫn này
Màu cần trích xuất: 6; Chiếm ưu thế; không thay đổi thủ công hoặc khóa; Lưu dưới dạng: PNG. Trích xuất tự động đã lấy mẫu 512 x 384 pixel.
- Hình ảnh nguồn
- 1200 x 900 px
- Màu đã trích xuất
- 6 màu không trong suốt
- Thẻ bảng màu
- 600 x 500 px
- Đã tải xuống PNG
- 9,163 byte
Kiểm tra cặp văn bản và nền
Mở Kiểm tra độ tương phản màu. Đặt Văn bản và Nền bằng các điều khiển màu, nhập mã HEX, hoặc sử dụng màu đã chọn cho một trong hai bên. Mẫu văn bản trực tiếp cho phép bạn so sánh cặp màu, và tỷ lệ đi kèm với các kết quả AA thường, AAA thường, AA lớn và AAA lớn riêng biệt.
Chọn một cặp màu cho mục đích dự định thay vì giả định rằng mọi màu được trích xuất đều có thể được sử dụng làm văn bản. Màu đào nhạt và màu tím nhạt có thể hoạt động cùng nhau trong một bức ảnh nhưng lại tạo ra sự kết hợp văn bản và nền kém.
Điều khiển này chỉ kiểm tra cặp màu đó về độ tương phản văn bản. Đây không phải là một cuộc kiểm tra khả năng truy cập hoàn chỉnh và không quyết định liệu kiểu chữ, tương tác bàn phím hoặc phần còn lại của thiết kế có thể sử dụng được hay không.
Tỷ lệ tương phản đạt chuẩn là một kiểm tra hữu ích, không phải là sự đảm bảo rằng toàn bộ trang web có thể truy cập được.
Sao chép giá trị hoặc xuất bảng màu
Để bàn giao nhanh, hãy sao chép một mã riêng lẻ hoặc sử dụng Sao chép bảng màu HEX màu. Đối với tệp, chọn Lưu dưới dạng và chọn Bắt đầu. PNG tạo ra một hình ảnh bảng màu có nhãn; SVG giữ các mẫu và nhãn dưới dạng nội dung vector; CSS cung cấp các biến màu được đánh số; JSON chứa các giá trị HEX, RGB và HSL.
Ví dụ sáu màu chưa chỉnh sửa xuất palette.png ở kích thước 600 x 500 pixel và 9,163 byte. Thứ tự mẫu của nó khớp với bảng màu. Bảng màu cuối cùng của bạn có thể chứa từ 1 đến 12 màu sau khi chỉnh sửa, ngay cả khi số lượng bắt đầu tự động khác nhau.
Tải xuống trước khi rời đi hoặc làm mới. Bản xuất cuối cùng tải lên nguồn và các màu đã chọn để xử lý trên máy chủ. Nó tạo ra một tệp bảng màu mới và không tô màu lại hoặc thay thế ảnh gốc.
PNG và SVG là các tham chiếu trực quan thuận tiện. CSS và JSON hữu ích khi bước tiếp theo cần các giá trị màu có thể tái sử dụng.
Câu hỏi thường gặp
Công cụ chọn màu có trả về cùng các màu như trích xuất tự động không?
Không nhất thiết. Một giá trị được chọn mô tả một nguồn hoặc pixel xem trước cụ thể. Trích xuất tự động nhóm các pixel được lấy mẫu và có thể trả về các màu trung bình.
Các pixel trong suốt có được tính không?
Các pixel hoàn toàn trong suốt bị loại trừ khỏi quá trình trích xuất. Các pixel bán trong suốt có trọng số giảm. Lấy mẫu nguồn có thể hiển thị độ mờ, nhưng các mẫu bảng màu được xuất là không trong suốt.
Điều gì xảy ra với các màu đã khóa khi tôi làm mới?
Các màu đã khóa vẫn nằm trong bảng màu trong khi các màu trích xuất mới lấp đầy các vị trí khác. Một màu được giữ lại hoặc chỉnh sửa không được gán tỷ lệ phần trăm hình ảnh giả định.
Tôi có thể sử dụng cái này cho một màu thương hiệu chính xác không?
Nhập trực tiếp giá trị HEX đã biết hoặc chọn một pixel nguồn phù hợp. Ánh sáng ảnh, nén, quản lý màu và bản xem trước chuẩn hóa có thể thay đổi các giá trị được lấy mẫu, vì vậy bảng màu ảnh tự động không phải là bằng chứng về thông số kỹ thuật thương hiệu gốc.
Xây dựng một bảng màu bạn có thể mang theo vào thiết kế tiếp theo của mình
Thử một mẫu hoặc sử dụng tệp của riêng bạn, và xem lại kết quả trước khi chia sẻ.