Trình tạo bảng màu

Công cụ tạo bảng màu này tính toán theo mô hình HSL: H (sắc độ) là góc từ 0 đến 360° trên vòng tròn màu, còn S (độ bão hòa) và L (độ sáng) là phần trăm. Chọn một màu gốc, công cụ sẽ xoay quanh vòng màu theo các quy tắc kinh điển của lý thuyết màu để tạo cùng lúc năm màu. Vì chỉ thay đổi sắc độ, hoặc chỉ thay đổi độ sáng và độ bão hòa, các màu có mối quan hệ toán học rõ ràng và phối với nhau tự nhiên thay vì ngẫu hứng.

Mỗi chế độ phù hợp một mục đích. Đơn sắc giữ nguyên sắc độ, chỉ đổi độ sáng và bão hòa – an toàn nhất cho thương hiệu và giao diện nhiều dữ liệu. Bổ túc lấy màu đối diện 180°, tương phản mạnh nhất để làm nổi nút bấm và điểm nhấn. Tương đồng dùng các màu lân cận ±15° và ±30°, mềm mại tự nhiên như nhiều tranh minh họa và ảnh phong cảnh. Bộ ba chia vòng màu thành ba phần (120° và 240°), phong phú nhưng cần cân chỉnh tỉ lệ. Ngẫu nhiên chọn màu trong khoảng hợp lý khi bạn cần ý tưởng.

Khi áp dụng, hãy thử quy tắc 60-30-10: 60% màu chủ đạo cho nền và vùng lớn, 30% màu phụ cho khối nội dung và thẻ, 10% màu nhấn cho nút và liên kết. Bảng màu bổ túc hay bộ ba sẽ rối mắt nếu dùng các màu ngang nhau, vì vậy hãy chọn một màu chính và giảm độ bão hòa những màu còn lại. Đừng quên khả năng đọc: chữ nên đạt tỉ lệ tương phản tối thiểu WCAG AA 4,5:1 so với nền, có thể kiểm tra bằng công cụ phân tích tương phản màu của chúng tôi.

Bấm vào ô màu để sao chép mã HEX, hoặc xuất cả bảng màu dưới dạng biến CSS, biến SCSS, cấu hình Tailwind hay JSON để dán thẳng vào dự án. Trình tạo dải màu CSS bên dưới giúp biến bảng màu thành nền chuyển sắc. Mọi phép tính đều diễn ra trong trình duyệt.