Chuyển đến nội dung

Bộ Chọn Màu Ảnh và Bảng Màu

Chọn màu từ một hình ảnh trong trình duyệt, sao chép HEX/RGB/CSS, trích xuất bảng màu đại diện 2-32 màu và xuất biến CSS hoặc JSON với hỗ trợ HEIC/HEIF.

Kéo thả ảnh vào đây hoặc nhấp để chọn

Hỗ trợ PNG / JPEG / WebP / AVIF / HEIC / HEIF

Số tệp

0 / 1

Tổng kích thước

0 bytes / 25 MB

Giới hạn mỗi tệp

25 MB

Bộ Chọn Màu Ảnh và Bảng Màu

Bắt đầu nhanh

1
Nhập một ảnh
2
Nhấp bản xem trước và sao chép HEX/RGB/CSS
3
Chọn kích thước bảng màu (4/6/8/12/16/24/32)
4
Trích xuất màu đại diện
5
Xuất biến CSS hoặc JSON

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ố lượng màu: 2-32, thường là 8/12; ảnh/độ dốc gợi ý 16-32
Nút preset: 4/6/8/12/16/24/32 chuyển một nhấp
Sắp xếp: Theo số lượng mẫu được lượng tử hóa từ cao đến thấp, các màu phổ biến nhất xếp trước
Số bên cạnh màu: Hiển thị số lượng mẫu được lượng tử hóa từ hình ảnh bảng màu được lấy mẫu xuống
Hợp đồng xuất: Các biến CSSsử dụng:root --color-1 name; JSON liệt kê chỉ mục/hex/css/rgb/count cho từng màu bảng màu.

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

Tự động trích xuất bảng màu xuống các mẫu để thực hiện, kết quả là màu đại diện.
Độ chính xác: lấy mẫu nhấp chuột sử dụng canvas được hiển thị lên tới 2.048 px ở cạnh dài nhất; trích xuất bảng màu sử dụng mẫu 256 px.
HEIC/HEIF chỉ là đầu vào; giải mã cục bộ có thể không thành công, vì vậy hãy chuyển đổi sang PNG/JPEG nếu cần.
Xử lý alpha: CSS có thể xuất rgba(...); HEX/RGB không bao gồm alpha; JSON giữ alpha thông qua giá trị css.
Ranh giới đầu vào: không nhập URL, nhập dán, công cụ nhỏ mắt màn hình hoặc quy trình mở rộng trình duyệt.
Ranh giới màu: không có chuyển đổi HSL/CMYK/Pantone/LAB/OKLCH, bộ kiểm tra độ tương phản hoặc ma trận WCAG.
Ranh giới xuất: không xuất mẫu màu Tailwind/SCSS/ASE/Figma/Procreate.

Quyền riêng tư & bảo mật

Chọn màu từ ảnh và trích xuất bảng màu chạy trong trình duyệt. Ảnh nguồn ở trong bộ nhớ trang khi công cụ này đang mở. Cài đặt kích thước bảng màu có thể ở trong bộ nhớ trình duyệt; nếu bật đồng bộ WebDAV, cài đặt đó có thể đồng bộ theo thiết lập của bạn. Màu đã chọn, bảng màu, thông báo lỗi và dữ liệu thu phóng / kéo bản xem trước là trạng thái rà soát lúc chạy và cũng có thể đồng bộ qua WebDAV state schema khi còn tồn tại. Tệp ảnh mặc định không được đồng bộ; tệp chỉ đi vào đồng bộ tệp đính kèm WebDAV khi bạn bật đồng bộ tệp đính kèm rõ ràng. Xuất bảng màu CSS/JSON được tạo khi tải xuống và không được lưu thành kết quả riêng. Trên thiết bị dùng chung, hãy xóa ảnh, màu đã chọn, bảng màu, cài đặt đã lưu và dữ liệu trang khi cần.

Câu hỏi thường gặp

5

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

Toàn bộ quá trình xử lý của công cụ diễn ra cục bộ trong trình duyệt của bạn.