Trên website, mỗi màu có một nhiệm vụ: nền, chữ, nút, liên kết và cảnh báo. 12 bảng màu này được xây dựng cho đúng việc đó, với nền sáng hoặc tối, màu chữ dễ đọc và một màu nhấn cho nút. Hãy sao chép mã màu HEX vào CSS hoặc công cụ làm web của bạn.
Xanh dương SaaS gọn gàng
Nền gần như trắng, chữ xanh rất đậm và nút xanh tươi.
Doanh nghiệp kín đáo
Cho văn phòng luật, công ty tư vấn hoặc doanh nghiệp sản xuất.
Thương mại điện tử ấm áp
Màu cam làm nút mua hàng nổi bật trên nền ấm.
Chế độ tối với xanh lá
Nền tối nhiều lớp, chữ sáng và màu nhấn xanh lá cho thao tác.
Tự nhiên và hữu cơ
Cho cửa hàng sản phẩm thiên nhiên, trang trại hoặc thương hiệu chăm sóc sức khỏe.
Pastel thân thiện
Dễ gần; tông xám xanh đậm giúp chữ vẫn dễ đọc.
Báo chí với màu đỏ
Cho blog, tạp chí và trang tin; đỏ đánh dấu liên kết và tiêu đề.
Tím công nghệ
Phổ biến ở sản phẩm số, khóa học online và công cụ AI.
Xanh ngọc và san hô
Hai màu nhấn bổ túc: một cho nút, một cho cảnh báo.
Sang trọng tông tối
Cho khách sạn, nhà hàng hoặc thương hiệu cao cấp, nơi hình ảnh dẫn dắt.
Sức khỏe và thư giãn
Sạch sẽ và êm dịu; hợp với phòng khám và trung tâm trị liệu.
Vàng cát và xanh mòng két
Ấm áp nhưng nghiêm túc; cho du lịch, bất động sản hoặc quán cà phê.
Chạm vào một màu để sao chép mã HEX. Với biểu tượng bút chì, bạn mở bảng màu trong trình chỉnh sửa để tùy chỉnh.
Áp dụng quy tắc 60-30-10
Dùng màu chủ đạo (thường là nền) cho khoảng 60% trang, màu phụ cho 30% (các khối, thẻ, đầu trang) và màu nhấn cho 10% còn lại. Để dành màu nhấn cho nút và liên kết, để người xem biết nên bấm vào đâu.
Kiểm tra độ tương phản của chữ
Tiêu chuẩn tiếp cận WCAG yêu cầu độ tương phản ít nhất 4,5:1 cho chữ thường. Chữ xám nhạt trên nền trắng trông thanh lịch nhưng khó đọc, nhất là trên điện thoại dưới nắng. Hãy kiểm tra tương phản trước khi đăng.
Chọn màu cho trạng thái và cảnh báo
Ngoài bảng màu thương hiệu, website còn cần màu cho lỗi (đỏ), thành công (xanh lá) và cảnh báo (vàng hoặc cam). Hãy chọn các biến thể hợp với bảng màu của bạn và dùng nhất quán trong biểu mẫu và thông báo.