Bảng màu Material Design
19 họ màu Material Design 2014
Red
Pink
Purple
Deep Purple
Indigo
Blue
Light Blue
Cyan
Teal
Green
Light Green
Lime
Yellow
Amber
Orange
Deep Orange
Brown
Grey
Blue Grey
Cấu trúc bảng màu Material Design
Bảng màu Material Design do Google công bố năm 2014 gồm 19 họ màu. Mỗi họ có 10 sắc độ chính từ 50 (nhạt nhất) đến 900 (đậm nhất), trong đó 500 là màu chính (primary) của họ. Mười sáu họ màu đầu có thêm bốn màu nhấn bão hoà cao: A100, A200, A400, A700. Ba họ trung tính Brown, Grey và Blue Grey không có màu nhấn.
Cách chọn màu theo hướng dẫn Material
- Chọn một họ làm màu chính, dùng sắc độ 500 cho thanh ứng dụng và nút chính.
- Dùng sắc độ 700 của cùng họ cho trạng thái nhấn hoặc thanh trạng thái, sắc độ 100 cho nền nhạt.
- Chọn màu nhấn từ một họ khác, thường là A200 hoặc A400, cho nút nổi và điểm nhấn.
- Chọn màu chữ theo chữ “Aa” trên mỗi ô của bảng — đó là màu (trắng hoặc đen) tương phản tốt hơn, kèm tỉ lệ tương phản ở dòng cuối. Với đa số họ màu, chữ trắng chỉ đạt chuẩn từ sắc độ 600–700 trở lên; kiểm tra kỹ hơn bằng công cụ kiểm tra độ tương phản.
Dùng màu Material trong code
Chọn “Cho lập trình” ở thanh công cụ phía trên rồi chọn nền tảng; bấm một ô để chép một màu, hoặc “Chép cả họ” để chép đủ các sắc độ của họ đó:
| Nền tảng | Màu chính (Red 500) | Màu nhấn (Red A200) |
|---|---|---|
| Flutter | Colors.red.shade500 |
Colors.redAccent.shade200 |
| Android (XML) | <color name="red_500">#F44336</color> |
<color name="red_a200">#FF5252</color> |
| MUI (React) | red[500] |
red.A200 |
| CSS | --md-red-500: #F44336; |
--md-red-a200: #FF5252; |
Với Flutter, “Chép cả họ” cho sẵn khối MaterialColor và MaterialAccentColor để dùng làm màu chủ đề; với MUI là một object khoá – giá trị giống @mui/material/colors. Nếu dự án dùng Tailwind, xem bảng màu Tailwind CSS với 26 họ màu và thang 50–950.
Material 2014, Material 2 và Material 3 khác nhau ra sao?
| Thế hệ | Hệ màu |
|---|---|
| Material Design (2014) và Material 2 | Bảng màu cố định 19 họ trên trang này; nhà thiết kế chọn primary và secondary từ bảng |
| Material 3 / Material You (2021) | Bảng màu sinh động (dynamic color): từ một màu nguồn, thuật toán HCT tạo ra các thang tông 0–100 cho primary, secondary, tertiary, neutral |
Dù Material 3 không còn dùng bảng cố định, bộ màu 2014 vẫn được dùng rộng rãi trong biểu đồ, bảng điều khiển và các thư viện giao diện như Vuetify, MUI, Angular Material. Nguồn: Material Design 2 — The color system.
