Brand Color System Generator

Brand Color System Generator

Generate a complete design system from one brand color

Your Brand Color
Primary

Main brand color for key elements

Secondary

Supporting color for secondary elements

Accent

Complementary color for highlights

Success

Positive feedback and confirmations

Warning

Caution states and alerts

Error

Error states and destructive actions

Info

Informational messages

Preview in Use

Buttons

Alerts

Success message
Warning message
Error message
Tailwind Config
1// tailwind.config.js
2module.exports = {
3  theme: {
4    extend: {
5      colors: {
6    primary: {
7      50: '#f3f3fb',
8      100: '#e6e6f9',
9      200: '#c1c2f6',
10      300: '#9395f6',
11      400: '#5f62f1',
12      500: '#2c2fed',
13      600: '#1216d3',
14      700: '#0f12ae',
15      800: '#080a82',
16      900: '#030563',
17      950: '#00013d',
18    },
19    secondary: {
20      50: '#f7f4fb',
21      100: '#efe7f8',
22      200: '#dbc4f2',
23      300: '#c399f0',
24      400: '#a668e8',
25      500: '#8937e1',
26      600: '#701ec8',
27      700: '#5c19a4',
28      800: '#430e7b',
29      900: '#32085e',
30      950: '#1e033a',
31    },
32    accent: {
33      50: '#fcfcf2',
34      100: '#fbfbe4',
35      200: '#f9f8bd',
36      300: '#fbfa8d',
37      400: '#faf757',
38      500: '#f8f520',
39      600: '#dfdb07',
40      700: '#b7b406',
41      800: '#898701',
42      900: '#666400',
43      950: '#3d3c00',
44    },
45    success: {
46      50: '#f4faf7',
47      100: '#e8f7ee',
48      200: '#c6f1d6',
49      300: '#9bedb9',
50      400: '#6ce598',
51      500: '#3cdd77',
52      600: '#22c35d',
53      700: '#1ca04d',
54      800: '#117837',
55      900: '#0a5c28',
56      950: '#053918',
57    },
58    warning: {
59      50: '#fcf9f3',
60      100: '#fbf3e5',
61      200: '#f9e3be',
62      300: '#fad38e',
63      400: '#f8be59',
64      500: '#f6a823',
65      600: '#dc8f09',
66      700: '#b57508',
67      800: '#885702',
68      900: '#664100',
69      950: '#3d2700',
70    },
71    error: {
72      50: '#fbf3f3',
73      100: '#f9e6e6',
74      200: '#f6c1c1',
75      300: '#f69393',
76      400: '#f15f5f',
77      500: '#ed2c2c',
78      600: '#d31212',
79      700: '#ae0f0f',
80      800: '#820808',
81      900: '#630303',
82      950: '#3d0000',
83    },
84    info: {
85      50: '#f3f9fc',
86      100: '#e5f4fa',
87      200: '#bfe6f8',
88      300: '#90d7f9',
89      400: '#5bc5f5',
90      500: '#26b2f2',
91      600: '#0d98d9',
92      700: '#0a7db2',
93      800: '#045d86',
94      900: '#014665',
95      950: '#002a3d',
96    },
97      },
98    },
99  },
100}
CSS Variables
1:root {
2  --primary-50: #f3f3fb;
3  --primary-100: #e6e6f9;
4  --primary-200: #c1c2f6;
5  --primary-300: #9395f6;
6  --primary-400: #5f62f1;
7  --primary-500: #2c2fed;
8  --primary-600: #1216d3;
9  --primary-700: #0f12ae;
10  --primary-800: #080a82;
11  --primary-900: #030563;
12  --primary-950: #00013d;
13

14  --secondary-50: #f7f4fb;
15  --secondary-100: #efe7f8;
16  --secondary-200: #dbc4f2;
17  --secondary-300: #c399f0;
18  --secondary-400: #a668e8;
19  --secondary-500: #8937e1;
20  --secondary-600: #701ec8;
21  --secondary-700: #5c19a4;
22  --secondary-800: #430e7b;
23  --secondary-900: #32085e;
24  --secondary-950: #1e033a;
25

26  --accent-50: #fcfcf2;
27  --accent-100: #fbfbe4;
28  --accent-200: #f9f8bd;
29  --accent-300: #fbfa8d;
30  --accent-400: #faf757;
31  --accent-500: #f8f520;
32  --accent-600: #dfdb07;
33  --accent-700: #b7b406;
34  --accent-800: #898701;
35  --accent-900: #666400;
36  --accent-950: #3d3c00;
37

38  --success-50: #f4faf7;
39  --success-100: #e8f7ee;
40  --success-200: #c6f1d6;
41  --success-300: #9bedb9;
42  --success-400: #6ce598;
43  --success-500: #3cdd77;
44  --success-600: #22c35d;
45  --success-700: #1ca04d;
46  --success-800: #117837;
47  --success-900: #0a5c28;
48  --success-950: #053918;
49

50  --warning-50: #fcf9f3;
51  --warning-100: #fbf3e5;
52  --warning-200: #f9e3be;
53  --warning-300: #fad38e;
54  --warning-400: #f8be59;
55  --warning-500: #f6a823;
56  --warning-600: #dc8f09;
57  --warning-700: #b57508;
58  --warning-800: #885702;
59  --warning-900: #664100;
60  --warning-950: #3d2700;
61

62  --error-50: #fbf3f3;
63  --error-100: #f9e6e6;
64  --error-200: #f6c1c1;
65  --error-300: #f69393;
66  --error-400: #f15f5f;
67  --error-500: #ed2c2c;
68  --error-600: #d31212;
69  --error-700: #ae0f0f;
70  --error-800: #820808;
71  --error-900: #630303;
72  --error-950: #3d0000;
73

74  --info-50: #f3f9fc;
75  --info-100: #e5f4fa;
76  --info-200: #bfe6f8;
77  --info-300: #90d7f9;
78  --info-400: #5bc5f5;
79  --info-500: #26b2f2;
80  --info-600: #0d98d9;
81  --info-700: #0a7db2;
82  --info-800: #045d86;
83  --info-900: #014665;
84  --info-950: #002a3d;
85}

You might also like

Color Harmony Wheel

Create harmonious color schemes

Shade Generator

Generate color shades and tints

Frequently Asked Questions

What is a brand color system?

A brand color system is a structured set of colors used consistently across a brand's digital presence. It typically includes primary colors (main brand color), secondary colors (supporting color), accent colors (highlights), and semantic colors (success, warning, error, info) for feedback states.

How many colors should a brand palette have?

A typical brand color system includes 1-2 primary colors, 1-2 secondary colors, 1 accent color, and 4 semantic colors. Each color should have a full shade scale (50-950) for flexibility. This generator creates all of these from just one base color.

How do I choose a brand color?

Consider your brand personality, target audience, and industry. Blues convey trust and professionalism, greens suggest growth and nature, purples imply luxury and creativity. Use the color wheel to find complementary colors for your secondary palette.

What are semantic colors in UI design?

Semantic colors communicate meaning in user interfaces: Success (green) for positive actions, Warning (yellow/amber) for caution, Error (red) for problems, and Info (blue) for neutral information. These should be consistent across your entire application.