Cách Dùng Công cụ Chọn Màu để Tìm Màu từ Bất kỳ Pixel nào
Trả lời nhanh
Để chọn màu: mở Color Picker, tải lên hình ảnh (hoặc dùng screen eyedropper), nhấp vào pixel muốn màu và giá trị HEX, RGB và HSL xuất hiện. Tất cả xử lý xảy ra cục bộ.
Giới thiệu
Color picker (còn gọi eyedropper) cho phép tìm màu chính xác của pixel. Điều này thiết yếu để match màu thương hiệu, sample màu từ hình ảnh hoặc xây palette từ photo. Color picker trên trình duyệt có thể đọc màu từ hình tải lên qua Canvas API, và EyeDropper API có thể chọn màu từ bất kỳ đâu trên màn hình.
Từng bước một
-
Mở công cụ Chọn màu
Đi đến trang công cụ Color Picker. Công cụ này hỗ trợ chọn màu từ hình ảnh đã tải lên và trong các trình duyệt được hỗ trợ, từ mọi nơi trên màn hình thông qua EyeDropper API.
-
Chọn nguồn của bạn
Để chọn từ một hình ảnh: tải lên hoặc kéo và thả hình ảnh. Để chọn từ màn hình (chỉ Chrome/Edge): nhấp vào nút 'Chọn từ màn hình', sau đó nhấp vào bất kỳ vị trí nào trên màn hình của bạn.
-
Nhấp vào pixel để lấy mẫu
Để chọn hình ảnh, hãy di chuyển con trỏ qua hình ảnh và nhấp vào pixel có màu bạn muốn. Công cụ này đọc màu pixel từ khung vẽ bằng cách sử dụng getImageData(). Kính lúp có thể giúp bạn chọn pixel chính xác.
-
Đọc giá trị màu
Công cụ này hiển thị màu đã chọn ở các định dạng HEX, RGB và HSL cùng với một mẫu màu. Các giá trị cập nhật ngay lập tức khi bạn di chuyển con trỏ.
-
Sao chép màu sắc
Nhấp vào Sao chép bên cạnh bất kỳ định dạng nào để sao chép giá trị màu vào khay nhớ tạm của bạn. Sử dụng nó trong CSS, công cụ thiết kế hoặc ứng dụng của bạn.
Ví dụ
Chọn màu thương hiệu từ logo
đầu vào: logo.png, nhấp vào pixel màu thương hiệu
đầu ra: HEX: #1a73e8, RGB: rgb(26, 115, 232), HSL: hsl(217, 89%, 51%)
Lấy mẫu màu từ ảnh
đầu vào: photo.jpg, nhấp vào pixel bầu trời
đầu ra: HEX: #87ceeb, RGB: rgb(135, 206, 235), HSL: hsl(197, 71%, 73%)
Chọn từ màn hình (Chrome/Edge)
đầu vào: Nhấp vào 'Chọn từ màn hình', sau đó nhấp vào bất kỳ pixel nào trên màn hình của bạn
đầu ra: HEX giá trị của pixel đó, ví dụ: #ff5733
Các vấn đề thường gặp
- Khử răng cưa hòa trộn các màu ở các cạnh—các pixel ở cạnh giữa hai màu là một sự hòa trộn. Lấy mẫu từ trung tâm của vùng màu đồng nhất để đảm bảo độ chính xác.
- EyeDropper API không được hỗ trợ —bộ chọn màn hình yêu cầu Chrome 95+ hoặc Edge 95+. Firefox và Safari không hỗ trợ nó; thay vào đó hãy sử dụng phương pháp tải lên hình ảnh.
- Nén JPEG làm thay đổi màu sắc —JPEG nén mất dữ liệu thay đổi màu pixel một chút. Để có màu chính xác của thương hiệu, hãy sử dụng PNG hoặc nguồn vectơ gốc.
- Sự khác biệt về cấu hình màu —hình ảnh có cấu hình màu được nhúng (ICC) có thể hiển thị khác với giá trị pixel thô được đề xuất.
Mẹo
- Sử dụng kính lúp để chọn pixel chính xác—ở mức thu phóng cao, bạn có thể chọn một pixel chính xác thay vì một cạnh được trộn lẫn.
- Lấy mẫu nhiều pixel từ một vùng đồng nhất và tính trung bình cho chúng nếu quá trình nén gây ra nhiễu —điều này mang lại màu sắc mang tính đại diện hơn.
- Sử dụng EyeDropper API (Chrome/Edge) để chọn màu từ bất kỳ ứng dụng nào, không chỉ hình ảnh trong trình duyệt.
- Sử dụng Bộ chọn màu của chúng tôi để lấy mẫu màu ngay lập tức, riêng tư—hình ảnh của bạn không bao giờ rời khỏi trình duyệt.