Chọn màu từ ảnh

Khi bạn cần đúng màu, không phải một màu gần giống

Bạn đang dựng lại một thương hiệu và tham chiếu duy nhất là một logo cũ. Bạn đang khớp một cái nút với một ảnh chụp màn hình một trang bạn thích. Bạn phát hiện một sắc màu trong một tấm ảnh và muốn dùng nó trong thiết kế của mình. Trong mọi trường hợp, vấn đề là như nhau: mắt bạn không đọc được một mã hex từ màn hình. "Cái màu xanh mòng két đó" thực ra là cả tá màu mòng két hơi khác nhau, và màn hình còn dịch chuyển chúng xa hơn. Bạn cần con số mà điểm ảnh thực sự nắm giữ.

Đó là điều công cụ này làm. Nạp một tấm ảnh, di chuyển qua nó, và một kính lúp bám theo con trỏ của bạn cho thấy các điểm ảnh bên dưới, phóng to lên để bạn đáp xuống đúng cái mình muốn. Nhấp, và màu đó được lưu thành một ô màu. Mỗi ô liệt kê giá trị HEX, RGB và HSL của nó với một nút sao chép bên cạnh mỗi giá trị, nên bạn đi thẳng từ một điểm ảnh trong tấm hình tới một mã trong bảng nhớ tạm của mình.

Tấm ảnh không bao giờ rời khỏi máy của bạn. Các điểm ảnh được đọc tại chỗ trong trình duyệt từ một canvas — không có gì được tải lên, không có tài khoản, và một khi trang đã tải thì nó vẫn chạy khi tắt mạng. Đó là điểm mấu chốt khi "tấm ảnh" là một bản mẫu chưa ra mắt, một tài nguyên thương hiệu của khách hàng, hay một ảnh chụp màn hình nội bộ mà bạn không nên giao cho một công cụ web bất kỳ.

Cách nó hoạt động trong thực tế

• Kính lúp là để chính xác. Logo và giao diện có các mép cứng nơi màu đổi qua một điểm ảnh — khử răng cưa nghĩa là điểm ảnh bên cạnh là một sự pha trộn lem nhem. Khung phóng to cho bạn thấy chính xác bạn đang ở điểm ảnh nào trước khi quyết, để bạn chọn màu thương hiệu phẳng chứ không phải cái mép.
• Mỗi cú nhấp giữ một ô màu. Việc lấy mẫu không phải một-lần-rồi-mất. Nhấp quanh tấm ảnh và mỗi màu chồng lên trong một danh sách, nên bạn có thể rút màu chính của một logo, màu nhấn của nó, và màu chữ trong một lượt và so sánh chúng cạnh nhau.
• Ba định dạng, một lần chọn. Mỗi ô màu hiển thị HEX, RGB và HSL cùng lúc. Bạn không lấy mẫu lại để đổi định dạng — chính màu đó vốn đã nằm sẵn ở cả ba, mỗi cái có nút sao chép riêng.

HEX, RGB, HSL — sao chép cái nào

Chúng là ba cách viết cùng một màu, và cái đúng tùy vào nơi nó sẽ đi tới.

• HEX (#3A7BD5) là mặc định cho web — CSS, hầu hết công cụ thiết kế, tài liệu thương hiệu. Gọn và dán được ở khắp nơi. Sao chép cái này trừ khi bạn có lý do để không làm vậy.
• RGB (rgb(58, 123, 213)) đánh vần ra các kênh đỏ, lục và lam. Hữu ích khi một công cụ muốn giá trị kênh, khi bạn cần một kênh alpha (rgba), hoặc khi bạn đang suy nghĩ về cách một màu được pha.
• HSL (hsl(215, 65%, 53%)) mô tả sắc độ, độ bão hòa và độ sáng. Đây là cái để với tới khi bạn muốn điều chỉnh một màu chứ không chỉ dùng lại nó — nhích độ sáng cho một trạng thái di chuột, giảm độ bão hòa cho một biến thể trầm, giữ sắc độ và dựng một thang màu.

Một giới hạn thành thật, và một công cụ chị em

Đây là một trình lấy mẫu điểm: mỗi cú nhấp đọc một điểm ảnh duy nhất. Trên một logo sạch hay một giao diện phẳng thì đó chính xác là điều bạn muốn. Trên một tấm ảnh nhiễu — hạt, dải chuyển màu, sạn nén JPEG — hai điểm ảnh cạnh nhau có thể khác nhau, nên hãy chọn từ một vùng phẳng và dùng kính lúp để tránh đáp xuống một điểm ngoại lệ. Ở đây không có bút vẽ lấy-trung-bình-một-vùng.

Và nếu bạn không muốn tự chọn tay chút nào, img.diy có một công cụ bảng màu riêng quét cả một tấm ảnh và trao cho bạn các màu chủ đạo của nó một cách tự động. Hai công cụ trả lời những câu hỏi khác nhau. Công cụ bảng màu cho bạn biết tấm ảnh này được làm từ những màu gì; công cụ lấy màu cho bạn chỉ vào một điểm ảnh cụ thể — đúng chỗ này trên logo, đúng cái nút kia — và lấy giá trị của nó. Với tới công cụ bảng màu để tóm tắt một tấm ảnh, và cái này khi bạn đã biết điểm mình muốn.

Nạp một tấm ảnh, di chuột để tìm điểm ảnh, nhấp để giữ nó, sao chép định dạng bạn cần.