Generate feedback colors (success, warning, error, and info) for shadcn/ui
Go to generatorUsed by 4k+ developers. Want me to build your product next? Let's work together.
Banner Light (rainglow) is a shadcn/ui theme built around a muted deep indigo primary color (#383348) with neutral gray accents (#d9d9d9). The light mode uses a neutral background (#ffffff). Dark mode keeps the muted deep indigo primary (#383348) on a neutral background (#ffffff).
| Token | Light | Dark |
|---|---|---|
| Background | #ffffffwhite | #ffffffwhite |
| Foreground | #383348darkslategray | #383348darkslategray |
| Card | #fafafasnow | #fafafasnow |
| Card foreground | #2c2839darkslategray | #2c2839darkslategray |
| Popover | #f7f7f7whitesmoke | #f7f7f7whitesmoke |
| Popover foreground | #201e2ablack | #201e2ablack |
| Primary | #383348darkslategray | #383348darkslategray |
| Primary foreground | #d3cfddlightgrey | #d3cfddlightgrey |
| Secondary | #bdbbc4silver | #bdbbc4silver |
| Secondary foreground | #252429darkslategray | #252429darkslategray |
| Muted | #e9e2e2gainsboro | #e9e2e2gainsboro |
| Muted foreground | #564343darkslategray | #564343darkslategray |
| Accent | #d9d9d9gainsboro | #d9d9d9gainsboro |
| Accent foreground | #404040darkslategray | #404040darkslategray |
| Destructive | #651606maroon | #651606maroon |
| Destructive foreground | #f9b2a4lightpink | #f9b2a4lightpink |
| Border | #f2f2f2whitesmoke | #f2f2f2whitesmoke |
| Input | #ebebeblinen | #ebebeblinen |
| Ring | #383348darkslategray | #383348darkslategray |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 12.10:1 | AAA |
| Text on card | 13.67:1 | AAA |
| Primary button | 7.94:1 | AAA |
| Secondary button | 8.10:1 | AAA |
| Muted text | 7.22:1 | AAA |
| Accent | 7.32:1 | AAA |
| Destructive | 7.15:1 | AAA |
| Text on background | 12.10:1 | AAA |
| Text on card | 13.67:1 | AAA |
| Primary button | 7.94:1 | AAA |
| Secondary button | 8.10:1 | AAA |
| Muted text | 7.22:1 | AAA |
| Accent | 7.32:1 | AAA |
| Destructive | 7.15:1 | AAA |
Paste this into your globals.css to use Banner Light (rainglow) in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(1 0 180);
--foreground: oklch(0.334 0.037 295.046);
--muted: oklch(0.919 0.007 17.278);
--muted-foreground: oklch(0.404 0.025 18.259);
--popover: oklch(0.977 0 180);
--popover-foreground: oklch(0.242 0.023 295.314);
--card: oklch(0.985 0 180);
--card-foreground: oklch(0.289 0.03 295.154);
--border: oklch(0.962 0 180);
--input: oklch(0.939 0 180);
--primary: oklch(0.334 0.037 295.046);
--primary-foreground: oklch(0.862 0.019 296.676);
--secondary: oklch(0.796 0.013 296.793);
--secondary-foreground: oklch(0.262 0.01 296.387);
--accent: oklch(0.885 0 180);
--accent-foreground: oklch(0.371 0 168.69);
--destructive: oklch(0.335 0.114 33.096);
--destructive-foreground: oklch(0.827 0.086 31.61);
--ring: oklch(0.334 0.037 295.046);
--chart-1: oklch(0.334 0.037 295.046);
--chart-2: oklch(0.796 0.013 296.793);
--chart-3: oklch(0.885 0 180);
--chart-4: oklch(0.821 0.011 296.837);
--chart-5: oklch(0.33 0.043 294.626);
}
.dark {
--radius: 0.5rem;
--background: oklch(1 0 180);
--foreground: oklch(0.334 0.037 295.046);
--muted: oklch(0.919 0.007 17.278);
--muted-foreground: oklch(0.404 0.025 18.259);
--popover: oklch(0.977 0 180);
--popover-foreground: oklch(0.242 0.023 295.314);
--card: oklch(0.985 0 180);
--card-foreground: oklch(0.289 0.03 295.154);
--border: oklch(0.962 0 180);
--input: oklch(0.939 0 180);
--primary: oklch(0.334 0.037 295.046);
--primary-foreground: oklch(0.862 0.019 296.676);
--secondary: oklch(0.796 0.013 296.793);
--secondary-foreground: oklch(0.262 0.01 296.387);
--accent: oklch(0.885 0 180);
--accent-foreground: oklch(0.371 0 168.69);
--destructive: oklch(0.335 0.114 33.096);
--destructive-foreground: oklch(0.827 0.086 31.61);
--ring: oklch(0.334 0.037 295.046);
--chart-1: oklch(0.334 0.037 295.046);
--chart-2: oklch(0.796 0.013 296.793);
--chart-3: oklch(0.885 0 180);
--chart-4: oklch(0.821 0.011 296.837);
--chart-5: oklch(0.33 0.043 294.626);
}