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.
Suppression is a shadcn/ui theme built around a deep green primary color (#35542c) with deep red accents (#542c35). The light mode uses a neutral background (#fbfefb). Dark mode keeps the deep green primary (#35542c) on a neutral background (#020302).
| Token | Light | Dark |
|---|---|---|
| Background | #fbfefbwhite | #020302black |
| Foreground | #030802black | #ffffffwhite |
| Card | #f8fdf6mintcream | #040703black |
| Card foreground | #020401black | #ffffffwhite |
| Popover | #f8fdf6mintcream | #040703black |
| Popover foreground | #020401black | #ffffffwhite |
| Primary | #35542cdarkslategray | #35542cdarkslategray |
| Primary foreground | #d2e5cdlightgrey | #d2e5cdlightgrey |
| Secondary | #2c3554darkslategray | #2c3554darkslategray |
| Secondary foreground | #cdd2e5lightgrey | #cdd2e5lightgrey |
| Muted | #d0d4e2lightgrey | #1d212fdarkslategray |
| Muted foreground | #575c70dimgray | #8f94a8lightslategray |
| Accent | #542c35darkslategray | #542c35darkslategray |
| Accent foreground | #e5cdd2lightgrey | #e5cdd2lightgrey |
| Destructive | #a51a0dfirebrick | #ec2a18orangered |
| Destructive foreground | #fde9e7linen | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #35542cdarkslategray | #35542cdarkslategray |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 19.92:1 | AAA |
| Text on card | 20.01:1 | AAA |
| Primary button | 6.49:1 | AA |
| Secondary button | 8.03:1 | AAA |
| Muted text | 4.46:1 | AA Large |
| Accent | 7.84:1 | AAA |
| Destructive | 6.52:1 | AA |
| Text on background | 20.62:1 | AAA |
| Text on card | 20.26:1 | AAA |
| Primary button | 6.49:1 | AA |
| Secondary button | 8.03:1 | AAA |
| Muted text | 5.31:1 | AA |
| Accent | 7.84:1 | AAA |
| Destructive | 4.27:1 | AA Large |
Paste this into your globals.css to use Suppression in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.995 0.005 138.893);
--foreground: oklch(0.125 0.024 136.967);
--muted: oklch(0.87 0.02 273.59);
--muted-foreground: oklch(0.478 0.033 272.952);
--popover: oklch(0.989 0.011 138.895);
--popover-foreground: oklch(0.099 0.019 136.967);
--card: oklch(0.989 0.011 138.895);
--card-foreground: oklch(0.099 0.019 136.967);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.409 0.073 139.1);
--primary-foreground: oklch(0.9 0.038 138.908);
--secondary: oklch(0.334 0.056 271.344);
--secondary-foreground: oklch(0.866 0.026 273.501);
--accent: oklch(0.347 0.059 6.715);
--accent-foreground: oklch(0.869 0.027 2.92);
--destructive: oklch(0.465 0.175 30.068);
--destructive-foreground: oklch(0.95 0.022 23.818);
--ring: oklch(0.409 0.073 139.1);
--chart-1: oklch(0.409 0.073 139.1);
--chart-2: oklch(0.334 0.056 271.344);
--chart-3: oklch(0.347 0.059 6.715);
--chart-4: oklch(0.36 0.062 271.278);
--chart-5: oklch(0.413 0.079 139.144);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.096 0.01 137.867);
--foreground: oklch(1 0 180);
--muted: oklch(0.251 0.028 272.304);
--muted-foreground: oklch(0.669 0.031 273.297);
--popover: oklch(0.121 0.013 137.867);
--popover-foreground: oklch(1 0 180);
--card: oklch(0.121 0.013 137.867);
--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.409 0.073 139.1);
--primary-foreground: oklch(0.9 0.038 138.908);
--secondary: oklch(0.334 0.056 271.344);
--secondary-foreground: oklch(0.866 0.026 273.501);
--accent: oklch(0.347 0.059 6.715);
--accent-foreground: oklch(0.869 0.027 2.92);
--destructive: oklch(0.608 0.229 30.071);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.409 0.073 139.1);
--chart-1: oklch(0.409 0.073 139.1);
--chart-2: oklch(0.334 0.056 271.344);
--chart-3: oklch(0.347 0.059 6.715);
--chart-4: oklch(0.36 0.062 271.278);
--chart-5: oklch(0.413 0.079 139.144);
}