Công cụ95

CHỈNH SỬA / HƯỚNG DẪN HÌNH ẢNH THỰC TẾ

Cách chọn màu hình ảnh và tạo bảng màu

Chuyển từ màu bạn nhận thấy sang các giá trị bạn có thể sử dụng.

Một bức ảnh có thể gợi ý một hướng màu hữu ích, nhưng bảng màu tự động chỉ là điểm khởi đầu. Image Color Picker kết hợp công cụ chọn điểm ảnh phóng đại, các mẫu màu có thể chỉnh sửa và xuất cho thiết kế hoặc mã. Hướng dẫn này sử dụng kết quả thực tế của việc trích xuất sáu màu từ mẫu thực vật.

Làm theo hướng dẫn
ĐẦU VÀO THỰC TẾ VÀ KẾT QUẢ ĐÃ TẢI XUỐNG
Trước Ảnh gốc của hoa tím và lá xanh trên nền màu đào ấm áp.

collage-botanical.jpg: 1200 x 900 px, 199,152 byte.

Sau Bảng màu sáu màu thực tế với các mẫu màu đào, nâu xám, ô liu và tím được dán nhãn trích xuất từ ảnh thực vật.

palette.png: 600 x 500 px, 9,163 byte.

Mẫu thực vật gốc và bảng màu PNG sáu màu thực tế. Các màu được nhóm từ một mẫu đã giảm; thẻ chứa các giá trị HEX được trích xuất, không phải ảnh đã tô màu lại.
Quảng cáo
VIDEO HƯỚNG DẪN NHANH How to pick an image color and export a palette Upload an image, inspect a pixel with the magnifier, add its color to the extracted palette, select Start and download a PNG palette. Thuyết minh tiếng Anh Xem video

How to pick an image color and export a palette

Quảng cáo

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.

01

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ỏ.

02

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
03

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.

04

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.

CHI TIẾT HỮU ÍCH

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.

ĐẾN LƯỢT BẠN

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ẻ.

Mở Công cụ chọn màu hình ảnh

Chi tiết hình ảnh

Ngôn ngữ38

English العربية Français Italiano Deutsch Español Português Nederlands Русский Türkçe 日本語 中文 हिन्दी Bahasa Indonesia Bahasa Melayu 한국어 Tiếng Việt ไทย Polski Svenska Українська Norsk বাংলা Ελληνικά فارسی اردو Čeština Dansk Magyar Română Suomi Български Filipino ქართული Slovenčina Azərbaycanca עברית Slovenščina

Chọn ngôn ngữ của bạn. Các video hướng dẫn hiện sử dụng lời dẫn bằng tiếng Anh.