Mười bốn bảng màu hệ thống thiết kế, được phân tích từ tệp chính thức — Tailwind, Material, Bootstrap, Ant Design, Radix, Fluent và nhiều hơn nữa. Mở một hệ để xem mọi sắc độ, sao chép giá trị chính xác và chuyển sang công cụ tương ứng.
14design systems
1,915color values
100%official sources
Hệ thống thiết kế
14
Tông Material Design
89 màu
Material Web v0.192 · md-ref-paletteXem bảng màu
Bảng màu Tailwind CSS
286 màu
Tailwind CSS v4 · theme.cssXem bảng màu
Bảng màu UnoCSS
264 màu
UnoCSS preset-mini · Tailwind v3 + WindiXem bảng màu
Token Panda CSS
242 màu
Panda CSS · @pandacss/preset-pandaXem bảng màu
Theme Vanilla Extract
3 màu
vanilla-extract · createTheme docs exampleXem bảng màu
Token StyleX
6 màu
StyleX · defineVars docs exampleXem bảng màu
Bảng màu Bootstrap
29 màu
Bootstrap v5.3.8 · _variables.scssXem bảng màu
Bảng màu Ant Design
130 màu
Ant Design · @ant-design/colors 7.2.1Xem bảng màu
Open Color
130 màu
Open Color 1.9.1 · open-color.jsXem bảng màu
Bảng màu Chakra UI
100 màu
Chakra UI · @chakra-ui/theme 3.4.1Xem bảng màu
Radix Colors
360 màu
Radix Colors 3.0.0 · light scalesXem bảng màu
Màu thương hiệu Fluent UI
64 màu
Fluent UI · @fluentui/tokens brandColorsXem bảng màu
Bảng màu Primer
20 màu
Primer · @primer/primitives 11.10.0 lightXem bảng màu
Bảng màu Polaris
192 màu
Shopify Polaris · polaris-tokens 9.4.2Xem bảng màu
Tổng quan
Mọi bảng màu dưới đây đều được phân tích từ gói chính thức do nhà phát triển công bố; không có giá trị xấp xỉ hay tự sinh.
| Hệ thống | Số màu | Cấu trúc | Nguồn chính thức |
|---|---|---|---|
| Tông Material Design | 89 | 6 họ màu × 13 bậc | Material Web v0.192 · md-ref-palette |
| Bảng màu Tailwind CSS | 286 | 26 họ màu × 11 bậc | Tailwind CSS v4 · theme.css |
| Bảng màu UnoCSS | 264 | 24 họ màu × 11 bậc | UnoCSS preset-mini · Tailwind v3 + Windi |
| Token Panda CSS | 242 | 22 họ màu × 11 bậc | Panda CSS · @pandacss/preset-panda |
| Theme Vanilla Extract | 3 | 3 semantic tokens | vanilla-extract · createTheme docs example |
| Token StyleX | 6 | 6 semantic tokens | StyleX · defineVars docs example |
| Bảng màu Bootstrap | 29 | 29 semantic tokens | Bootstrap v5.3.8 · _variables.scss |
| Bảng màu Ant Design | 130 | 13 họ màu × 10 bậc | Ant Design · @ant-design/colors 7.2.1 |
| Open Color | 130 | 13 họ màu × 10 bậc | Open Color 1.9.1 · open-color.js |
| Bảng màu Chakra UI | 100 | 10 họ màu × 10 bậc | Chakra UI · @chakra-ui/theme 3.4.1 |
| Radix Colors | 360 | 30 họ màu × 12 bậc | Radix Colors 3.0.0 · light scales |
| Màu thương hiệu Fluent UI | 64 | 4 họ màu × 16 bậc | Fluent UI · @fluentui/tokens brandColors |
| Bảng màu Primer | 20 | 20 semantic tokens | Primer · @primer/primitives 11.10.0 light |
| Bảng màu Polaris | 192 | 12 họ màu × 16 bậc | Shopify Polaris · polaris-tokens 9.4.2 |
Cách dùng các bảng màu này
1
Khớp với mã nguồn hiện có
Chọn bảng màu sản phẩm đang dùng để token trùng với biến CSS bạn phát hành.
2
Sao chép giá trị chính xác
Mỗi ô màu mở trang chi tiết với HEX, RGB, HSL, OKLCH và kiểm tra tương phản.
3
Kiểm tra tương phản
Trước khi chốt cặp chữ và nền, hãy đưa hai màu vào công cụ tương phản.
Câu hỏi thường gặp
Các giá trị màu này đến từ đâu?
Mỗi bảng màu được phân tích từ gói mà hệ thống thiết kế công bố — theme.css của Tailwind, tệp token của Material, Bootstrap, Ant Design… Không có giá trị ước lượng.
Vì sao có hệ liệt kê theo họ màu, có hệ theo token?
Hệ dựa trên thang như Tailwind có 11 sắc độ mỗi họ; hệ dựa trên token như Primer đặt tên theo ngữ nghĩa. Mỗi trang hiển thị đúng cấu trúc thật.
Có được dùng cho mục đích thương mại không?
Các bảng màu do dự án công bố theo giấy phép thoáng (phần lớn MIT hoặc Apache-2.0). Hãy kiểm tra giấy phép của hệ bạn dùng.
Có cần tài khoản hay API key không?
Không. Mọi giá trị đọc được ngay trên trang và dữ liệu tương tự có qua API miễn phí.