Một ảnh chụp màn hình thường là thứ duy nhất bạn có. Bạn không mở được CSS của trang, bạn không kiểm tra được ứng dụng, bạn không có tệp thiết kế — nhưng bạn thấy được các màu trên màn hình, và một ảnh chụp màn hình đóng băng chúng thành một ảnh bạn có thể lấy mẫu. Đây là cách rút chính xác các mã màu ra khỏi một ảnh.
Vì sao ảnh chụp màn hình là nguồn trung thực
Khi bạn chụp màn hình một trang hay ứng dụng đã kết xuất, bạn ghi lại các màu đúng như chúng thật sự hiện ra — sau khi mọi dải chuyển màu, lớp phủ và độ mờ đã được áp dụng. Điều đó thường trung thực hơn giá trị nguồn. Một thẻ được định nghĩa là #000000 ở độ mờ 90% trên một nền xám thì không phải màu đen trên màn hình; nó là một màu xám đậm cụ thể nào đó. Kiểm tra mã cho bạn công thức; lấy mẫu ảnh chụp màn hình cho bạn màu mà người dùng thật sự thấy. Khi bạn đang khớp diện mạo đó, ảnh chụp màn hình là thứ bạn muốn đọc.
Lấy một màu trong ba bước
- Chụp và tải ảnh chụp màn hình. Chụp màn hình (hoặc vùng bạn quan tâm) và thả ảnh vào công cụ lấy màu.
- Rê tới điểm ảnh. Một kính lúp theo con trỏ của bạn và phóng to vùng bên dưới nó, để bạn có thể nhắm chính xác — kể cả trên một đường viền mảnh hay một biểu tượng nhỏ.
- Nhấp để lưu, rồi sao chép. Mỗi lần nhấp giữ màu thành một ô mẫu với HEX, RGB và HSL của nó, mỗi cái có một nút sao chép. Sao chép định dạng bạn cần và dán vào bảng định kiểu hoặc công cụ thiết kế của bạn.
Những điều đặc thù của ảnh chụp màn hình cần để ý
Ảnh chụp màn hình có những nét lạ có thể làm lệch một mẫu màu, và chúng dễ tránh một khi bạn biết:
- Lưu dưới dạng PNG, không phải JPEG. Nén JPEG bôi màu đi một chút, đặc biệt gần các mép và ở các vùng phẳng, nên một giá trị lấy mẫu có thể trôi khỏi giá trị thật. PNG không mất mát và giữ mỗi pixel chính xác — hầu hết công cụ chụp màn hình của hệ điều hành đã mặc định PNG.
- Chú ý mức thu phóng. Một ảnh chụp màn hình chụp ở mức thu phóng của trình duyệt hay hệ điều hành khác 100% thì bị co giãn, và co giãn trộn các pixel lân cận. Để có mẫu sạch nhất, hãy chụp ở 100%.
- Tránh các mép và chữ. Khử răng cưa nghĩa là các pixel dọc theo bất kỳ mép nào là các màu trộn, không phải màu thật. Lấy mẫu từ giữa một vùng đặc — kính lúp giúp bạn thấy rằng mình đã tránh xa ranh giới mờ.
- Coi chừng màu chữ dưới pixel. Phóng vào chữ đã kết xuất và bạn sẽ thấy các viền màu không phải giá trị thật của chữ. Hãy lấy màu từ các vùng lấp và nền, không phải từ nét chữ cái.
Đọc HEX, RGB và HSL
Mỗi ô mẫu cho thấy cả ba định dạng cùng lúc:
- HEX (
#3A7BD5) — mặc định cho CSS và công cụ thiết kế. - RGB (
rgb(58, 123, 213)) — giá trị từng kênh, tiện khi bạn cần độ trong suốtrgba. - HSL (
hsl(215, 65%, 53%)) — sắc màu, độ bão hòa, độ sáng, tốt nhất khi bạn muốn tinh chỉnh màu chứ không phải sao chép nó y hệt.
Bạn không lấy mẫu lại để chuyển đổi — cùng một màu đã có sẵn ở cả ba.
Lấy cả một bảng phối màu trong một lượt
Từ một ảnh chụp màn hình bạn có thể dựng lại cả một bảng phối màu: nhấp màu tiêu đề, nút, liên kết, nền, chữ mờ. Mỗi cái chồng lên trong danh sách để bạn rút cả bộ trong một phiên và sao chép chúng theo thứ tự.
Nếu thay vào đó bạn muốn bảng màu tổng thể của một ảnh được tóm tắt sẵn cho bạn — một nhúm tông màu chủ đạo — đó là một việc riêng, và công cụ bảng màu của img.diy tự trích chúng ra. Công cụ lấy màu này là để chỉ vào một pixel cụ thể trong ảnh chụp màn hình; công cụ bảng màu là để đặc trưng hóa ảnh như một tổng thể.
Không gì rời khỏi máy của bạn
Ảnh chụp màn hình thường chứa những thứ bạn thà không tải lên — một bảng điều khiển nội bộ, một bản nháp riêng tư, một giao diện chưa ra mắt của khách hàng. Ở đây ảnh được đọc tại chỗ trong trình duyệt của bạn từ một canvas: không gì được gửi đi đâu, không có tài khoản, và nó chạy ngoại tuyến sau lần tải đầu. Bạn có được các màu mà ảnh chụp màn hình không bao giờ rời khỏi thiết bị của bạn.
Chụp ảnh màn hình, rê tới điểm ảnh, nhấp, và sao chép.