Trình tạo hài hòa màu sắc

Cách Trình tạo Hài hòa Màu hoạt động

Công cụ làm gì

Trình tạo Hài hòa Màu tính toán các bộ màu có quan hệ toán học từ một sắc độ cơ sở duy nhất: bổ sung, tương đồng, bộ ba, bộ bốn, hình vuông, bổ sung tách, đơn sắc và sắc độ. Mỗi bảng màu được hiển thị với các giá trị HEX, RGB và HSL mà bạn có thể sao chép chỉ với một cú nhấp và dùng trực tiếp trong CSS hoặc design token.

Các trường hợp sử dụng phổ biến cho lập trình viên

Nhà thiết kế tạo mẫu bảng màu thương hiệu bằng cách khám phá cách một sắc độ thương hiệu biến đổi theo các quy tắc hài hòa khác nhau. Lập trình viên frontend lấy màu nhấn cho nút, cảnh báo và huy hiệu từ một màu thương hiệu chính. Kỹ sư trực quan hóa dữ liệu chọn các bộ màu phân loại trông có chủ đích nhưng vẫn dễ phân biệt. Quản lý sản phẩm so sánh các lựa chọn bảng màu khi duyệt đề xuất thiết kế mà không cần công cụ thiết kế chuyên dụng.

Định dạng dữ liệu, kiểu hoặc biến thể

Có sẵn tám sơ đồ: Bổ sung (cơ sở + 180°), Tương đồng (cơ sở ± 30°), Bộ ba (3 màu cách nhau 120°), Bộ bốn (hình chữ nhật 4 màu), Hình vuông (4 màu cách nhau 90°), Bổ sung tách (cơ sở + ±150°), Đơn sắc (cùng sắc độ với độ sáng thay đổi 10–90%), và Sắc độ (cùng sắc độ, từ tối đến sáng). Mỗi màu bao gồm biểu diễn HEX, RGB và HSL cùng với nhãn vai trò.

Các lỗi thường gặp và trường hợp biên

Các hài hòa được suy ra từ màu cơ sở quá ít bão hòa hoặc gần thang xám sẽ trông khó phân biệt giữa các sơ đồ — hãy bắt đầu từ một màu cơ sở bão hòa. Màu cơ sở bão hòa cao kết hợp với sơ đồ bộ ba hoặc bộ bốn có thể tạo ra bảng màu chói, khó cân bằng; hãy cân nhắc giảm bớt độ bão hòa khi dùng cho UI. Một số cặp màu suy ra từ các hài hòa không đạt tương phản WCAG — luôn kiểm tra các cặp chữ/nền trong công cụ Color Contrast trước khi phát hành.

Khi nào nên dùng công cụ này thay vì viết mã

Hãy dùng công cụ trên trình duyệt để lên ý tưởng, khám phá nhanh và duyệt thiết kế. Trong code, các thư viện như chroma.js, colord hoặc culori cho phép bạn tính toán các hài hòa theo chương trình, tích hợp chúng vào pipeline build design-token và kết hợp toán học hài hòa với các không gian màu đồng đều theo cảm nhận như Oklch để có bảng màu trông đồng đều hơn.