Kéo thả ảnh vào đây
Hoặc dán ảnh từ Clipboard bằng Ctrl+V
Hỗ trợ: JPG, PNG, WebP, GIF, BMP — Xử lý 100% trên trình duyệt
📐 Mã Màu Chi Tiết
🎨 Bảng Màu Có Sẵn — Click để áp dụng
Trích xuất mã màu từ ảnh — Cách hoạt động
Khi bạn tải ảnh lên, công cụ sử dụng thuật toán K-Means Clustering — một kỹ thuật Machine Learning phổ biến — để phân tích từng pixel và nhóm chúng thành 5 cụm màu chủ đạo. Toàn bộ quá trình diễn ra 100% trên trình duyệt (client-side), ảnh của bạn không bao giờ được gửi lên server.
K-Means Clustering hoạt động như thế nào?
- Bước 1: Ảnh được vẽ lên Canvas ẩn, lấy mẫu ~10.000 pixel (sampling)
- Bước 2: Khởi tạo 5 tâm cụm bằng K-Means++ (tránh hội tụ cục bộ)
- Bước 3: Lặp tối đa 20 lần: gán pixel → tính lại tâm cụm → kiểm tra hội tụ
- Bước 4: Sắp xếp theo tỷ lệ xuất hiện → 5 màu chủ đạo nhất
Tính năng nổi bật
- Kéo thả / Clipboard: Kéo thả ảnh hoặc dán bằng Ctrl+V — không cần chọn file
- Copy tức thì: Click vào bất kỳ swatch → copy HEX kèm haptic feedback
- Đa định dạng: HEX, RGB, HSL, CMYK + Tailwind CSS class gần nhất
- CSS Gradient: Tự động tạo linear/radial/conic gradient từ palette
- Color Harmony: Complementary, Analogous, Triadic, Split-Complementary
- WCAG Contrast: Kiểm tra tỷ lệ tương phản AA/AAA giữa các cặp màu
Ai nên dùng công cụ này?
Designer: Trích xuất bảng màu từ ảnh mood board, thiên nhiên, UI reference. Lập trình viên: Copy nhanh mã HEX/RGB vào CSS, xuất Tailwind config. Marketer: Đảm bảo brand consistency, tạo gradient cho banner/ads.
Câu hỏi thường gặp
Chỉ cần kéo thả ảnh vào vùng Drop Zone hoặc dán ảnh bằng Ctrl+V. Thuật toán K-Means Clustering sẽ trả về 5 màu chủ đạo trong dưới 1 giây.
K-Means là thuật toán phân cụm (clustering) trong Machine Learning. Nó chia tập dữ liệu (ở đây là pixel ảnh) thành k nhóm sao cho các điểm trong cùng nhóm gần nhau nhất. Tâm của mỗi nhóm chính là màu chủ đạo.
Không. 100% xử lý trên trình duyệt bằng Canvas API. Ảnh không rời khỏi thiết bị, đảm bảo quyền riêng tư tuyệt đối.
HEX: Mã 6 ký tự (#FF5733), phổ biến trong CSS. RGB: Đỏ-Xanh lá-Xanh dương (0-255). HSL: Sắc-Bão hòa-Sáng (trực quan nhất). CMYK: Dùng trong in ấn (Cyan-Magenta-Yellow-Black).
Có. Mỗi màu trích xuất sẽ được ánh xạ tới class Tailwind CSS gần nhất (ví dụ: bg-violet-500). Rất tiện cho dân frontend.
WCAG 2.1 quy định tỷ lệ tương phản tối thiểu giữa text và background. AA yêu cầu ≥4.5:1, AAA yêu cầu ≥7:1. Công cụ tự kiểm tra giữa các cặp màu trong palette.
JPG, PNG, WebP, GIF, BMP, SVG — tất cả định dạng mà trình duyệt hỗ trợ hiển thị đều hoạt động.