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.
Situation is a shadcn/ui theme built around a neutral gray primary color (#b5b5b5) with neutral gray accents (#b5b5b5). The light mode uses a neutral background (#fefbfb). Dark mode keeps the neutral gray primary (#b5b5b5) on a red-tinted background (#100505).
| Token | Light | Dark |
|---|---|---|
| Background | #fefbfbsnow | #100505black |
| Foreground | #100404black | #f9f6f6whitesmoke |
| Card | #fdf7f7snow | #130606black |
| Card foreground | #0c0303black | #fbf9f9snow |
| Popover | #fefbfbsnow | #100505black |
| Popover foreground | #100404black | #f9f6f6whitesmoke |
| Primary | #b5b5b5silver | #b5b5b5silver |
| Primary foreground | #1c1c1cblack | #1c1c1cblack |
| Secondary | #b5b5b5silver | #b5b5b5silver |
| Secondary foreground | #1c1c1cblack | #1c1c1cblack |
| Muted | #e3cecelightgrey | #311c1cblack |
| Muted foreground | #544040darkslategray | #bfababdarkgray |
| Accent | #b5b5b5silver | #b5b5b5silver |
| Accent foreground | #1c1c1cblack | #1c1c1cblack |
| Destructive | #670404maroon | #f62c2ccrimson |
| Destructive foreground | #fba2a2lightpink | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #b5b5b5silver | #b5b5b5silver |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 19.57:1 | AAA |
| Text on card | 19.19:1 | AAA |
| Primary button | 8.31:1 | AAA |
| Secondary button | 8.31:1 | AAA |
| Muted text | 6.42:1 | AA |
| Accent | 8.31:1 | AAA |
| Destructive | 6.76:1 | AA |
| Text on background | 18.70:1 | AAA |
| Text on card | 18.92:1 | AAA |
| Primary button | 8.31:1 | AAA |
| Secondary button | 8.31:1 | AAA |
| Muted text | 7.34:1 | AAA |
| Accent | 8.31:1 | AAA |
| Destructive | 3.93:1 | AA Large |
Paste this into your globals.css to use Situation in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.99 0.004 17.218);
--foreground: oklch(0.132 0.025 21.127);
--muted: oklch(0.87 0.023 17.605);
--muted-foreground: oklch(0.392 0.029 18.465);
--popover: oklch(0.99 0.004 17.218);
--popover-foreground: oklch(0.132 0.025 21.127);
--card: oklch(0.98 0.007 17.28);
--card-foreground: oklch(0.118 0.022 20.929);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.773 0 180);
--primary-foreground: oklch(0.227 0 164.055);
--secondary: oklch(0.773 0 180);
--secondary-foreground: oklch(0.227 0 164.055);
--accent: oklch(0.773 0 180);
--accent-foreground: oklch(0.227 0 164.055);
--destructive: oklch(0.325 0.129 28.486);
--destructive-foreground: oklch(0.801 0.106 19.673);
--ring: oklch(0.773 0 180);
--chart-1: oklch(0.773 0 180);
--chart-2: oklch(0.773 0 180);
--chart-3: oklch(0.773 0 180);
--chart-4: oklch(0.797 0 180);
--chart-5: oklch(0.77 0.005 17.266);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.133 0.022 20.4);
--foreground: oklch(0.975 0.004 17.225);
--muted: oklch(0.253 0.033 19.603);
--muted-foreground: oklch(0.758 0.024 17.695);
--popover: oklch(0.133 0.022 20.4);
--popover-foreground: oklch(0.975 0.004 17.225);
--card: oklch(0.145 0.025 20.643);
--card-foreground: oklch(0.983 0.003 17.202);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.773 0 180);
--primary-foreground: oklch(0.227 0 164.055);
--secondary: oklch(0.773 0 180);
--secondary-foreground: oklch(0.227 0 164.055);
--accent: oklch(0.773 0 180);
--accent-foreground: oklch(0.227 0 164.055);
--destructive: oklch(0.629 0.234 27.281);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.773 0 180);
--chart-1: oklch(0.773 0 180);
--chart-2: oklch(0.773 0 180);
--chart-3: oklch(0.773 0 180);
--chart-4: oklch(0.797 0 180);
--chart-5: oklch(0.77 0.005 17.266);
}