AnyTools
🎨

Bộ chọn màu

Trích xuất màu từ hình ảnh với độ chính xác từng pixel, hiển thị HEX, RGB, HSL, HWB và cho phép sao chép tức thì để tạo bảng màu nhất quán.

Phân tích thiết kế màu sắc

Việc lấy màu từ hình ảnh rất quan trọng để duy trì sự nhất quán thiết kế, phân tích nhận diện thương hiệu và tạo bảng màu hài hòa.

❓Bộ chọn màu là gì

Bộ chọn màu là công cụ lấy mẫu pixel và chuyển đổi sang các định dạng màu chuẩn (HEX, RGB, HSL, HWB). Nó hỗ trợ nhà thiết kế, lập trình viên và marketer xây dựng palette thương hiệu, kiểm tra tương phản và duy trì tính nhất quán thị giác giữa mockup và sản phẩm thực tế.

✨Tính năng nổi bật

🎯

Trích xuất từng pixel

Nhấp vào ảnh để lấy mã màu chính xác, kèm tọa độ X/Y và ô Xem trước giúp tái sử dụng đúng vị trí.
🌈

Đa định dạng mã màu

Hiển thị HEX, RGB, HSL, HWB và gợi ý cú pháp CSS, phù hợp với thiết kế và lập trình front-end.
📋

Sao chép một chạm

Chọn định dạng mong muốn và sao chép ngay vào clipboard để đưa vào Figma, CSS hoặc tài liệu.
🛡️

Xử lý cục bộ an toàn

Ảnh được xử lý bằng Canvas trên trình duyệt, dữ liệu không rời khỏi thiết bị nên phù hợp nội dung nhạy cảm.

📋Hướng dẫn sử dụng

1️⃣
Bước 1
Tải ảnh bằng cách nhấp "Tải lên Image" hoặc kéo thả.
2️⃣
Bước 2
Nhấp vào bất kỳ điểm nào trên ảnh để trích xuất giá trị màu.
3️⃣
Bước 3
Sao chép định dạng màu mong muốn để sử dụng trong dự án.

📚Giới thiệu kỹ thuật

🔬Không gian màu và mô hình chuyển đổi

Mỗi pixel của ảnh được giả định trong không gian sRGB 8-bit. Công cụ chuyển đổi giá trị này sang HEX, RGB, HSL, HWB và LAB dựa trên công thức tiêu chuẩn W3C, đảm bảo màu sắc đồng nhất giữa thiết kế và mã nguồn.

⚙️Lấy mẫu chính xác với Canvas

Canvas getImageData() trả về mảng RGBA. Chúng tôi ánh xạ tọa độ nhấp tới chỉ số pixel tương ứng, giảm thiểu sai số bằng cách khóa pixel ratio và hỗ trợ hình ảnh có độ phân giải cao.

🎚️Hiệu chỉnh gamma và ánh sáng

Các màn hình khác nhau có gamma và gamut riêng. Công cụ giữ nguyên dữ liệu gốc và hiển thị song song với ảnh để người dùng so sánh, hạn chế sai lệch thị giác.

💡Phân tích palette và tương phản

Dữ liệu màu thu được có thể kết hợp với thuật toán WCAG để kiểm tra độ tương phản, xây dựng palette thương hiệu và đảm bảo khả năng truy cập cho giao diện.
❓

Câu hỏi thường gặp

❓

Bộ chọn màu hoạt động như thế nào?

Công cụ sử dụng Canvas API để đọc dữ liệu pixel từ hình ảnh. Khi bạn nhấp vào ảnh, nó lấy giá trị RGBA tại tọa độ đó và chuyển đổi sang nhiều định dạng như HEX, RGB, HSL, HWB.
💬

Những định dạng ảnh nào được hỗ trợ?

Công cụ hỗ trợ các định dạng phổ biến như JPG, PNG, GIF và WebP. Bạn có thể kéo thả hoặc nhấp để chọn tệp hình ảnh.
🔍

Tôi dùng giá trị màu đã lấy như thế nào?

Giá trị màu được hiển thị ở các định dạng HEX, RGB, HSL, HWB. Nhấp vào bất kỳ định dạng nào để sao chép và dùng trực tiếp trong CSS, công cụ thiết kế hoặc mã nguồn.
💡

Có thể trích xuất nhiều màu cùng lúc không?

Bạn có thể lấy từng màu một. Tuy nhiên, hãy nhấp vào các vị trí khác nhau liên tiếp để trích xuất nhiều màu và sao chép khi cần.
📚

Tọa độ màu có ý nghĩa gì?

Tọa độ (X, Y) biểu thị vị trí pixel bạn đã nhấp trong ảnh. X là vị trí ngang (0 ở bên trái), Y là vị trí dọc (0 ở phía trên) giúp bạn tìm lại đúng màu sau này.

💡Mẹo sử dụng hiệu quả

🎨

Duy trì bảng màu thương hiệu

Sau khi trích xuất, lưu lại mã màu chuẩn để đồng bộ giữa thiết kế, front-end và tài liệu nhận diện.
🧪

So sánh ánh sáng và bóng

Lấy mẫu nhiều điểm trong cùng vùng để phân tích độ lệch màu, từ đó tinh chỉnh gradient hoặc đổ bóng.
🛡️

Kiểm tra tương phản WCAG

Kết hợp mã màu với công cụ kiểm tra tương phản để đảm bảo văn bản rõ ràng và đáp ứng tiêu chuẩn truy cập.

🔗Related Documents

📖MDN - Canvas API-Giới thiệu và hướng dẫn sử dụng Canvas API của HTML5
🎓MDN - Tài liệu SVG-Tài liệu và hướng dẫn về đồ họa vector SVG
⚡W3C - Đặc tả SVG-Đặc tả SVG chính thức do W3C phát hành
📚MDN - Giá trị màu CSS-Các giá trị màu và không gian màu được hỗ trợ trong CSS
💡Web.dev - Đồ họa và hiệu ứng thị giác-Thực hành tốt nhất cho đồ họa và hoạt ảnh trên web

📦Thành phần đề xuất

User Comments

0 / 2000
Loading...