Trong một ứng dụng, màu sắc cho biết cái gì bấm được, cái gì đang hoạt động và thao tác nào thành công hay lỗi. 12 bảng màu này có nền, bề mặt, màu chính và màu chữ cho nhiều loại ứng dụng, kèm mã màu HEX để bạn đưa vào Figma, Flutter, SwiftUI hoặc React Native.
Fintech xanh dương và xanh lá
Xanh dương tạo sự tin cậy, xanh lá cho số dư và giao dịch thành công.
Cam giao hàng
Màu cam làm nút đặt hàng và ưu đãi nổi bật.
Sức khỏe và thư giãn
Êm dịu; cho ứng dụng đặt lịch khám, thói quen hoặc theo dõi sức khỏe.
Chế độ tối tông tím
Nền xám rất đậm thay cho đen tuyền, với màu nhấn tím nhạt.
Hồng và tím mạng xã hội
Cho mạng xã hội, hẹn hò hoặc nhà sáng tạo nội dung.
Năng suất tối giản
Rất dễ đọc; cho danh sách việc cần làm và công cụ làm việc.
Vàng học tập
Vui tươi và rõ ràng; cho ứng dụng học ngoại ngữ hoặc học tập.
Thể thao năng động
Xanh chanh và đỏ trên nền tối; cho bài tập và thống kê.
Tím oải hương thiền định
Dịu và êm; cho ứng dụng ngủ, thiền hoặc viết nhật ký.
Du lịch xanh ngọc và vàng cát
Gợi nhớ biển và nắng; cho đặt phòng và cẩm nang du lịch.
Xanh lá tươi cho thực phẩm
Cho ứng dụng đi chợ, công thức nấu ăn hoặc dinh dưỡng.
Mua sắm cao cấp
Trung tính và thanh lịch; để ảnh sản phẩm làm trung tâm.
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.
Chọn màu trạng thái ngay từ đầu
Mọi ứng dụng đều cần màu cho lỗi, thành công, cảnh báo và thông tin. Hãy chọn các tông hợp với bảng màu của bạn và đừng dùng màu lỗi cho việc khác, như nút thương hiệu. Kết hợp màu với biểu tượng hoặc chữ để thông điệp rõ ràng mà không chỉ dựa vào màu.
Thiết kế cả chế độ tối
Hầu hết điện thoại đều có chế độ tối, và nhiều người luôn bật nó. Đảo ngược màu là chưa đủ: hãy dùng các tông xám rất đậm thay cho đen tuyền và giảm nhẹ độ bão hòa của màu nhấn để chúng không bị chói trên nền.
Kiểm tra tương phản và vùng chạm
Theo WCAG, chữ cần có độ tương phản ít nhất 4,5:1 so với nền. Nút phải trông khác nhau khi đang hoạt động, đang được nhấn hoặc bị vô hiệu. Hãy thử ứng dụng ngoài trời và với độ sáng thấp, vì nhiều người dùng nó như vậy.