Preview bảng màu trên UI component thực tế — hero, card, navbar, dashboard, button set
Quick Load Preset
Primary
Secondary
Accent
Background
Text
UI Preview
1 — Landing Page Hero
Welcome to our platform
Your palette in action — hero section showcasing how primary and secondary blend.
2 — Card Component
This card component shows how your background, text, and accent colors work together in a typical product card layout.
3 — Navigation Bar
4 — Dashboard Widget
Total Revenue
$84,231
+12.5%
Active Users
23,891
+4.1%
Conversion
3.24%
+0.8%
Progress
62%
5 — Button Set
Button Set
Export
:root {
--color-primary: #3B82F6;
--color-secondary: #6366F1;
--color-accent: #F59E0B;
--color-background: #F8FAFC;
--color-text: #1E293B;
}Điểm nổi bật
Các điểm đáng chú ý nhất của công cụ này để bạn nắm nhanh trước khi dùng.
Xem palette của bạn trên Hero section, Card, Navbar, Dashboard widget và Button set — không cần đoán màu sẽ ra sao.
Thay đổi bất kỳ màu nào — toàn bộ UI preview cập nhật tức thì, không cần reload.
Primary, Secondary, Accent, Background, Text — đủ để xây dựng color system hoàn chỉnh cho bất kỳ dự án nào.
5 palette preset sẵn (Ocean, Sunset, Forest, Minimal, Corporate) để khởi đầu nhanh.
Cách sử dụng
Làm theo từng bước để dùng công cụ nhanh và đúng intent ngay từ lần đầu.
Click vào ô màu để mở color picker. Hoặc load preset có sẵn để bắt đầu nhanh.
Cuộn xuống để xem Hero, Card, Navbar, Dashboard và Button set — tất cả dùng đúng màu bạn chọn.
Thay đổi từng màu và xem ngay ảnh hưởng trên toàn bộ UI — nhanh hơn nhiều so với Figma.
Câu hỏi thường gặp
Những câu hỏi gặp nhiều nhất khi dùng công cụ, được trình bày ngắn gọn và dễ quét.