Công cụ lấy màu hoạt động thế nào
Tải lên một bức ảnh, ảnh chụp màn hình hoặc logo rồi nhấp vào bất kỳ điểm nào. Công cụ đọc đúng điểm ảnh đó và hiển thị màu dưới dạng HEX (ví dụ #1e88e5) và RGB (rgb(30, 136, 229)). Nút Sao chép đưa mã HEX vào bộ nhớ tạm. Ngay khi ảnh tải xong, điểm ảnh ở giữa được đọc sẵn để bạn thấy giá trị luôn.
Mỗi màu bạn nhấp sẽ được thêm vào hàng mẫu màu gần đây (tối đa tám), nhờ đó bạn có thể thử nhiều chỗ — nút bấm, nền, tiêu đề — rồi so sánh trước khi chọn. Ảnh được đọc trên canvas trong trình duyệt và không bao giờ bị tải lên.
HEX, RGB và HSL nói đơn giản
Cả ba đều mô tả cùng một màu trên màn hình, chỉ khác cách viết.
- HEX —
#RRGGBB, ba cặp chữ số thập lục phân cho đỏ, xanh lá và xanh dương, từ00đếnff. Đây là thứ CSS, Figma, Canva, giao diện WordPress và hầu hết ô "màu thương hiệu" yêu cầu. - RGB — vẫn ba kênh đó nhưng viết bằng số thập phân từ 0 đến 255.
#1e88e5vàrgb(30, 136, 229)là một. Tiện khi viết code, dùng Office hay phần mềm có thanh trượt màu. - HSL — sắc độ (0–360° trên bánh xe màu), độ bão hòa và độ sáng tính theo phần trăm. Công cụ không hiển thị HSL, nhưng mọi phần mềm thiết kế hay CSS đều đổi từ HEX ngay lập tức. HSL hữu ích khi bạn cần bản sáng hơn hoặc tối hơn của màu vừa lấy: giữ sắc độ, chỉ đổi độ sáng.
Lấy màu từ ảnh chụp màn hình
Muốn lấy màu từ một ứng dụng, trang web hay khung hình video, hãy chụp màn hình (Windows: Win + Shift + S; Mac: Cmd + Shift + 4; điện thoại: nút nguồn + giảm âm lượng, iPhone: nút sườn + tăng âm lượng) rồi thả vào đây.
Mẹo để lấy màu chính xác:
- Nhấp vào vùng màu phẳng. Nhắm vào giữa nút bấm chứ không phải mép — mép đã được hòa với nền (khử răng cưa) nên cho ra màu trung gian.
- Ảnh chụp có nhiễu. Các điểm ảnh cạnh nhau trong ảnh chụp hơi khác nhau; hãy thử vài điểm và chọn điểm tiêu biểu nhất.
- Ảnh chụp màn hình có thể lệch màu. Chế độ ban đêm, Night Shift, HDR hoặc màn hình có quản lý màu có thể làm ám màu ảnh chụp. Hãy tắt chúng nếu cần đúng màu thương hiệu.
- JPG nén quá nhiều bị sai màu. Ảnh JPG lưu đi lưu lại nhiều lần sẽ loang lổ ở gần các đường viền. Nếu có file PNG hoặc SVG gốc của logo, hãy dùng file đó.
- Vùng trong suốt không có màu thật; nhấp vào sẽ ra màu đen (
#000000). Hãy nhấp vào phần logo nhìn thấy được.
Kiểm tra độ tương phản trước khi dùng màu
Một màu đẹp vẫn có thể khó đọc khi làm màu chữ. Hướng dẫn trợ năng (WCAG) yêu cầu độ tương phản tối thiểu 4,5:1 giữa chữ thường và nền, và 3:1 cho chữ lớn và biểu tượng. Xám nhạt trên nền trắng hay xanh vừa trên nền xanh đậm thường không đạt.
Sau khi lấy màu chữ và màu nền, dán cả hai mã HEX vào một công cụ kiểm tra độ tương phản bất kỳ. Nếu tỉ lệ thấp, làm chữ tối hơn hoặc nền sáng hơn — chỉnh độ sáng trong HSL là cách nhanh nhất để sửa mà vẫn giữ màu thương hiệu.
Những việc thường dùng
- Tìm màu thương hiệu từ logo được gửi dưới dạng ảnh.
- Làm lại màu nút hoặc màu nền của một website trong thiết kế của bạn.
- Tạo bảng màu từ ảnh chụp cho slide, bài đăng mạng xã hội hay moodboard trang trí nhà.
- Chọn màu nền cho biểu tượng Apple touch trong công cụ tạo favicon.
Công cụ liên quan
- Tách chủ thể trước rồi lấy màu không lẫn nền: Xóa phông nền.
- Cắt riêng một vùng nhỏ để nhấp chính xác hơn: Cắt ảnh.
- Cần chính bức ảnh dưới dạng mã cho CSS? Ảnh sang Base64.