Trình tạo bảng màu sắc
Hài hòa màu sắc
Two colors opposite on the color wheel
Bảng màu đã tạo
Xem trước bảng màu
Xuất bảng màu
:root {
--color-1: #3b82f6;
--color-2: #f6af3c;
}Chi tiết kỹ thuật
Cách Trình Tạo Bảng Màu Hoạt Động
Công cụ làm gì
Trình Tạo Bảng Màu tạo ra các phối màu hài hòa từ bất kỳ màu gốc nào dựa trên các nguyên tắc lý thuyết màu sắc đã được thiết lập. Chọn một màu gốc và chọn một trong sáu kiểu hài hòa — bổ sung, tương đồng, bộ ba, bộ bốn, bổ sung tách đôi hoặc đơn sắc — để tạo ngay một bảng màu đồng bộ. Mỗi màu được tạo ra hiển thị giá trị HEX, RGB và HSL sẵn sàng để sao chép vào CSS, công cụ thiết kế hoặc hướng dẫn phong cách của bạn.
Các trường hợp sử dụng phổ biến cho lập trình viên
Nhà thiết kế và lập trình viên dùng trình tạo bảng màu khi bắt đầu dự án mới, xây dựng hệ thống thiết kế hoặc làm mới màu thương hiệu. Các tình huống phổ biến gồm tạo màu nhấn bổ sung cho màu thương hiệu chính, tạo phối màu tương đồng cho trực quan hóa dữ liệu, xây dựng bảng màu bộ ba cho chủ đề UI rực rỡ và khám phá các biến thể đơn sắc cho thiết kế tối giản. Công cụ cũng hữu ích để tạo bộ CSS custom property và token màu JSON cho hệ thống thiết kế.
Các Kiểu Hài Hòa Màu
Các hòa sắc màu dựa trên bánh xe màu. Màu bổ sung nằm đối diện nhau (180°) và tạo độ tương phản cao. Màu tương đồng nằm kề nhau (±30°) và cho cảm giác đồng nhất. Màu bộ ba được phân bố đều theo khoảng 120° để tạo sự rực rỡ cân bằng. Bộ bốn (hình chữ nhật) dùng bốn màu theo khoảng 90°. Bổ sung tách đôi ghép một màu gốc với hai màu kề với màu bổ sung của nó. Đơn sắc thay đổi độ sáng và độ bão hòa của một sắc độ duy nhất để tạo các bảng màu tinh tế, thống nhất.
Các lỗi thường gặp và trường hợp biên
Các bảng màu được tạo ra là điểm khởi đầu, không phải thiết kế cuối cùng. Luôn kiểm tra tỷ lệ tương phản giữa các màu được tạo để đảm bảo khả năng tiếp cận. Màu gốc quá bão hòa hoặc quá tối có thể tạo ra bảng màu khó đọc. Hãy nhớ rằng màu trên màn hình sẽ hiển thị khác khi in. Hãy thử nghiệm bảng màu với nội dung thực và các phần tử UI thay vì chỉ dựa vào xem trước các ô màu.
Khi nào nên dùng công cụ này thay vì viết mã
Dùng công cụ trên trình duyệt này để khám phá tương tác và tạo bảng màu nhanh trong các đợt thiết kế sprint. Với hệ thống thiết kế dùng cho production, hãy triển khai việc tạo bảng màu theo cách lập trình bằng các thư viện như chroma.js, culori hoặc polished, có thể tạo hòa sắc, áp dụng tỷ lệ tương phản và tích hợp với quy trình build.