Bộ Chọn Màu Ảnh và Bảng Màu
Bộ Chọn Màu Ảnh và Bảng Màu
Nhấp để chọn màu từ ảnh, tự động trích xuất màu chủ đạo và bảng màu, sao chép HEX/RGB và xuất biến CSS. Hỗ trợ PNG, JPG/JPEG, WebP, AVIF, HEIC/HEIF.
Kéo thả ảnh vào đây hoặc nhấp để chọn
Hỗ trợ PNG / JPG / JPEG / WebP / AVIF / HEIC / HEIF
🚀 Bắt đầu nhanh
- Nhập ảnh: Kéo thả hoặc nhấp để chọn
- Chuyển bảng: Desktop hiện bảng bên; Mobile nhấn nút dưới
- Nhấp để chọn: Nhấp bất cứ đâu trên ảnh để lấy màu pixel đó
- Sao chép màu: Sau khi chọn sao chép định dạng HEX/RGB/CSS
- Đặt số màu: Kéo thanh trượt hoặc nhấp preset (4/6/8/12/16/24/32)
- Trích xuất bảng màu: Nhấp nút trích xuất để lấy danh sách màu chủ đạo
- Xuất CSS: Sau khi trích xuất xuất tệp biến CSS
- Xuất JSON: Sau khi trích xuất xuất tệp dữ liệu JSON
- Đặt lại: Xóa ảnh hiện tại và kết quả
📌 Tình huống sử dụng phổ biến
- Chọn màu thiết kế/poster: Trích xuất màu chính và nổi bật cho sơ đồ màu
- Theme/hệ thống thiết kế: Xuất biến CSS hoặc JSON cho dự án
- Định kiểu component: Trích xuất màu phù hợp cho nút, thẻ, biểu đồ
- Tính nhất quán thương hiệu: Trích xuất bảng màu chuẩn từ tài sản thương hiệu
🎛️ Tùy chọn Bộ Chọn Màu và Bảng Màu
- Số màu: 2–32, thường 8/12; ảnh/gradient đề xuất 16–32
- Nút preset: 4/6/8/12/16/24/32 chuyển một nhấp
- Sắp xếp: Theo phần trăm từ cao xuống thấp, màu phổ biến nhất trước
- Số bên cạnh màu: Hiện phần trăm pixel trong ảnh
🧭 Gợi ý sử dụng
- Bắt đầu với 8/12 để xem hiệu ứng tổng thể, sau đó tăng lên 16/24/32 nếu cần
- Khi sử dụng trong dự án, đổi tên --color-1 thành tên có nghĩa (ví dụ, --color-primary)
- Giữ trang ở phía trước khi trích xuất ảnh lớn để tránh trình duyệt giảm tốc
⚠️ Giới hạn & khả năng tương thích
- Giới hạn tệp đơn 128MB, ảnh rất lớn có thể gây chậm
- Trích xuất bảng màu tự động downsample cho hiệu suất, kết quả là màu đại diện
- Giải mã HEIC/HEIF phụ thuộc vào hỗ trợ trình duyệt, chuyển đổi sang JPG/PNG nếu thất bại
- Pixel trong suốt bị bỏ qua hoặc xử lý như RGBA thực
🔒 Quyền riêng tư & bảo mật
- Tất cả xử lý được thực hiện trong trình duyệt; dữ liệu không bao giờ rời khỏi thiết bị
❓ Câu hỏi thường gặp
Sử dụng tệp CSS xuất như thế nào?
Đặt :root { --color-1: ... } xuất vào CSS toàn cục, sau đó tham chiếu bằng var(--color-1).
JSON xuất dùng để làm gì?
Để tái sử dụng script/hệ thống thiết kế, ví dụ, tạo Design Tokens hoặc config theme. Mỗi màu gồm hex/css/rgb và count.
Số màu nào được đề xuất?
UI chung: 8 hoặc 12; icon tối giản: 4–6; ảnh/gradient: 16–32. Dùng preset để so sánh nhanh.
Tại sao màu nhấp chọn và bảng màu khác nhau?
Chọn nhấp lấy một pixel; bảng màu lượng tử hóa toàn bộ ảnh cho màu đại diện nhấn mạnh xu hướng tổng thể.
Tại sao nút xuất bị xám?
Cần nhấp 'Trích Xuất Bảng Màu' trước, xuất khả dụng sau khi trích xuất hoàn tất.
Tên tệp xuất được tạo như thế nào?
Mặc định dùng tên tệp gốc (không có phần mở rộng) + .palette-số + .css/.json, với ký tự không hợp lệ được tự động làm sạch.