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.
Creator is a shadcn/ui theme built around a light purple primary color (#e4aae4) with light green accents (#aae4aa). The light mode uses a neutral background (#ffffff). Dark mode keeps the light purple primary (#e4aae4) on a purple-tinted background (#0b050b).
| Token | Light | Dark |
|---|---|---|
| Background | #ffffffwhite | #0b050bblack |
| Foreground | #090109black | #fbf9fbsnow |
| Card | #ffffffwhite | #0b050bblack |
| Card foreground | #090109black | #fbf9fbsnow |
| Popover | #ffffffwhite | #0b050bblack |
| Popover foreground | #090109black | #fbf9fbsnow |
| Primary | #e4aae4plum | #e4aae4plum |
| Primary foreground | #461646midnightblue | #461646midnightblue |
| Secondary | #aae4aapalegreen | #aae4aapalegreen |
| Secondary foreground | #164616darkgreen | #164616darkgreen |
| Muted | #e9f1e9honeydew | #0e160eblack |
| Muted foreground | #556855dimgray | #97aa97darkseagreen |
| Accent | #aae4aapalegreen | #aae4aapalegreen |
| Accent foreground | #164616darkgreen | #164616darkgreen |
| Destructive | #8e3001saddlebrown | #fe742ftomato |
| Destructive foreground | #ffd6c2peachpuff | #000000black |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #e4aae4plum | #e4aae4plum |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 20.59:1 | AAA |
| Text on card | 20.59:1 | AAA |
| Primary button | 7.61:1 | AAA |
| Secondary button | 7.48:1 | AAA |
| Muted text | 5.21:1 | AA |
| Accent | 7.48:1 | AAA |
| Destructive | 6.08:1 | AA |
| Text on background | 19.30:1 | AAA |
| Text on card | 19.30:1 | AAA |
| Primary button | 7.61:1 | AAA |
| Secondary button | 7.48:1 | AAA |
| Muted text | 7.47:1 | AAA |
| Accent | 7.48:1 | AAA |
| Destructive | 7.74:1 | AAA |
Paste this into your globals.css to use Creator in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(1 0 180);
--foreground: oklch(0.106 0.034 327.637);
--muted: oklch(0.95 0.014 145.465);
--muted-foreground: oklch(0.495 0.037 144.984);
--popover: oklch(1 0 180);
--popover-foreground: oklch(0.106 0.034 327.637);
--card: oklch(1 0 180);
--card-foreground: oklch(0.106 0.034 327.637);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.81 0.102 326.471);
--primary-foreground: oklch(0.297 0.099 327.71);
--secondary: oklch(0.864 0.1 144.654);
--secondary-foreground: oklch(0.349 0.092 143.277);
--accent: oklch(0.864 0.1 144.654);
--accent-foreground: oklch(0.349 0.092 143.277);
--destructive: oklch(0.443 0.137 40.611);
--destructive-foreground: oklch(0.906 0.053 48.114);
--ring: oklch(0.81 0.102 326.471);
--chart-1: oklch(0.81 0.102 326.471);
--chart-2: oklch(0.864 0.1 144.654);
--chart-3: oklch(0.864 0.1 144.654);
--chart-4: oklch(0.882 0.086 144.803);
--chart-5: oklch(0.809 0.108 326.519);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.127 0.02 326.696);
--foreground: oklch(0.984 0.004 325.605);
--muted: oklch(0.189 0.021 144.707);
--muted-foreground: oklch(0.718 0.034 145.208);
--popover: oklch(0.127 0.02 326.696);
--popover-foreground: oklch(0.984 0.004 325.605);
--card: oklch(0.127 0.02 326.696);
--card-foreground: oklch(0.984 0.004 325.605);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.81 0.102 326.471);
--primary-foreground: oklch(0.297 0.099 327.71);
--secondary: oklch(0.864 0.1 144.654);
--secondary-foreground: oklch(0.349 0.092 143.277);
--accent: oklch(0.864 0.1 144.654);
--accent-foreground: oklch(0.349 0.092 143.277);
--destructive: oklch(0.715 0.186 43.794);
--destructive-foreground: oklch(0 0 0);
--ring: oklch(0.81 0.102 326.471);
--chart-1: oklch(0.81 0.102 326.471);
--chart-2: oklch(0.864 0.1 144.654);
--chart-3: oklch(0.864 0.1 144.654);
--chart-4: oklch(0.882 0.086 144.803);
--chart-5: oklch(0.809 0.108 326.519);
}