Theme Studio
Generate a theme from a seed
Pick a seed color and Theme Kit derives a complete light + dark pair — secondary, muted, accent, border and ring colors are all computed with HSL math by generateTheme(). Apply it to this very site to see the runtime re-theme everything live.
Indigo Lightindigo-light
A
Generated light theme
Derived from your seed with HSL math
Indigo Darkindigo-dark
A
Generated dark theme
Derived from your seed with HSL math
1{
2 "light": {
3 "name": "indigo-light",
4 "meta": {
5 "family": "indigo",
6 "mode": "light",
7 "label": "Indigo Light",
8 "order": 10
9 },
10 "tokens": {
11 "colors": {
12 "background": "#f8fafc",
13 "foreground": "#0f172a",
14 "card": "#ffffff",
15 "cardForeground": "#0f172a",
16 "popover": "#ffffff",
17 "popoverForeground": "#0f172a",
18 "primary": "#6366f1",
19 "primaryForeground": "#ffffff",
20 "secondary": "#e4e4f1",
21 "secondaryForeground": "#0f172a",
22 "muted": "#efeff5",
23 "mutedForeground": "#64748b",
24 "accent": "#c6c6ec",
25 "accentForeground": "#0f172a",
26 "destructive": "#ef4444",
27 "destructiveForeground": "#ffffff",
28 "success": "#22c55e",
29 "successForeground": "#ffffff",
30 "border": "#d9d9e8",
31 "input": "#d9d9e8",
32 "ring": "#6366f1"
33 },
34 "radius": {
35 "lg": "8px"
36 }
37 }
38 },
39 "dark": {
40 "name": "indigo-dark",
41 "meta": {
42 "family": "indigo",
43 "mode": "dark",
44 "label": "Indigo Dark",
45 "order": 20
46 },
47 "tokens": {
48 "colors": {
49 "background": "#020617",
50 "foreground": "#f8fafc",
51 "card": "#0f172a",
52 "cardForeground": "#f8fafc",
53 "popover": "#0f172a",
54 "popoverForeground": "#f8fafc",
55 "primary": "#9596ea",
56 "primaryForeground": "#020617",
57 "secondary": "#060846",
58 "secondaryForeground": "#f8fafc",
59 "muted": "#050638",
60 "mutedForeground": "#94a3b8",
61 "accent": "#151651",
62 "accentForeground": "#f8fafc",
63 "destructive": "#f87171",
64 "destructiveForeground": "#020617",
65 "success": "#4ade80",
66 "successForeground": "#020617",
67 "border": "#080a5e",
68 "input": "#080a5e",
69 "ring": "#9596ea"
70 },
71 "radius": {
72 "lg": "8px"
73 }
74 }
75 }
76}