Công cụ lấy màu từ ảnh

Lấy màu từ ảnh là gì?

Tải lên hoặc dán ảnh rồi bấm vào điểm bất kỳ để đọc chính xác màu của điểm ảnh đó dưới dạng HEX, RGB (hoặc RGBA khi bán trong suốt) và HSL. Kính lúp hiển thị các điểm ảnh quanh con trỏ, ô X/Y giúp nhắm đúng một điểm ảnh, và mọi màu đã lấy được giữ trong lịch sử có thể bấm chọn.

Cách sử dụng Lấy màu từ ảnh

1. Thả, chọn hoặc dán ảnh (ảnh chụp màn hình dán bằng Ctrl+V rất tiện).
2. Di con trỏ trên ảnh để xem phần phóng to, rồi bấm để lấy màu.
3. Hoặc gõ chính xác tọa độ điểm ảnh X và Y.
4. Bấm vào giá trị HEX, RGB hoặc HSL để sao chép; dùng lại màu trước đó từ Các màu đã lấy.

Ví dụ

Ảnh 40×20 có góc phần tư trên bên phải màu xanh lá thuần, điểm ảnh X=25, Y=5

#00FF00 · rgb(0, 255, 0) · hsl(120, 100%, 50%)

Khi nào nên dùng Lấy màu từ ảnh

Dùng để khớp màu thương hiệu từ logo hoặc ảnh chụp màn hình, lấy màu từ ảnh chụp cho thiết kế, hoặc kiểm tra màu chính xác của một phần tử giao diện. Lưu ý nén JPEG và khử răng cưa làm màu điểm ảnh thay đổi nhẹ, nên hãy lấy màu ở vùng phẳng thay vì ở cạnh. Để lấy cả bảng màu cùng lúc, hãy dùng công cụ trích bảng màu từ ảnh.

Lấy màu từ ảnh hoạt động như thế nào

Ảnh được vẽ lên canvas ở độ phân giải đầy đủ và các điểm ảnh được đọc một lần bằng getImageData. Một cú bấm được ánh xạ từ tọa độ màn hình sang tọa độ điểm ảnh, và giá trị RGBA tại vị trí đó được chuyển sang HEX và HSL (sắc độ tính bằng độ, độ bão hòa và độ sáng tính bằng phần trăm). Kính lúp vẽ lại vùng lân cận 11×11 điểm ảnh không làm mịn.

Các Trường Hợp Sử Dụng Phổ Biến

• ✓ Tìm mã HEX của màu thương hiệu trong logo.
• ✓ Lấy màu từ ảnh chụp màn hình website để dùng lại trong CSS.
• ✓ Kiểm tra hai phần tử giao diện có thật sự dùng cùng một màu không.
• ✓ Thu thập màu từ ảnh chụp cho mood board.

Câu Hỏi Thường Gặp

Khám phá thêm danh mục