Màu sắc
Màu gốc (Primitive)
Thang xám (grayscale)
- white
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- 950
- black
Cam (orange)
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- base
Lục đậm (green)
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- base
Tím (folly)
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- base
Vàng (amber)
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- base
Lục nhạt (emerald)
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- base
Lam (blue)
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- base
Đá (stone)
- 50
- 100
- 200
- 300
- 400
- 500
- 600
- 700
- 800
- 900
- base
Màu ngữ nghĩa (Semantic)
Các màu có ý nghĩa tùy thuộc vào ngữ cảnh mà nó được sử dụng. Những màu này cũng thay đổi theo chế độ hiển thị (sáng và tối).
Thương hiệu
-
Nền
base
-
Nền
100
-
Nền
200
-
Chi tiết
base
-
Chi tiết
100
-
Nét ngoài
base
-
Nét ngoài
100
-
Nét ngoài
200
Chính
Phụ
Đường dẫn
Trung tính
Gradient
Trạng thái
| Bề mặt | Chi tiết | Ví dụ | |
|---|---|---|---|
| Thông tin | base 100 200 | Văn bản Chi tiết khác | Đây là một thông báo mẫu thể hiện trạng thái của ứng dụng / hệ thống. |
| Thành công | base 100 200 | Văn bản Chi tiết khác | Đây là một thông báo mẫu thể hiện trạng thái của ứng dụng / hệ thống. |
| Cảnh báo | base 100 200 | Văn bản Chi tiết khác | Đây là một thông báo mẫu thể hiện trạng thái của ứng dụng / hệ thống. |
| Lỗi | base 100 200 | Văn bản Chi tiết khác | Đây là một thông báo mẫu thể hiện trạng thái của ứng dụng / hệ thống. |
Phát triển
Các tài nguyên liệt kê sau đây giúp lập trình viên hiểu rõ hơn về cách triển khai hệ thống màu sắc nêu trên.