Rounded · 0.5rem radius

Amber

A ready-made palette for every nextui component and block, in light and dark, with soft shadows. Paste the CSS into globals.css.

Customize in generator

light

background

#ffffff

foreground

#0c0a09

primary

#f59e0b

secondary

#f5f5f4

muted

#f5f5f4

accent

#f5f5f4

border

#e7e5e4

destructive

#e7000b

dark

background

#0c0a09

foreground

#fafaf9

primary

#fbbf24

secondary

#292524

muted

#292524

accent

#292524

border

#312d2a

destructive

#ff6467

Preview

Real blocks from the library, rendered in Amber.

CSS

Tailwind v4 / shadcn variables in OKLCH. Replace the matching block in globals.css.

1/* Amber · generated by nextui */
2:root {
3  --radius: 0.5rem;
4  --background: oklch(1 0 0);
5  --foreground: oklch(0.147 0.004 49.2);
6  --card: oklch(1 0 0);
7  --card-foreground: oklch(0.147 0.004 49.2);
8  --popover: oklch(1 0 0);
9  --popover-foreground: oklch(0.147 0.004 49.2);
10  --primary: oklch(0.769 0.165 70.1);
11  --primary-foreground: oklch(0.216 0.006 56);
12  --secondary: oklch(0.97 0.001 106.4);
13  --secondary-foreground: oklch(0.216 0.006 56);
14  --muted: oklch(0.97 0.001 106.4);
15  --muted-foreground: oklch(0.554 0.014 59.4);
16  --accent: oklch(0.97 0.001 106.4);
17  --accent-foreground: oklch(0.216 0.006 56);
18  --destructive: oklch(0.583 0.239 28.5);
19  --border: oklch(0.923 0.003 48.7);
20  --input: oklch(0.923 0.003 48.7);
21  --ring: oklch(0.769 0.165 70.1);
22}
23
24.dark {
25  --background: oklch(0.147 0.004 49.2);
26  --foreground: oklch(0.985 0.001 106.4);
27  --card: oklch(0.216 0.006 56);
28  --card-foreground: oklch(0.985 0.001 106.4);
29  --popover: oklch(0.216 0.006 56);
30  --popover-foreground: oklch(0.985 0.001 106.4);
31  --primary: oklch(0.837 0.164 84.4);
32  --primary-foreground: oklch(0.216 0.006 56);
33  --secondary: oklch(0.268 0.006 34.3);
34  --secondary-foreground: oklch(0.985 0.001 106.4);
35  --muted: oklch(0.268 0.006 34.3);
36  --muted-foreground: oklch(0.709 0.01 62.5);
37  --accent: oklch(0.268 0.006 34.3);
38  --accent-foreground: oklch(0.985 0.001 106.4);
39  --destructive: oklch(0.702 0.189 22.2);
40  --border: oklch(0.3 0.008 59.4);
41  --input: oklch(0.341 0.009 53.2);
42  --ring: oklch(0.837 0.164 84.4);
43}
44
45/* font-family: ui-rounded, 'SF Pro Rounded', 'Nunito', system-ui, sans-serif */

Other themes

All themes

Default Ember Ocean Forest Grape Rose Clay Brutal

CSS

Tailwind v4 / shadcn variables in OKLCH. Replace the matching block in globals.css.

1/* Amber · generated by nextui */
2:root {
3  --radius: 0.5rem;
4  --background: oklch(1 0 0);
5  --foreground: oklch(0.147 0.004 49.2);
6  --card: oklch(1 0 0);
7  --card-foreground: oklch(0.147 0.004 49.2);
8  --popover: oklch(1 0 0);
9  --popover-foreground: oklch(0.147 0.004 49.2);
10  --primary: oklch(0.769 0.165 70.1);
11  --primary-foreground: oklch(0.216 0.006 56);
12  --secondary: oklch(0.97 0.001 106.4);
13  --secondary-foreground: oklch(0.216 0.006 56);
14  --muted: oklch(0.97 0.001 106.4);
15  --muted-foreground: oklch(0.554 0.014 59.4);
16  --accent: oklch(0.97 0.001 106.4);
17  --accent-foreground: oklch(0.216 0.006 56);
18  --destructive: oklch(0.583 0.239 28.5);
19  --border: oklch(0.923 0.003 48.7);
20  --input: oklch(0.923 0.003 48.7);
21  --ring: oklch(0.769 0.165 70.1);
22}
23
24.dark {
25  --background: oklch(0.147 0.004 49.2);
26  --foreground: oklch(0.985 0.001 106.4);
27  --card: oklch(0.216 0.006 56);
28  --card-foreground: oklch(0.985 0.001 106.4);
29  --popover: oklch(0.216 0.006 56);
30  --popover-foreground: oklch(0.985 0.001 106.4);
31  --primary: oklch(0.837 0.164 84.4);
32  --primary-foreground: oklch(0.216 0.006 56);
33  --secondary: oklch(0.268 0.006 34.3);
34  --secondary-foreground: oklch(0.985 0.001 106.4);
35  --muted: oklch(0.268 0.006 34.3);
36  --muted-foreground: oklch(0.709 0.01 62.5);
37  --accent: oklch(0.268 0.006 34.3);
38  --accent-foreground: oklch(0.985 0.001 106.4);
39  --destructive: oklch(0.702 0.189 22.2);
40  --border: oklch(0.3 0.008 59.4);
41  --input: oklch(0.341 0.009 53.2);
42  --ring: oklch(0.837 0.164 84.4);
43}
44
45/* font-family: ui-rounded, 'SF Pro Rounded', 'Nunito', system-ui, sans-serif */