Tạo hệ thống màu thương hiệu hoàn chỉnh từ một màu. Tạo bảng màu chính, phụ, nhấn, ngữ nghĩa và trung tính với accessibility tích hợp.
Press Space to generate
See how your generated palette looks in real UI components. Colors update live as you generate.
Primary, secondary, outline, and accent button styles using your brand colors.
/* Button variants using brand colors */
.btn-primary {
background: #8B5CF6;
color: #000000;
}
.btn-secondary {
background: #3B82F6;
color: #000000;
}
.btn-outline {
border: 2px solid #8B5CF6;
color: #8B5CF6;
background: transparent;
}
.btn-accent {
background: #EC4899;
color: #000000;
}A branded top navigation using primary color and accent for CTAs.
Your brand. Your colors. Your design system.
/* Branded navigation */
.navbar {
background: #8B5CF6;
color: #000000;
}
.navbar-link-active {
background: rgba(0, 0, 0, 0.15);
border-radius: 8px;
}
.navbar-cta {
background: #EC4899;
color: #000000;
}Tinted and featured card styles derived from your brand palette.
Primary
Card
Accent
Card
Secondary
Card
Featured Card
Solid primary background
/* Brand-colored cards */
.card-primary {
background: rgba(139, 92, 246, 0.08);
border: 1px solid rgba(139, 92, 246, 0.2);
}
.card-accent {
background: rgba(236, 72, 153, 0.08);
border: 1px solid rgba(236, 72, 153, 0.2);
}
.card-featured {
background: #8B5CF6;
color: #000000;
}Pill badges and labels tinted with your brand and semantic colors.
/* Status badges using brand colors */
.badge-primary {
background: rgba(139, 92, 246, 0.12);
color: #8B5CF6;
border: 1px solid rgba(139, 92, 246, 0.3);
}
.badge-accent {
background: rgba(236, 72, 153, 0.12);
color: #EC4899;
border: 1px solid rgba(236, 72, 153, 0.3);
}
.badge-neutral {
background: rgba(100, 116, 139, 0.12);
color: #64748B;
}Explore public brand color systems
Powerful features designed for designers and developers
Tạo tất cả màu thương hiệu cần: chính, phụ, nhấn, ngữ nghĩa và trung tính.
Mỗi màu tự động tạo scale đầy đủ 50-950 cho light/dark mode.
Tất cả màu được kiểm tra WCAG. Nhận cảnh báo nếu có vấn đề accessibility.
Xuất màu dạng CSS variables, Tailwind config, Figma tokens hoặc JSON.
Tự động tạo biến thể dark mode duy trì bản sắc thương hiệu.
Bắt đầu từ mẫu màu theo ngành: Tech, Y tế, Tài chính, Ẩm thực, Thời trang.
Get started in just a few simple steps
Bắt đầu với màu thương hiệu chính. Đây là nền tảng của hệ thống màu.
Xem hệ thống màu được tạo tự động bao gồm màu chính, phụ, nhấn, ngữ nghĩa và trung tính.
Điều chỉnh bất kỳ màu nào trong khi hệ thống duy trì hài hòa.
Xem báo cáo accessibility hiển thị tuân thủ WCAG cho tất cả tổ hợp màu.
Xuất hệ thống màu hoàn chỉnh dạng design tokens theo định dạng mong muốn.
Everything you need to know
Hệ thống hoàn chỉnh bao gồm: Màu chính, phụ, nhấn, ngữ nghĩa (success, warning, error, info), và trung tính (xám cho text và UI).
Tạo scale màu từ 50 (sáng nhất) đến 950 (tối nhất) cho mỗi màu, đảm bảo chuyển đổi mượt mà.
Có! Generator tự động tạo cả hai biến thể light và dark mode.
Màu ngữ nghĩa truyền tải ý nghĩa: xanh cho success, vàng cho warning, đỏ cho error, xanh dương cho info.
Có! Xuất dạng CSS variables, Tailwind config, Figma Variables, Style Dictionary hoặc JSON.
Bạn có thể nhập nhiều màu làm primary, secondary và accent. Generator sẽ tạo scale cho mỗi màu.
Explore more color tools
Tạo Bảng Màu Thương Hiệu - Xây Dựng Hệ Thống Màu Thương Hiệu - Free, no signup required
Tạo Màu Thương Hiệu