20 người đã dùng
·
37 lượt xem
Thang màu & design token
Từ một màu thương hiệu, tạo đủ 11 bậc sáng tối cho design system.
Màu thương hiệu
Chấm tròn đánh dấu bậc gần màu gốc nhất (màu gốc được giữ nguyên). Nhãn dưới mỗi ô: chữ nên dùng trên nền đó và tỉ lệ tương phản.
Mã design token
Nhập mã màu thương hiệu và đặt tên biến như primary hay brand, công cụ tạo ngay 11 bậc từ 50 đến 950 theo chuẩn OKLCH. Bạn xuất được CSS, Tailwind, SCSS hoặc JSON.
Design token là các biến lưu giá trị thiết kế như màu sắc, được đặt tên thống nhất (primary-500, primary-600...) để dùng chung giữa file thiết kế và code.
Không. Bậc gần màu gốc nhất giữ đúng màu của bạn và được đánh dấu bằng chấm tròn, các bậc khác được tính sáng hơn hoặc tối hơn quanh nó.
OKLCH chia độ sáng đều theo cảm nhận của mắt, nên các bậc nhảy đều nhau hơn so với chỉ pha trắng hay pha đen trong RGB.
Chọn định dạng Tailwind, sao chép hoặc tải tệp, dán phần colors vào tailwind.config.js, rồi dùng class như bg-primary-500 hoặc text-primary-700.
Có, định dạng CSS tạo sẵn các biến như --primary-500 trong :root. Ngoài ra còn SCSS và JSON cho các hệ thống khác.
Thanh này chỉnh độ rực của các bậc rất sáng và rất tối. Giảm xuống để có nền nhạt trung tính hơn, tăng lên nếu muốn thang màu tươi hơn.
Mỗi ô cho biết nên dùng chữ đậm hay chữ trắng trên nền đó và tỉ lệ tương phản tương ứng, giúp bạn chọn bậc phù hợp cho nút bấm và nền.
Thường bậc 500–600 cho nút chính, 700 cho trạng thái hover, 50–100 cho nền nhạt và 800–950 cho chữ trên nền sáng. Hãy xem tỉ lệ tương phản trên từng ô.
Có, bấm PNG để tải ảnh thang màu kèm mã, tiện trình bày trong tài liệu hướng dẫn thương hiệu. Khi bạn tải PNG, ColorME nhận một bản ảnh thang màu để theo dõi cách công cụ được dùng. Nếu bạn đăng nhập, file tải về được lưu vào mục Lịch sử riêng của bạn và tự xoá sau 180 ngày.
Miễn phí, không cần đăng nhập và chạy ngay trên trình duyệt.
Được. Tạo các biến màu trong Figma theo tên và mã từ công cụ, hoặc dùng tệp JSON với plugin nhập token.
Không có câu hỏi nào khớp. Thử từ khoá khác hoặc nhắn tư vấn.
Còn câu hỏi? Nhắn tư vấn
Công cụ khác cho người học thiết kế
- Mở khoá toàn bộ công cụ AI của ColorME: tạo ảnh, video, phụ đề… và thêm lượt tạo mockup mỗi ngày.
- Mỗi khoá học tại ColorME tặng 3 đến 24 tháng Premium, tuỳ khoá.
- Bạn bè được học viên mời: 1 tháng Premium.
Xem Premium Account
Xem khoá học
Học viên ColorME có thể mời bạn bè dùng Premium. Nhờ một học viên gửi lời mời tới email của bạn, sau đó đăng nhập bằng đúng email đó, Premium sẽ tự kích hoạt.