Trả lời nhanh
Để lấy màu từ ảnh, chọn hoặc dán ảnh, di chuột (hoặc chạm) lên điểm cần lấy để xem mã HEX, RGB, HSL trong khung phóng to, bấm để ghim màu, rồi bấm “Chép” để sao chép mã. Công cụ cũng tự tách 5–10 màu chủ đạo của ảnh và xuất thành biến CSS hoặc JSON. Ảnh xử lý ngay trên trình duyệt, không tải lên máy chủ.
Lấy màu từ ảnh là gì?
Lấy màu từ ảnh giúp bạn có đúng mã màu của logo, ảnh sản phẩm, ảnh chụp màn hình hay một bức ảnh đẹp để dùng lại khi thiết kế website, slide hay bài đăng. Thay vì đoán bằng mắt, công cụ đọc chính xác màu của từng điểm ảnh và gợi ý cả bảng màu hài hoà của bức ảnh.
Cách lấy mã màu từ ảnh
- 1
Bấm “Chọn tệp”, kéo thả hoặc dán (Ctrl + V) một ảnh JPG, PNG, WebP, GIF, BMP hoặc AVIF.
- 2
Di chuột hoặc chạm lên ảnh: khung phóng to hiện các điểm ảnh quanh con trỏ để bạn chọn đúng điểm, kèm mã HEX, RGB, HSL. Bằng bàn phím: Tab vào ảnh, dùng phím mũi tên (giữ Shift để đi nhanh).
- 3
Bấm (hoặc Enter) để ghim màu. Bấm “Chép” cạnh mã cần dùng.
- 4
Xem “Bảng màu chủ đạo”, chọn số màu (5, 6, 8, 10). Ở “Xuất bảng màu”, chọn lấy từ bảng màu chủ đạo hoặc màu đã ghim, rồi sao chép CSS, JSON hoặc tải tệp.
Ba cách viết cùng một màu
Ví dụ màu cam đất:
| Hệ | Ví dụ | Dùng khi |
|---|---|---|
| HEX | #D9733B | CSS, Figma, Canva, phần lớn công cụ thiết kế |
| RGB | rgb(217, 115, 59) | CSS, lập trình, phần mềm đồ hoạ (mỗi kênh 0–255) |
| HSL | hsl(21, 68%, 54%) | Chỉnh sáng / tối, đậm / nhạt dễ hơn: giữ sắc độ, đổi độ sáng |
Cả ba là cùng một màu trong không gian sRGB. Muốn đổi sang CMYK hoặc kiểm tra độ tương phản chữ, dùng công cụ “Chuyển đổi mã màu”.
Màu đã ghim và bảng màu chủ đạo
| Màu đã ghim | Bảng màu chủ đạo | |
|---|---|---|
| Cách có | Bạn tự bấm từng điểm trên ảnh | Công cụ tự tách từ toàn bộ ảnh |
| Chính xác tới | Đúng một điểm ảnh | Màu trung bình của một nhóm điểm ảnh giống nhau |
| Hợp với | Lấy đúng màu logo, nút bấm, chữ | Tìm tông màu chung để phối giao diện, bài đăng |
Ví dụ thực tế
Lấy đúng màu logo của khách hàng
Dán ảnh chụp màn hình website của khách, phóng to vào vùng giữa logo (tránh mép bị khử răng cưa), ghim màu và chép mã HEX vào tệp thiết kế.
Phối màu slide theo ảnh bìa
Mở ảnh bìa, chọn 6 màu chủ đạo, sao chép CSS hoặc dùng mã HEX cho tiêu đề, nền và điểm nhấn của slide.
Đối chiếu màu sản phẩm
Ghim màu ở vài chỗ trên ảnh áo (chỗ sáng, chỗ tối) để thấy màu thật nằm trong khoảng nào trước khi viết mô tả.
Lỗi thường gặp và cách xử lý
- Mã màu lấy được hơi khác màu thật của logo.
- Ảnh JPG nén và mép chữ / hình bị khử răng cưa làm điểm ảnh lệch màu. Phóng to, chọn điểm ở giữa vùng màu đồng đều, hoặc dùng ảnh PNG / SVG gốc.
- Màu trên màn hình khác màu in.
- Mã HEX / RGB là màu màn hình (sRGB). In ấn dùng CMYK và tuỳ giấy, mực; hãy thử in mẫu trước khi in số lượng.
- Bảng màu chủ đạo thiếu một màu nhỏ nhưng nổi bật.
- Bảng màu xếp theo tỉ lệ diện tích, màu chiếm ít chỗ dễ bị gộp. Tăng số màu lên 8–10 hoặc ghim tay màu đó.
- Ảnh rất lớn báo màu “có thể lệch rất nhẹ”.
- Ảnh có cạnh dài trên 4.096 px được đọc ở cỡ nhỏ hơn để tiết kiệm bộ nhớ. Vùng màu lớn không đổi; chi tiết rất nhỏ có thể pha màu điểm bên cạnh.
Bảng màu chủ đạo được tách thế nào?
Công cụ lấy mẫu ảnh (tối đa khoảng 40.000 điểm ảnh), bỏ qua điểm gần trong suốt, rồi dùng thuật toán median cut: lặp lại việc chia đôi nhóm màu theo kênh (đỏ, lục, lam) trải rộng nhất cho tới khi đủ số màu. Sau đó vài vòng k-means kéo mỗi màu về đúng trung tâm nhóm của nó. Mỗi màu kèm tỉ lệ phần ảnh mà nó đại diện.
Tất cả chạy trên trình duyệt của bạn, ảnh không rời khỏi máy. Màu đọc từ ảnh theo không gian sRGB như trình duyệt hiển thị; ảnh có hồ sơ màu rộng (Display P3) được trình duyệt quy đổi về sRGB khi vẽ.
Thuật ngữ
- HEX
- Mã màu 6 chữ số hệ 16 (#RRGGBB), mỗi cặp là lượng đỏ, lục, lam từ 00 tới FF.
- RGB
- Màu ghép từ đỏ (R), lục (G), lam (B), mỗi kênh 0–255.
- HSL
- Màu theo sắc độ (0–360°), độ bão hoà và độ sáng (0–100%).
- Khử răng cưa
- Cách làm mịn mép hình bằng các điểm ảnh pha màu giữa hình và nền, khiến mép không đúng màu gốc.
Câu hỏi thường gặp
Ảnh có bị tải lên máy chủ không?
Không. Ảnh được đọc ngay trên trình duyệt của bạn.
Có lấy màu trên điện thoại được không?
Được. Chạm và kéo ngón tay trên ảnh để xem màu trong khung phóng to; nhấc tay ra là màu tại điểm đó được ghim.
Có lấy màu từ ảnh chụp màn hình được không?
Được. Chụp màn hình rồi dán thẳng vào trang bằng Ctrl + V (hoặc Cmd + V trên Mac).
Bảng màu xuất ra dùng thế nào?
Bản CSS là các biến như --mau-1: #D9733B; dán vào tệp CSS. Bản JSON có mã HEX, RGB, HSL của từng màu, dùng cho lập trình hoặc lưu trữ.
Có lấy màu trong suốt được không?
Mã hiển thị là màu RGB của điểm ảnh; độ trong suốt không được tính. Bảng màu chủ đạo bỏ qua vùng gần trong suốt.
Muốn đổi sang CMYK thì sao?
Chép mã HEX rồi mở công cụ “Chuyển đổi mã màu” để xem CMYK, kiểm tra tương phản và các sắc độ đậm nhạt.
Đánh giá và bình luận
Đang tải…