Trình tạo Bảng màu
Công cụ tạo bảng màu này tạo bảng 5 màu từ bất kỳ màu gốc nào theo các nguyên tắc phối màu — bổ túc, bộ ba, tương đồng, bổ túc chia tách, bộ bốn hoặc đơn sắc — và xuất ra dưới dạng CSS custom properties.
Về công cụ này
Công cụ tạo bảng màu này tạo bảng 5 màu từ bất kỳ màu gốc nào theo các nguyên tắc phối màu — bổ túc, bộ ba, tương đồng, bổ túc chia tách, bộ bốn hoặc đơn sắc — và xuất ra dưới dạng CSS custom properties.
Cách sử dụng
- Chọn màu gốc bằng bộ chọn màu.
- Chọn kiểu phối màu, chẳng hạn bổ túc hoặc bộ ba.
- Xem năm ô màu được tạo ra.
- Nhấn Copy as CSS Variables để dán bảng màu vào stylesheet của bạn.
Điều nên biết
- Các màu bổ túc nằm cách nhau 180° trên vòng màu; các màu bộ ba cách nhau 120°.
- Bảng màu tương đồng dùng các sắc độ liền kề (cách nhau khoảng 30°) và thường tạo cảm giác êm dịu, hài hòa.
- Bổ túc chia tách ghép một sắc độ gốc với hai sắc độ nằm hai bên màu bổ túc của nó (±30°), tạo tương phản nhưng bớt gắt hơn.
- Bảng màu đơn sắc giữ một sắc độ và chỉ thay đổi độ bão hòa và độ sáng.
- Công cụ hoạt động trong không gian HSL, cho phép xoay sắc độ mà không thay đổi độ sáng của màu.
Chạy hoàn toàn trong trình duyệt của bạn — không có dữ liệu nào bạn nhập được tải lên hay lưu lại.
Câu hỏi thường gặp
Bảng màu bổ túc là gì?
Bảng màu bổ túc ghép một sắc độ với sắc độ đối diện trực tiếp trên vòng màu (cách 180°), như xanh dương và cam. Đây là cách phối cho độ tương phản mạnh nhất.
Bảng màu cho website nên có bao nhiêu màu?
Hầu hết giao diện dùng một màu chính, một hoặc hai màu nhấn và một nhóm màu trung tính. Bảng phối 5 màu là điểm khởi đầu tốt để bạn bớt đi hoặc mở rộng thêm với các sắc thái đậm nhạt.
Bộ ba và bộ bốn khác nhau thế nào?
Bộ ba dùng ba sắc độ cách đều nhau 120°. Bộ bốn dùng bốn sắc độ cách nhau 90°, tạo thành hình vuông trên vòng màu, phong phú hơn nhưng khó cân bằng hơn.
Có thể dùng bảng màu trong CSS hoặc Tailwind không?
Có. Sao chép bảng màu dưới dạng CSS custom properties và tham chiếu bằng var(), hoặc dán các giá trị hex vào màu theme Tailwind của bạn.