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.
Angelic is a shadcn/ui theme built around a vivid light violet primary color (#cab9fe) with vivid light green accents (#edfeb9). The light mode uses a neutral background (#f9f8fc). Dark mode keeps the vivid light violet primary (#cab9fe) on a violet-tinted background (#070410).
| Token | Light | Dark |
|---|---|---|
| Background | #f9f8fcghostwhite | #070410black |
| Foreground | #020104black | #ffffffwhite |
| Card | #f6f5fawhitesmoke | #090514black |
| Card foreground | #000000black | #ffffffwhite |
| Popover | #f6f5fawhitesmoke | #090514black |
| Popover foreground | #000000black | #ffffffwhite |
| Primary | #cab9fethistle | #cab9fethistle |
| Primary foreground | #220283midnightblue | #220283midnightblue |
| Secondary | #edfeb9palegoldenrod | #edfeb9palegoldenrod |
| Secondary foreground | #171e00black | #171e00black |
| Muted | #e5e7degainsboro | #1e2118black |
| Muted foreground | #42443cdarkslategray | #c1c3bbsilver |
| Accent | #edfeb9palegoldenrod | #edfeb9palegoldenrod |
| Accent foreground | #171e00black | #171e00black |
| Destructive | #692407maroon | #f26b31tomato |
| Destructive foreground | #f9c1a9lightpink | #000000black |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #cab9fethistle | #cab9fethistle |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 19.68:1 | AAA |
| Text on card | 19.30:1 | AAA |
| Primary button | 8.43:1 | AAA |
| Secondary button | 15.91:1 | AAA |
| Muted text | 7.94:1 | AAA |
| Accent | 15.91:1 | AAA |
| Destructive | 7.08:1 | AAA |
| Text on background | 20.28:1 | AAA |
| Text on card | 20.09:1 | AAA |
| Primary button | 8.43:1 | AAA |
| Secondary button | 15.91:1 | AAA |
| Muted text | 9.20:1 | AAA |
| Accent | 15.91:1 | AAA |
| Destructive | 6.90:1 | AA |
Paste this into your globals.css to use Angelic in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.981 0.005 297.733);
--foreground: oklch(0.075 0.021 297.376);
--muted: oklch(0.925 0.012 118.059);
--muted-foreground: oklch(0.381 0.013 118.428);
--popover: oklch(0.971 0.008 297.685);
--popover-foreground: oklch(0 0 0);
--card: oklch(0.971 0.008 297.685);
--card-foreground: oklch(0 0 0);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.823 0.097 295.655);
--primary-foreground: oklch(0.295 0.18 276.984);
--secondary: oklch(0.968 0.091 119.523);
--secondary-foreground: oklch(0.22 0.052 121.902);
--accent: oklch(0.968 0.091 119.523);
--accent-foreground: oklch(0.22 0.052 121.902);
--destructive: oklch(0.362 0.106 40.261);
--destructive-foreground: oklch(0.855 0.073 44.306);
--ring: oklch(0.823 0.097 295.655);
--chart-1: oklch(0.823 0.097 295.655);
--chart-2: oklch(0.968 0.091 119.523);
--chart-3: oklch(0.968 0.091 119.523);
--chart-4: oklch(0.974 0.072 119.147);
--chart-5: oklch(0.821 0.101 295.578);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.124 0.029 296.176);
--foreground: oklch(1 0 180);
--muted: oklch(0.24 0.017 119.079);
--muted-foreground: oklch(0.814 0.011 118.059);
--popover: oklch(0.134 0.034 294.767);
--popover-foreground: oklch(1 0 180);
--card: oklch(0.134 0.034 294.767);
--card-foreground: oklch(1 0 180);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.823 0.097 295.655);
--primary-foreground: oklch(0.295 0.18 276.984);
--secondary: oklch(0.968 0.091 119.523);
--secondary-foreground: oklch(0.22 0.052 121.902);
--accent: oklch(0.968 0.091 119.523);
--accent-foreground: oklch(0.22 0.052 121.902);
--destructive: oklch(0.684 0.18 41.543);
--destructive-foreground: oklch(0 0 0);
--ring: oklch(0.823 0.097 295.655);
--chart-1: oklch(0.823 0.097 295.655);
--chart-2: oklch(0.968 0.091 119.523);
--chart-3: oklch(0.968 0.091 119.523);
--chart-4: oklch(0.974 0.072 119.147);
--chart-5: oklch(0.821 0.101 295.578);
}