DMG-01

DMG-01 is the official model code for the original Nintendo Game Boy, launched in Japan in April 1989

4 rows

200

700

950

Red

Green

Blue

Accurate

Installation

Command
Manual

pnpm dlx shadcn@latest add pxl-ui/registry/colors/dmg-01

Copy and paste the following code into your project.

1
@import 'tailwindcss';
2

3
@theme {
4
  --color-dmg-01-accurate-50: oklch(67.674% 0.1182 111.419);
5
  --color-dmg-01-accurate-200: oklch(48.534% 0.1084 130.82);
6
  --color-dmg-01-accurate-700: oklch(34.244% 0.1035 142.308);
7
  --color-dmg-01-accurate-950: oklch(26.277% 0.0573 130.29);
8

9
  --color-dmg-01-red-50: oklch(87.541% 0.077 94.523);
10
  --color-dmg-01-red-200: oklch(72.125% 0.0789 95.362);
11
  --color-dmg-01-red-700: oklch(55.34% 0.0257 78.067);
12
  --color-dmg-01-red-950: oklch(33.674% 0.0266 104.745);
13

14
  --color-dmg-01-green-50: oklch(89.931% 0.1076 118.052);
15
  --color-dmg-01-green-200: oklch(77.897% 0.1559 118.343);
16
  --color-dmg-01-green-700: oklch(54.696% 0.1118 135.612);
17
  --color-dmg-01-green-950: oklch(35.935% 0.0573 157.558);
18

19
  --color-dmg-01-blue-50: oklch(94.1% 0.02 164.575);
20
  --color-dmg-01-blue-200: oklch(78.507% 0.0345 156.34);
21
  --color-dmg-01-blue-700: oklch(53.795% 0.0516 167.481);
22
  --color-dmg-01-blue-950: oklch(29.032% 0.029 195.67);
23
}

Include the following CSS vars in your Tailwind main file

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

DMG-01

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.