Geist · 0.75rem radius

Ocean

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

#020618

primary

#2563eb

secondary

#f1f5f9

muted

#f1f5f9

accent

#f1f5f9

border

#e2e8f0

destructive

#e7000b

dark

background

#020618

foreground

#f8fafc

primary

#3b82f6

secondary

#1d293d

muted

#1d293d

accent

#1d293d

border

#263449

destructive

#ff6467

Preview

Real blocks from the library, rendered in Ocean.

CSS

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

1/* Ocean · generated by nextui */
2:root {
3  --radius: 0.75rem;
4  --background: oklch(1 0 0);
5  --foreground: oklch(0.13 0.043 265.1);
6  --card: oklch(1 0 0);
7  --card-foreground: oklch(0.13 0.043 265.1);
8  --popover: oklch(1 0 0);
9  --popover-foreground: oklch(0.13 0.043 265.1);
10  --primary: oklch(0.546 0.215 262.9);
11  --primary-foreground: oklch(1 0 0);
12  --secondary: oklch(0.968 0.007 247.9);
13  --secondary-foreground: oklch(0.208 0.042 266.4);
14  --muted: oklch(0.968 0.007 247.9);
15  --muted-foreground: oklch(0.554 0.046 257.5);
16  --accent: oklch(0.968 0.007 247.9);
17  --accent-foreground: oklch(0.208 0.042 266.4);
18  --destructive: oklch(0.583 0.239 28.5);
19  --border: oklch(0.929 0.013 255.5);
20  --input: oklch(0.929 0.013 255.5);
21  --ring: oklch(0.546 0.215 262.9);
22}
23
24.dark {
25  --background: oklch(0.13 0.043 265.1);
26  --foreground: oklch(0.984 0.003 247.9);
27  --card: oklch(0.208 0.042 266.4);
28  --card-foreground: oklch(0.984 0.003 247.9);
29  --popover: oklch(0.208 0.042 266.4);
30  --popover-foreground: oklch(0.984 0.003 247.9);
31  --primary: oklch(0.623 0.188 259.8);
32  --primary-foreground: oklch(1 0 0);
33  --secondary: oklch(0.28 0.041 260.3);
34  --secondary-foreground: oklch(0.984 0.003 247.9);
35  --muted: oklch(0.28 0.041 260.3);
36  --muted-foreground: oklch(0.704 0.04 257);
37  --accent: oklch(0.28 0.041 260.3);
38  --accent-foreground: oklch(0.984 0.003 247.9);
39  --destructive: oklch(0.702 0.189 22.2);
40  --border: oklch(0.322 0.042 258.3);
41  --input: oklch(0.372 0.045 257.4);
42  --ring: oklch(0.623 0.188 259.8);
43}
44
45/* font-family: ui-sans-serif, system-ui, sans-serif */

Other themes

All themes

Default Ember Forest Grape Rose Amber Clay Brutal

CSS

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

1/* Ocean · generated by nextui */
2:root {
3  --radius: 0.75rem;
4  --background: oklch(1 0 0);
5  --foreground: oklch(0.13 0.043 265.1);
6  --card: oklch(1 0 0);
7  --card-foreground: oklch(0.13 0.043 265.1);
8  --popover: oklch(1 0 0);
9  --popover-foreground: oklch(0.13 0.043 265.1);
10  --primary: oklch(0.546 0.215 262.9);
11  --primary-foreground: oklch(1 0 0);
12  --secondary: oklch(0.968 0.007 247.9);
13  --secondary-foreground: oklch(0.208 0.042 266.4);
14  --muted: oklch(0.968 0.007 247.9);
15  --muted-foreground: oklch(0.554 0.046 257.5);
16  --accent: oklch(0.968 0.007 247.9);
17  --accent-foreground: oklch(0.208 0.042 266.4);
18  --destructive: oklch(0.583 0.239 28.5);
19  --border: oklch(0.929 0.013 255.5);
20  --input: oklch(0.929 0.013 255.5);
21  --ring: oklch(0.546 0.215 262.9);
22}
23
24.dark {
25  --background: oklch(0.13 0.043 265.1);
26  --foreground: oklch(0.984 0.003 247.9);
27  --card: oklch(0.208 0.042 266.4);
28  --card-foreground: oklch(0.984 0.003 247.9);
29  --popover: oklch(0.208 0.042 266.4);
30  --popover-foreground: oklch(0.984 0.003 247.9);
31  --primary: oklch(0.623 0.188 259.8);
32  --primary-foreground: oklch(1 0 0);
33  --secondary: oklch(0.28 0.041 260.3);
34  --secondary-foreground: oklch(0.984 0.003 247.9);
35  --muted: oklch(0.28 0.041 260.3);
36  --muted-foreground: oklch(0.704 0.04 257);
37  --accent: oklch(0.28 0.041 260.3);
38  --accent-foreground: oklch(0.984 0.003 247.9);
39  --destructive: oklch(0.702 0.189 22.2);
40  --border: oklch(0.322 0.042 258.3);
41  --input: oklch(0.372 0.045 257.4);
42  --ring: oklch(0.623 0.188 259.8);
43}
44
45/* font-family: ui-sans-serif, system-ui, sans-serif */