CrateX.app

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

Tiếp tục bước tiếp theo với các công cụ liên quan này.

Công cụ liên quan