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.
Scarce is a shadcn/ui theme built around a muted light yellow primary color (#f7f7f3) with muted light indigo accents (#f3f3f7). The light mode uses a neutral background (#fcfcf8). Dark mode keeps the muted light yellow primary (#f7f7f3) on a neutral background (#030302).
| Token | Light | Dark |
|---|---|---|
| Background | #fcfcf8snow | #030302black |
| Foreground | #121202black | #fbfbf9snow |
| Card | #fafaf4floralwhite | #070704black |
| Card foreground | #0e0e02black | #fdfdfcwhite |
| Popover | #fcfcf8snow | #030302black |
| Popover foreground | #121202black | #fbfbf9snow |
| Primary | #f7f7f3whitesmoke | #f7f7f3whitesmoke |
| Primary foreground | #323220darkslategray | #323220darkslategray |
| Secondary | #f3f3f7whitesmoke | #f3f3f7whitesmoke |
| Secondary foreground | #484870darkslateblue | #484870darkslateblue |
| Muted | #d7d7e0gainsboro | #1f1f28black |
| Muted foreground | #43435bdarkslategray | #a4a4bcdarkgray |
| Accent | #f3f3f7whitesmoke | #f3f3f7whitesmoke |
| Accent foreground | #484870darkslateblue | #484870darkslateblue |
| Destructive | #a60a07darkred | #f73936tomato |
| Destructive foreground | #fee2e2mistyrose | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #f7f7f3whitesmoke | #f7f7f3whitesmoke |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 18.31:1 | AAA |
| Text on card | 18.56:1 | AAA |
| Primary button | 12.12:1 | AAA |
| Secondary button | 7.75:1 | AAA |
| Muted text | 6.69:1 | AA |
| Accent | 7.75:1 | AAA |
| Destructive | 6.42:1 | AA |
| Text on background | 19.87:1 | AAA |
| Text on card | 19.85:1 | AAA |
| Primary button | 12.12:1 | AAA |
| Secondary button | 7.75:1 | AAA |
| Muted text | 6.67:1 | AA |
| Accent | 7.75:1 | AAA |
| Destructive | 3.75:1 | AA Large |
Paste this into your globals.css to use Scarce in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.99 0.005 106.492);
--foreground: oklch(0.178 0.033 109.316);
--muted: oklch(0.882 0.012 286.158);
--muted-foreground: oklch(0.394 0.04 284.419);
--popover: oklch(0.99 0.005 106.492);
--popover-foreground: oklch(0.178 0.033 109.316);
--card: oklch(0.984 0.008 106.539);
--card-foreground: oklch(0.158 0.029 109.281);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.975 0.006 106.509);
--primary-foreground: oklch(0.311 0.03 108.029);
--secondary: oklch(0.964 0.006 286.287);
--secondary-foreground: oklch(0.418 0.067 283.134);
--accent: oklch(0.964 0.006 286.287);
--accent-foreground: oklch(0.418 0.067 283.134);
--destructive: oklch(0.46 0.184 29.009);
--destructive-foreground: oklch(0.936 0.031 18.878);
--ring: oklch(0.975 0.006 106.509);
--chart-1: oklch(0.975 0.006 106.509);
--chart-2: oklch(0.964 0.006 286.287);
--chart-3: oklch(0.964 0.006 286.287);
--chart-4: oklch(0.991 0.001 286.373);
--chart-5: oklch(0.976 0.007 106.524);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.099 0.008 107.785);
--foreground: oklch(0.987 0.002 106.444);
--muted: oklch(0.245 0.016 285.142);
--muted-foreground: oklch(0.727 0.034 285.521);
--popover: oklch(0.099 0.008 107.785);
--popover-foreground: oklch(0.987 0.002 106.444);
--card: oklch(0.125 0.01 107.785);
--card-foreground: oklch(0.994 0.001 106.422);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.975 0.006 106.509);
--primary-foreground: oklch(0.311 0.03 108.029);
--secondary: oklch(0.964 0.006 286.287);
--secondary-foreground: oklch(0.418 0.067 283.134);
--accent: oklch(0.964 0.006 286.287);
--accent-foreground: oklch(0.418 0.067 283.134);
--destructive: oklch(0.639 0.225 27.075);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.975 0.006 106.509);
--chart-1: oklch(0.975 0.006 106.509);
--chart-2: oklch(0.964 0.006 286.287);
--chart-3: oklch(0.964 0.006 286.287);
--chart-4: oklch(0.991 0.001 286.373);
--chart-5: oklch(0.976 0.007 106.524);
}