Bạn có một ảnh và cần một con số từ nó: mã hex của một màu cụ thể. Có thể đó là một logo mà thông số thương hiệu đã mất từ lâu, một ảnh chụp màn hình của một trang mà bạn muốn khớp màu xanh của nó, hay một bức ảnh với một sắc thái bạn muốn dùng lại. Gõ cái màu bạn nghĩ nó là không hoạt động — mắt bạn không thể đọc #3A7BD5 từ một màn hình, và màu trông đúng thường lệch vài chữ số. Đây là cách đọc giá trị thực thẳng từ pixel.
Vì sao đoán không bao giờ chuẩn
Một "màu xanh" đơn lẻ trên màn hình thực chất là một dải các màu xanh gần y hệt nhau, và độ sáng lẫn hiệu chỉnh của màn hình dịch chúng đi xa hơn. Chọn bằng mắt và bạn rơi vào gần nhưng sai — đủ gần để sự lệch pha gây khó chịu nhưng không rõ ràng, nên bạn đốt mười phút tự hỏi vì sao cái nút không khớp với phần đầu trang. Cách chữa là ngừng đoán và đọc con số mà pixel thực sự lưu.
Lấy mã trong ba bước
Cách đáng tin là lấy mẫu pixel trực tiếp bằng một công cụ chọn màu.
- Nạp ảnh. Thả vào logo, ảnh chụp màn hình, hay bức ảnh bạn đang rút từ đó.
- Rê tới đúng pixel. Một kính lúp theo con trỏ và phóng to vùng bên dưới, nên trên một cạnh cứng bạn có thể thấy pixel nào là màu thương hiệu phẳng và cái nào là một pha trộn khử răng cưa của hai màu.
- Nhấn để lưu, rồi sao chép. Mỗi cú nhấn giữ màu như một ô màu hiển thị HEX, RGB và HSL của nó, mỗi cái với nút sao chép riêng. Nhấn HEX và nó nằm trên clipboard của bạn.
Rơi vào đúng pixel
Kính lúp quan trọng hơn nghe qua tưởng. Nơi một màu gặp một màu khác — một chữ cái trên một cái nền, cạnh của một biểu tượng — các pixel ở giữa bị khử răng cưa: một pha trộn được làm mượt của hai màu, không phải màu nào cả. Lấy mẫu ở đó và bạn có một giá trị đục không khớp gì. Nhắm vào một vùng phẳng vài pixel bên trong hình dạng, nơi màu đặc, và khung phóng to cho bạn xác nhận bạn đang ở trên nó trước khi nhấn.
Trên một logo sạch hay một giao diện phẳng điều này dễ — màu đồng nhất trên một vùng rộng. Trên một bức ảnh thì cần cẩn thận hơn, vì hạt và nén nghĩa là các pixel lân cận thực sự khác nhau. Chọn từ một vùng yên tĩnh, chiếu sáng đều và lấy vài mẫu để kiểm tra chúng đồng ý.
HEX, RGB hay HSL — lấy cái phù hợp
Mỗi ô màu cho bạn cả ba cùng lúc, nên bạn sao chép cái nào đích đến của bạn cần:
- HEX (
#3A7BD5) — mặc định của web. CSS, Figma, Canva, tài liệu thương hiệu. Sao chép cái này trừ khi bạn có lý do khác. - RGB (
rgb(58, 123, 213)) — giá trị các kênh, hữu ích khi một công cụ đòi hỏi chúng hoặc bạn cần độ trong suốt quargba. - HSL (
hsl(215, 65%, 53%)) — sắc độ, độ bão hòa, độ sáng. Tốt nhất khi bạn muốn điều chỉnh màu: làm sáng nó cho một trạng thái rê chuột, làm dịu nó cho một biến thể, hay dựng một thang từ nó.
Vì mỗi ô màu mang cả ba, bạn không bao giờ lấy mẫu lại chỉ để đổi định dạng.
Lấy vài màu cùng lúc
Một logo hiếm khi là một màu. Nhấn màu chính, màu điểm nhấn, và màu chữ trong một lượt — mỗi cái xếp chồng trong danh sách để bạn có thể so chúng và sao chép chúng lần lượt, thay vì nạp ảnh ba lần riêng.
Nếu bạn muốn một bản tóm tắt màu của cả một ảnh thay vì các pixel cụ thể — bảng màu tổng thể mà một bức ảnh được dựng từ đó — đó là một việc khác, và công cụ bảng màu riêng của img.diy tự động trích xuất các màu chủ đạo cho bạn. Dùng công cụ chọn này khi bạn biết chính xác điểm bạn muốn; dùng công cụ bảng màu khi bạn muốn ảnh được đặc tả hộ.
Nó ở lại trên thiết bị của bạn
Ảnh được đọc cục bộ trong trình duyệt của bạn từ một canvas — không gì được tải lên, không phải đăng ký, và sau lần tải đầu nó hoạt động offline. Nên một mockup chưa ra mắt hay một tài sản riêng của khách hàng không bao giờ rời khỏi máy của bạn chỉ vì bạn cần một mã hex từ nó.
Nạp ảnh, rê tới pixel, nhấn, và sao chép mã.