Bảng Màu hỗ trợ hai chế độ: tạo phối màu và trích xuất bảng màu từ hình ảnh. Ở chế độ Tạo, chọn màu cơ sở và quy tắc hài hòa. Ở chế độ Trích xuất, tải lên hình ảnh để trích xuất màu chủ đạo hoặc sử dụng ống nhỏ giọt để chọn chính xác. Tất cả xử lý diễn ra trong trình duyệt của bạn.
Tính năng
8 quy tắc hài hòa màu: đơn sắc, bổ túc, tương tự, tam sắc, tứ sắc, bổ túc phân tách, bổ túc liền kề, bổ túc phân tách kép
Tải lên hình ảnh để tự động trích xuất bảng màu với ống nhỏ giọt để chọn chính xác
Xuất dưới dạng biến CSS, Tailwind v4 và biến SCSS
Khóa từng màu riêng lẻ để giữ nguyên khi tạo lại
Nhấp để sao chép bất kỳ màu nào ở định dạng HEX, RGB hoặc HSL
Xử lý hoàn toàn ngoại tuyến — không có gì được tải lên máy chủ
Cách sử dụng
1Trong chế độ Tạo, chọn màu cơ sở và quy tắc hài hòa
2Bảng màu tự động cập nhật — khóa hoặc sao chép từng màu riêng lẻ
3Chuyển sang chế độ Trích xuất và tải lên hình ảnh để trích xuất bảng màu
4Nhấp vào nút xuất để sao chép cấu hình CSS/Tailwind/SCSS
Câu hỏi thường gặp
Công cụ này khác gì so với Công cụ Chuyển đổi Màu và Công cụ Chọn Màu?
Công cụ Chuyển đổi Màu chuyển đổi giữa các định dạng HEX, RGB, HSL. Công cụ Chọn Màu chọn một màu duy nhất từ hình ảnh. Bảng Màu tạo các phối màu hài hòa từ màu cơ sở hoặc trích xuất bảng màu hoàn chỉnh từ hình ảnh.
Tôi có thể khóa từng màu riêng lẻ trong bảng màu không?
Có. Mỗi ô màu có nút khóa. Các màu đã khóa được giữ nguyên khi bạn thay đổi màu cơ sở hoặc quy tắc. Chỉ các màu chưa khóa mới được tạo lại.
Người mới bắt đầu nên sử dụng quy tắc hài hòa nào?
Bổ túc tạo thiết kế tương phản cao. Tương tự tinh tế và thống nhất — tuyệt vời cho xây dựng thương hiệu. Đơn sắc sạch sẽ và chuyên nghiệp. Tam sắc và tứ sắc nâng cao hơn nhưng tạo bảng màu phong phú và cân bằng.
Độ chính xác của việc trích xuất bảng màu từ hình ảnh như thế nào?
Sử dụng phân nhóm màu với hợp nhất khoảng cách Euclidean, công cụ trích xuất tối đa 8 màu chủ đạo. Các pixel trong suốt được lọc và mỗi màu hiển thị tỷ lệ phần trăm của nó. Để chọn chính xác, hãy sử dụng chế độ ống nhỏ giọt.
Dữ liệu của tôi có được tải lên máy chủ không?
Không. Tất cả tính toán màu sắc và xử lý hình ảnh diễn ra hoàn toàn trong trình duyệt của bạn. Không có gì được tải lên.
Xuất Tailwind nhắm đến phiên bản nào?
Xuất Tailwind tạo cú pháp màu tùy chỉnh @theme của Tailwind CSS v4 sử dụng các biến --color-*.