Codekk
Developer Tool

UI Color System Generator

Generate a complete 11-shade Tailwind CSS color palette from a single color. Preview on real UI components and export in multiple formats instantly.

Pick Your Primary Color

Choose any color to generate a complete palette

%
Generated Color Palette
11 shades
50
100
200
300
400
500
600
700
800
900
950
50

#f1f6fe

AAA
100

#deeafd

AAA
200

#bbd4fb

AAA
300

#8fb8fa

AAA
400

#5996f7

AAA
500Primary

#3c83f6

AA
600

#0b64f4

AA
700

#0950c3

AAA
800

#073c92

AAA
900

#052861

AAA
950

#021431

AAA
Component Preview

Live Component Previews

See how your palette looks on real UI components

8 component types
Primary Buttons
Secondary & Outline

Ready to use your palette?