Công cụ gợi ý phối màu

Trình tạo phối màu chuyên nghiệp, hỗ trợ nhiều chế độ phối màu như đơn sắc, màu bổ sung, bộ ba màu, có thể tạo hàng loạt bảng phối màu và xuất ra.

Báo lỗi

Chế độ chạy trên trình duyệt: Dữ liệu của bạn được xử lý trong trình duyệt và không được tải lên máy chủ.

Tốc độ và ổn định: Tốc độ xử lý phụ thuộc vào thiết bị và trình duyệt. Với tác vụ hàng loạt lớn, phiên bản desktop có thể ổn định hơn.

Đang tải công cụ, vui lòng chờ...

Nếu công cụ trực tuyến không tải hoặc chạy được, hãy thử công cụ máy tính. https://tools.yikeaigc.com/

Mức sử dụng công cụ

Quay lại phiên bản cũ

Cài đặt trước, xử lý sau

Xác định màu chính và quy tắc phối màu trước, rồi tạo bảng màu có thể xuất

Có thể bắt đầu nhanh bằng màu mẫu hoặc nhập HEX để chọn màu chính xác. Mỗi bước có nút tiếp theo; sau khi thiết lập xong mới tạo, lưu và tải xuống.

HEX / RGB / HSL / CMYK Đơn sắc / Bổ túc / Bộ ba màu CSS / SCSS / JSON / PNG Có thể lưu cài đặt

Màu chính hiện tại Nhấp giá trị màu để sao chép

HEX

RGB

HSL

Thiết lập màu chính

Vui lòng thiết lập màu chính trước. Có thể dùng bộ chọn màu, ô nhập HEX hoặc thanh trượt HSL; bảng màu sẽ cập nhật theo tham số theo thời gian thực.

Màu cơ sởHỗ trợ HEX 6 ký tự

Giá trị màu HEX Ví dụ: #0F6FAE

CMYK

Tinh chỉnh HSLPhù hợp để chỉnh sắc độ, độ bão hòa và độ sáng

Sắc độ205°

Độ bão hòa78%

Độ sáng37%

Đặt tên bảng màu

Màu mẫuNhấp xong có thể tiếp tục chỉnh

Quy tắc phối màu

Vui lòng chọn một mô hình phối màu, rồi đặt số lượng màu và độ lệch sáng tối. Nên tạo một lần với tham số mặc định trước, rồi tinh chỉnh theo bối cảnh thiết kế.

Mô hình phối màuMàu tương đồng hợp với phong cách đồng nhất, dịu mắt

Tham số tạoĐặt tham số trước, rồi xem trước

Số màu

Góc lân cận24°

Lệch bão hòa0%

Lệch độ sáng0%

Trung hòa8%

Cách sắp xếp

Kiểu chuyển sắc

Góc gradient90°

Xem trước & tinh chỉnh

Kiểm tra mã màu, độ dễ đọc và mô phỏng giao diện. Nhấp vào giá trị màu để sao chép.

Bảng màu5 màu

Xem trước giao diệnDùng để nhận biết nhanh chính phụ

Mã gradientCó thể sao chép vào CSS

Lưu xuất

Có thể xuất bảng phối hiện tại hoặc tạo hàng loạt. Kết quả hàng loạt chỉ hiển thị 20 mục đầu; khi tải xuống sẽ gồm tất cả.

Tùy chọn hàng loạtNên đặt số lượng theo nhu cầu

Số bảng phối

Mức biến đổi

Nội dung xuấtDùng cho tệp và mã

HEX RGB HSL CMYK

JSON CSS SCSS PNG

Thao tác tải xuốngZIP sẽ đóng gói toàn bộ kết quả hàng loạt

Kết quả hàng loạtChưa tạo hàng loạt

Vui lòng đặt màu chủ đạo và quy tắc phối màu trước, rồi nhấp “Tạo hàng loạt”.

Bảng phối đã lưu0 mục

Bảng phối đã lưu sẽ hiển thị ở đây, có thể áp dụng lại hoặc xóa.

Hướng dẫn

Hướng dẫn sử dụng phần mềm

Thiết lập màu chủ đạo:Sử dụng bộ chọn màu, ô nhập HEX hoặc thanh trượt HSL trong “Thiết lập màu chủ đạo” để đặt màu cơ bản, cũng có thể nhấp vào màu mẫu để tải nhanh.
Chọn quy tắc phối màu:
- Đơn sắc:Tạo các cấp độ sáng tối dựa trên cùng một sắc độ, phù hợp với thiết kế có phong cách thống nhất.
- Màu tương đồng:Chọn các sắc độ liền kề, phù hợp với hiệu ứng thị giác mềm mại và có chiều sâu.
- Màu bổ túc:Sử dụng màu đối diện trên vòng màu, phù hợp để làm nổi bật nút, tiêu đề và nội dung quan trọng.
- Bổ túc tách đôi:Thêm màu dịu hơn vào quan hệ tương phản, phù hợp với hình ảnh vận hành và hình ảnh chiến dịch.
- Bộ ba màu, bộ bốn màu, màu tứ giác:Phù hợp với biểu đồ, nhãn phân loại và giao diện nhiều mô-đun.
- Màu trung tính:Phù hợp với trang doanh nghiệp, giao diện công cụ và thiết kế dạng tài liệu.
Điều chỉnh tham số tạo màu:Thiết lập số lượng màu, góc lân cận, độ lệch bão hòa, độ lệch độ sáng, tỷ lệ trung tính hóa, cách sắp xếp và góc chuyển sắc.
Xem trước bảng phối màu:Vào “Xem trước tinh chỉnh” để xem thông tin HEX, RGB, HSL và độ tương phản của từng màu; nhấp vào nút giá trị màu để sao chép.
Lưu bảng màu và cài đặt:Nhấp “Lưu bảng hiện tại” để lưu bảng phối màu yêu thích, nhấp “Lưu cài đặt” để lưu các tham số hiện tại, thuận tiện cho lần sử dụng sau.
Tạo hàng loạt:Vào “Lưu xuất” để đặt số lượng bảng màu và mức độ biến đổi, nhấp “Tạo hàng loạt” để tạo nhiều bộ phối màu. Giao diện hiển thị 20 bảng đầu tiên, khi tải xuống sẽ bao gồm toàn bộ kết quả.
Xuất tệp:Có thể tải riêng các tệp JSON, CSS, SCSS, PNG, hoặc chọn nội dung xuất rồi tải xuống gói nén ZIP.

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

Đáp:Đơn sắcphù hợp với mở rộng thương hiệu và giao diện đơn giản;Màu tương đồngphù hợp với trang mềm mại, thống nhất;Màu bổ túcphù hợp để nhấn mạnh thông tin quan trọng;Bộ ba màuphù hợp với biểu đồ và bố cục nhiều mô-đun;Màu trung tínhphù hợp với công cụ doanh nghiệp và bối cảnh tài liệu.

Đáp: Nhập mã màu vào ô nhập HEX, ví dụ #0F6FAE, công cụ sẽ đồng bộ cập nhật bộ chọn màu, thanh trượt HSL và phần xem trước phối màu. Cũng có thể tinh chỉnh bằng các thanh trượt sắc độ, độ bão hòa và độ sáng.

Đáp: Tệp CSS sẽ tạo mã màu dưới dạng biến, có thể dùng cho kiểu dáng trang web; tệp SCSS phù hợp với các dự án Sass. Cả hai định dạng đều thuận tiện để tái sử dụng trong hệ thống thiết kế, chuyển đổi giao diện và kiểu dáng thành phần.

Đáp: Việc tạo hàng loạt sẽ dựa trên màu chủ đạo hiện tại, quy tắc phối màu và mức độ biến đổi để điều chỉnh hợp lý sắc độ, độ bão hòa và độ sáng, từ đó tạo ra nhiều bộ phối màu có phong cách liên quan nhưng không trùng lặp.

Đáp: Các bảng màu đã lưu sẽ được ghi lại trong bộ nhớ cục bộ của thiết bị hiện tại. Sau khi xóa dữ liệu trang web hoặc đổi thiết bị, các bảng màu đã lưu trước đó có thể không còn hiển thị, nên xuất tệp kịp thời đối với những bảng màu quan trọng.

Đáp: Không. Việc tính toán màu sắc, lưu bảng màu và tạo tệp đều được hoàn tất trên thiết bị hiện tại; màu chủ đạo, bảng màu và nội dung xuất ra sẽ không được tải lên máy chủ.

Đáp: Xem độ tương phản của chữ trắng và chữ tối cho từng màu trong “Xem trước tinh chỉnh”. Giá trị càng cao, văn bản càng dễ đọc. Khi dùng làm nền cho nội dung chính, nên chọn màu chữ có độ tương phản cao hơn.