Trình tạo bảng màu (5 phối màu từ một màu cơ sở)

Năm phối màu theo lý thuyết màu sắc

Bổ sung: hai màu ở hai đầu đối diện của bánh xe màu (cách nhau 180°). Độ tương phản cao, sặc sỡ. Dùng cho điểm nhấn, nút kêu gọi hành động và tạo điểm focal.

Tương tự: ba màu liền kề trên bánh xe màu (cách nhau 30°). Hài hòa và dễ chịu, ít tương phản. Phổ biến trong tự nhiên; tuyệt vời cho nền và bề mặt UI.

Tam giác: ba màu cách đều nhau (cách nhau 120°). Sặc sỡ và cân bằng. Dùng trong thiết kế vui tươi hoặc năng động.

Tứ giác (hình chữ nhật): bốn màu tạo thành hình chữ nhật (cách nhau 90°). Bảng màu phong phú nhưng khó cân bằng hơn — thường dùng một màu làm chủ đạo và các màu còn lại làm điểm nhấn.

Đơn sắc: tông, tint và shade của một hue duy nhất. Tinh tế và thống nhất. Phổ biến trong thiết kế tối giản và nhận diện thương hiệu doanh nghiệp.

Chọn màu bắt đầu

Màu thương hiệu: hầu hết dự án bắt đầu từ logo hoặc màu thương hiệu hiện có. Kiểm tra nó làm màu cơ sở qua cả 5 phối màu để tìm phù hợp nhất cho thiết kế của bạn.

Cảm hứng: chọn màu từ nhiếp ảnh, nghệ thuật hoặc thiên nhiên. Màu sặc sỡ (saturation cao, lightness vừa phải) hoạt động tốt nhất làm màu cơ sở; màu rất nhạt hoặc rất tối tạo ra bảng màu bị loãng.

Khả năng tiếp cận: đảm bảo bảng màu cuối cùng có đủ độ tương phản cho văn bản. Dùng công cụ kiểm tra độ tương phản để xác minh các cặp nền/tiền cảnh đáp ứng WCAG AA (4,5:1 cho văn bản thông thường).

Sử dụng bảng màu

Biến CSS: định nghĩa các màu trong bảng màu làm biến :root (--color-primary, --color-accent, v.v.) để bạn có thể đổi chủ đề bằng cách thay đổi một vị trí.

Công cụ thiết kế: dán giá trị hex vào thư viện màu của Figma, Sketch hoặc Adobe XD. Hầu hết công cụ chấp nhận hex trực tiếp; một số cũng chấp nhận HSL hoặc màu CSS có tên.

Giới hạn sử dụng: ngay cả với 5 màu, thiết kế thực tế thường dùng 2-3 màu nổi bật và phần còn lại dùng tiết kiệm. Quy tắc 60-30-10 (60% chủ đạo, 30% phụ, 10% điểm nhấn) là điểm cân bằng khởi đầu hữu ích.