Arne 16

Arne

7 rows

500

950

Red

Green

Blue

Amber

Neutral

White

Black

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/colors/arne-16

Copy and paste the following code into your project.

1
@theme {
2
  --color-arne-16-red-50: oklch(68.081% 0.1429 5.961);
3
  --color-arne-16-red-500: oklch(52.391% 0.1865 22.685);
4
  --color-arne-16-red-950: oklch(36.506% 0.0329 73.935);
5
  --color-arne-16-green-50: oklch(79.254% 0.1859 123.978);
6
  --color-arne-16-green-500: oklch(56.323% 0.1567 136.699);
7
  --color-arne-16-green-950: oklch(38.383% 0.0322 214.371);
8
  --color-arne-16-blue-50: oklch(87.08% 0.0512 227.17);
9
  --color-arne-16-blue-500: oklch(68.752% 0.1532 244.783);
10
  --color-arne-16-blue-950: oklch(43.667% 0.102 241.103);
11
  --color-arne-16-amber-50: oklch(90.707% 0.1406 99.426);
12
  --color-arne-16-amber-500: oklch(72.144% 0.1536 57.674);
13
  --color-arne-16-amber-950: oklch(56.287% 0.1136 61.927);
14
  --color-arne-16-white: oklch(100% 0 0);
15
  --color-arne-16-neutral-50: oklch(69.601% 0 0);
16
  --color-arne-16-neutral-950: oklch(26.397% 0.0274 251.054);
17
  --color-arne-16-black: oklch(0% 0 0);
18
}

Include the following CSS vars in your Tailwind main file

1
:root {
2
  --background: var(--color-arne-16-white);
3
  --foreground: var(--color-arne-16-neutral-950);
4
  --card: var(--color-arne-16-white);
5
  --card-foreground: var(--color-arne-16-neutral-950);
6
  --popover: var(--color-arne-16-white);
7
  --popover-foreground: var(--color-arne-16-neutral-950);
8
  --muted: var(--color-arne-16-white);
9
  --muted-foreground: var(--color-arne-16-neutral-50);
10
  --accent: var(--color-arne-16-white);
11
  --accent-foreground: var(--color-arne-16-black);
12
  --border: var(--color-arne-16-neutral-50);
13
  --input: var(--color-arne-16-neutral-50);
14
  --ring: var(--color-arne-16-black);
15
  --primary: var(--color-arne-16-blue-50);
16
  --primary-foreground: var(--color-arne-16-blue-950);
17
  --info: var(--color-arne-16-blue-50);
18
  --info-foreground: var(--color-arne-16-blue-950);
19
  --success: var(--color-arne-16-green-50);
20
  --success-foreground: var(--color-arne-16-green-950);
21
  --warning: var(--color-arne-16-amber-50);
22
  --warning-foreground: var(--color-arne-16-amber-950);
23
  --danger: var(--color-arne-16-red-50);
24
  --danger-foreground: var(--color-arne-16-red-950);
25
}
26
.dark,
27
[data-theme="dark"] {
28
  --background: var(--color-arne-16-black);
29
  --foreground: var(--color-arne-16-neutral-50);
30
  --card: var(--color-arne-16-black);
31
  --card-foreground: var(--color-arne-16-neutral-50);
32
  --popover: var(--color-arne-16-black);
33
  --popover-foreground: var(--color-arne-16-neutral-50);
34
  --muted: var(--color-arne-16-black);
35
  --muted-foreground: var(--color-arne-16-neutral-950);
36
  --accent: var(--color-arne-16-black);
37
  --accent-foreground: var(--color-arne-16-white);
38
  --border: var(--color-arne-16-neutral-50);
39
  --input: var(--color-arne-16-neutral-50);
40
  --ring: var(--color-arne-16-white);
41
  --primary: var(--color-arne-16-blue-500);
42
  --primary-foreground: var(--color-arne-16-blue-50);
43
  --info: var(--color-arne-16-blue-950);
44
  --info-foreground: var(--color-arne-16-blue-500);
45
  --success: var(--color-arne-16-green-500);
46
  --success-foreground: var(--color-arne-16-green-50);
47
  --warning: var(--color-arne-16-amber-500);
48
  --warning-foreground: var(--color-arne-16-amber-50);
49
  --danger: var(--color-arne-16-red-500);
50
  --danger-foreground: var(--color-arne-16-red-50);
51
}

Arne 16

Installation

Copy and paste the following code into your project.

Include the following CSS vars in your Tailwind main file

Update the import paths to match your project setup.