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

Các phương án hài hòa

• Bổ sung: cơ sở + đối diện trên bánh xe màu (180°). Độ tương phản cao, sống động. Tốt cho các nút kêu gọi hành động dựa trên màu sắc thương hiệu.
• Tương tự: 3-5 màu trong phạm vi 30° của nhau. Bình tĩnh, hòa thuận, gia đình thường ấm áp hoặc mát mẻ. Tốt cho hình nền và hình minh họa với một chủ đề gia đình.
• Bộ ba: 3 màu cách đều nhau (120°). Sống động và cân đối. Phổ biến trong các sản phẩm dành cho trẻ em và các thương hiệu táo bạo.
• Chia phần bổ sung: nền + hai màu sắc ở hai bên phần bổ sung (150° và 210°). Phong phú hơn bổ sung, ít căng thẳng hơn.
• Tứ giác / vuông: 4 màu ở góc 90°. Khó cân bằng hơn - chọn một cái chiếm ưu thế.
• Đơn sắc: một màu, độ bão hòa và độ sáng đa dạng. Thanh lịch và gắn kết; thiếu điểm nhấn trừ khi kết hợp với một màu trung tính.

Cấu trúc bảng màu cho công việc thực tế

Hệ thống thiết kế thường cần:

• Chính (thương hiệu cơ bản)
• Thứ cấp (thương hiệu hỗ trợ)
• Giọng (CTA, điểm nổi bật)
• Tỷ lệ trung tính (nền, văn bản, đường viền — 5-10 màu xám)
• Ngữ nghĩa (thành công, cảnh báo, lỗi, thông tin)
• Bề mặt (nền bảng điều khiển, lớp phủ)

Một bảng màu hài hòa mang đến cho bạn điểm nhấn chính + phụ + điểm nhấn. Các giá trị trung lập và ngữ nghĩa thường đến từ các quy ước riêng biệt (màu xám gần như bão hòa; màu sắc ngữ nghĩa được tiêu chuẩn hóa).

Xuất định dạng

Thuộc tính tùy chỉnh CSS:

:root {
  --brand-primary: #2E86AB;
  --brand-secondary: #A23B72;
  --brand-accent: #F18F01;
  --brand-neutral: #C73E1D;
}

Cấu hình Tailwind:

theme: {
  extend: {
    colors: {
      brand: {
        primary: '#2E86AB',
        secondary: '#A23B72',
        accent: '#F18F01',
      }
    }
  }
}

SCSS:

$brand-primary: #2E86AB;
$brand-secondary: #A23B72;

Độ tương phản và khả năng tiếp cận

Đề án hài hòa không đảm bảo khả năng tiếp cận. Kiểm tra các cặp bảng màu theo yêu cầu về độ tương phản của WCAG:

• Nội dung văn bản trên nền: tối thiểu 4,5:1 (AA).
• Chữ lớn: 3:1.
• Không phải văn bản (nút, biểu tượng, vòng lấy nét): 3:1.

Ghép nối trình tạo với bộ kiểm tra độ tương phản để tìm các tổ hợp phù hợp.

Mẹo

• Bắt đầu với màu cơ bản được xác định, không phải màu ngẫu nhiên — sự hài hòa sẽ có chủ đích khi màu nền có ý nghĩa (thương hiệu của bạn, bức ảnh bạn thích, tài liệu tham khảo về văn hóa).
• Kiểm tra bảng màu trong thực tế: trên một nút, trên văn bản, trong biểu đồ. Các mẫu màu trông đẹp mắt không đảm bảo hoạt động tốt trong giao diện người dùng.
• Giảm độ bão hòa một chút đối với các bảng màu dành cho bề mặt lớn — nền bão hòa hoàn toàn sẽ gây mệt mỏi.
• Giữ điểm nhấn hiếm hoi: nếu 80% giao diện người dùng là chính và phụ, hãy sử dụng màu nhấn ở 10% điểm tiếp xúc (CTA) để có được sức hút tối đa.