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.
Shades of Purple (Super Dark) is a shadcn/ui theme built around a vivid yellow primary color (#fad000) with deep indigo accents (#343262). The light mode uses an indigo-tinted background (#19182f). Dark mode keeps the vivid yellow primary (#fad000) on an indigo-tinted background (#19182f).
| Token | Light | Dark |
|---|---|---|
| Background | #19182fblack | #19182fblack |
| Foreground | #ffffffwhite | #ffffffwhite |
| Card | #161529black | #161529black |
| Card foreground | #ffffffwhite | #ffffffwhite |
| Popover | #141325black | #141325black |
| Popover foreground | #ffffffwhite | #ffffffwhite |
| Primary | #fad000gold | #fad000gold |
| Primary foreground | #2e2600black | #2e2600black |
| Secondary | #534d2ddarkolivegreen | #534d2ddarkolivegreen |
| Secondary foreground | #e4e0cdgainsboro | #e4e0cdgainsboro |
| Muted | #292833darkslategray | #292833darkslategray |
| Muted foreground | #a5a4b7darkgray | #a5a4b7darkgray |
| Accent | #343262darkslategray | #343262darkslategray |
| Accent foreground | #dadaecgainsboro | #dadaecgainsboro |
| Destructive | #f5120ared | #f5120ared |
| Destructive foreground | #ffffffwhite | #ffffffwhite |
| Border | #26253cdarkslategray | #26253cdarkslategray |
| Input | #2c2b45darkslategray | #2c2b45darkslategray |
| Ring | #fad000gold | #fad000gold |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 17.30:1 | AAA |
| Text on card | 17.97:1 | AAA |
| Primary button | 10.12:1 | AAA |
| Secondary button | 6.46:1 | AA |
| Muted text | 5.92:1 | AA |
| Accent | 8.58:1 | AAA |
| Destructive | 4.22:1 | AA Large |
| Text on background | 17.30:1 | AAA |
| Text on card | 17.97:1 | AAA |
| Primary button | 10.12:1 | AAA |
| Secondary button | 6.46:1 | AA |
| Muted text | 5.92:1 | AA |
| Accent | 8.58:1 | AAA |
| Destructive | 4.22:1 | AA Large |
Paste this into your globals.css to use Shades of Purple (Super Dark) in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.223 0.045 284.382);
--foreground: oklch(1 0 180);
--muted: oklch(0.284 0.02 287.338);
--muted-foreground: oklch(0.725 0.028 287.971);
--popover: oklch(0.197 0.037 284.784);
--popover-foreground: oklch(1 0 180);
--card: oklch(0.206 0.04 284.637);
--card-foreground: oklch(1 0 180);
--border: oklch(0.278 0.041 285.706);
--input: oklch(0.304 0.046 285.587);
--primary: oklch(0.869 0.178 94.261);
--primary-foreground: oklch(0.27 0.056 97.716);
--secondary: oklch(0.416 0.049 98.29);
--secondary-foreground: oklch(0.906 0.026 97.622);
--accent: oklch(0.344 0.083 283.355);
--accent-foreground: oklch(0.893 0.025 287.41);
--destructive: oklch(0.613 0.246 29.287);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.869 0.178 94.261);
--chart-1: oklch(0.869 0.178 94.261);
--chart-2: oklch(0.416 0.049 98.29);
--chart-3: oklch(0.344 0.083 283.355);
--chart-4: oklch(0.45 0.054 98.292);
--chart-5: oklch(0.877 0.18 94.014);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.223 0.045 284.382);
--foreground: oklch(1 0 180);
--muted: oklch(0.284 0.02 287.338);
--muted-foreground: oklch(0.725 0.028 287.971);
--popover: oklch(0.197 0.037 284.784);
--popover-foreground: oklch(1 0 180);
--card: oklch(0.206 0.04 284.637);
--card-foreground: oklch(1 0 180);
--border: oklch(0.278 0.041 285.706);
--input: oklch(0.304 0.046 285.587);
--primary: oklch(0.869 0.178 94.261);
--primary-foreground: oklch(0.27 0.056 97.716);
--secondary: oklch(0.416 0.049 98.29);
--secondary-foreground: oklch(0.906 0.026 97.622);
--accent: oklch(0.344 0.083 283.355);
--accent-foreground: oklch(0.893 0.025 287.41);
--destructive: oklch(0.613 0.246 29.287);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.869 0.178 94.261);
--chart-1: oklch(0.869 0.178 94.261);
--chart-2: oklch(0.416 0.049 98.29);
--chart-3: oklch(0.344 0.083 283.355);
--chart-4: oklch(0.45 0.054 98.292);
--chart-5: oklch(0.877 0.18 94.014);
}