Công cụ tạo bảng màu Material Design
Tạo bảng màu đẹp mắt dựa trên nguyên tắc Material Design của Google. Chọn màu chính và màu nhấn để tạo ra một chủ đề hoàn chỉnh.
Công cụ tạo bảng màu
Bảng màu đã tạo
Bảng màu Material Design đầy đủ
Khám phá toàn bộ bảng màu Material Design. Nhấp vào bất kỳ màu nào để sao chép mã hex của nó.
Đỏ
Hồng
Tím
Xanh dương
Xanh lá
Cam
Lục lam
Hổ phách
Mẹo sử dụng
- Dùng sắc độ 500 làm màu chính
- Dùng sắc độ 700 cho các biến thể đậm hơn (như thanh ứng dụng)
- Dùng màu nhấn (A200, A400) cho nút hành động nổi và điểm nhấn
- Đảm bảo tỷ lệ tương phản phù hợp để dễ tiếp cận
Công cụ tạo màu Material Design chuyên nghiệp
Truy cập toàn bộ hệ thống màu Material Design 3 của Google với bảng màu Material You, token màu chính thức và các tùy chọn xuất chuyên nghiệp cho phát triển giao diện hiện đại và thiết kế ứng dụng Android.
Vì sao chọn công cụ tạo màu Material Design của chúng tôi?
Công cụ toàn diện của chúng tôi cho phép truy cập toàn bộ hệ thống màu Material Design 3 với giao diện động Material You, token màu chính thức của Google và các định dạng xuất chuyên nghiệp.
- Material Design 3 system
- Material You palettes
- Official color tokens
- Dynamic theming
- Multiple export formats
- Developer-ready code
Hệ thống Material Design 3 đầy đủ
Truy cập toàn bộ hệ thống màu Material Design 3 bao gồm màu chính, phụ, thứ ba, các biến thể bề mặt và bảng sắc độ đầy đủ với vai trò màu ngữ nghĩa.
Giao diện động Material You
Tạo bảng màu Material You từ màu gốc với các biến thể chủ đề sáng/tối tự động và trích xuất màu cá nhân hóa cho ứng dụng Android hiện đại.
Tùy chọn xuất sẵn sàng cho lập trình viên
Xuất dưới dạng thuộc tính tùy chỉnh CSS, biến SCSS, token JSON, tài nguyên XML cho Android, token Figma và dữ liệu chủ đề Flutter theo đúng quy ước đặt tên.
Phù hợp cho:
- Android app development
- Web applications
- Flutter projects
- Design systems
- UI component libraries
- Material UI theming
Cách hoạt động:
Chọn hệ thống màu
Chọn từ bảng màu cổ điển Material Design 3 hoặc tạo bảng màu Material You từ màu gốc của bạn.
Tùy chỉnh & xem trước
Điều chỉnh sắc độ, xem trước chủ đề sáng/tối và xem cách màu sắc hoạt động trong các thành phần Material Design.
Xuất & triển khai
Tải xuống token màu theo định dạng bạn muốn và tích hợp trực tiếp vào quy trình phát triển của bạn.
Câu hỏi thường gặp
Material Design 3 là hệ thống thiết kế mới nhất của Google với các vai trò màu và token ngữ nghĩa được cải tiến. Material You là lớp cá nhân hóa tạo ra bảng màu tùy chỉnh từ hình nền hoặc màu gốc của người dùng, tạo nên giao diện động thích ứng với sở thích cá nhân trong khi vẫn tuân theo nguyên tắc MD3.
Nhập màu thương hiệu hoặc tông màu bạn thích làm màu gốc. Thuật toán của chúng tôi sẽ tạo ra bảng sắc độ đầy đủ với các nhóm màu chính, phụ, thứ ba, trung tính và biến thể trung tính, mỗi nhóm gồm 13 sắc độ từ 0 (đen) đến 100 (trắng), theo đúng tiêu chuẩn Material You của Google.
Xuất dưới dạng thuộc tính tùy chỉnh CSS, biến SCSS/Sass, token thiết kế JSON, tài nguyên XML cho Android, đối tượng JavaScript/TypeScript, token thiết kế Figma, chủ đề ColorScheme của Flutter và tài nguyên màu Swift cho iOS. Mọi bản xuất đều tuân theo quy ước đặt tên ngữ nghĩa chuẩn.
Có! Hệ thống màu Material Design 3 được xây dựng với khả năng tiếp cận là ưu tiên hàng đầu. Hệ thống bảng sắc độ đảm bảo tỷ lệ tương phản phù hợp giữa màu nền và màu chữ trên nền. Công cụ của chúng tôi hiển thị mức độ đạt chuẩn WCAG và tự động đề xuất các cặp màu dễ tiếp cận.
Chắc chắn rồi! Màu Material Design là mã nguồn mở và có thể dùng cho bất kỳ dự án nào. Dù hệ thống này được thiết kế cho các sản phẩm của Google, nhưng khoa học màu sắc và nguyên tắc dễ tiếp cận của nó vẫn rất phù hợp cho mọi giao diện hiện đại, dù là web, di động hay ứng dụng máy tính.
Material Design 3 sử dụng các vai trò màu ngữ nghĩa, tự động ánh xạ sang sắc độ phù hợp cho chủ đề sáng và tối. Ví dụ, 'primary' dùng sắc độ 40 ở chủ đề sáng và sắc độ 80 ở chủ đề tối. Công cụ của chúng tôi cung cấp cả hai biến thể chủ đề với độ tương phản và khả năng tiếp cận được đảm bảo.