📐 Một bộ công cụ,
mọi nhiệm vụ thiết kế

Hệ thống màu UI

Tạo bảng mã thông báo thiết kế hoàn chỉnh từ một màu hạt giống duy nhất. Xuất sang Tailwind, CSS hoặc SCSS.

English 中文 日本語 한국어 Español Português Français Deutsch العربية हिन्दी ไทย Tiếng Việt Bahasa Русский

📐 Hệ thống màu UI

Hướng dẫn hệ thống màu UI

Hệ thống màu giao diện người dùng là một tập hợp các biến thể màu được xây dựng từ một màu gốc duy nhất. Nó cung cấp các thang đo từ sáng đến tối nhất quán cho mã thông báo thiết kế, nút, hình nền và màu văn bản.

Chọn màu hạt giống và chọn kiểu (Tailwind hoặc Material). Công cụ này tạo ra bảng màu gồm 10 bước hoàn chỉnh từ sáng (50) đến tối (900), hoàn hảo cho các hệ thống thiết kế.

Pro Tips

Frequently Asked Questions

Q: Mã thông báo thiết kế là gì?
Mã thông báo thiết kế là gì? Mã thông báo thiết kế là một giá trị được đặt tên để lưu trữ thuộc tính thiết kế như màu sắc, được sử dụng nhất quán trong toàn bộ hệ thống thiết kế.
Q: Tại sao tôi cần 10 sắc thái?
Tại sao tôi cần 10 sắc thái? Các thành phần UI khác nhau cần mức độ tương phản khác nhau. Thang đo 10 bước mang lại sự linh hoạt cho nền, đường viền, trạng thái di chuột và văn bản.
Q: Bảng mã thông báo thiết kế là gì?
Bảng mã thông báo thiết kế là gì? Bảng mã thông báo thiết kế là một tập hợp các biến màu có hệ thống (chính, phụ, bề mặt, văn bản) được tạo từ một màu thương hiệu duy nhất. Nó đảm bảo tính nhất quán trên toàn bộ giao diện người dùng của bạn.
Q: Tôi có thể xuất sang các hệ thống thiết kế khác ngoài Tailwind không?
Tôi có thể xuất sang các hệ thống thiết kế khác ngoài Tailwind không? Có, công cụ xuất sang thuộc tính tùy chỉnh CSS, biến SCSS và định dạng cấu hình Tailwind. Sao chép định dạng phù hợp với ngăn xếp của bạn.
Q: Làm cách nào để xử lý chế độ tối bằng công cụ này?
Làm cách nào để xử lý chế độ tối bằng công cụ này? Trước tiên, hãy tạo bảng màu chế độ sáng, sau đó sử dụng cùng màu hạt giống với các giá trị độ bão hòa và độ sáng giảm cho chế độ tối. Nhiều hệ thống thiết kế đảo ngược màu sắc bề mặt và văn bản.