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.
Agonizing is a shadcn/ui theme built around a blue primary color (#819ac1) with indigo accents (#8781c1). The light mode uses a neutral background (#ffffff). Dark mode keeps the blue primary (#819ac1) on a blue-tinted background (#05070a).
| Token | Light | Dark |
|---|---|---|
| Background | #ffffffwhite | #05070ablack |
| Foreground | #020508black | #f9fafbghostwhite |
| Card | #fcfcfcsnow | #06090eblack |
| Card foreground | #010204black | #fcfcfdwhite |
| Popover | #fcfcfcsnow | #06090eblack |
| Popover foreground | #010204black | #fcfcfdwhite |
| Primary | #819ac1lightslategray | #819ac1lightslategray |
| Primary foreground | #05070ablack | #05070ablack |
| Secondary | #81bac1mediumaquamarine | #81bac1mediumaquamarine |
| Secondary foreground | #050a0ablack | #050a0ablack |
| Muted | #d6e8eagainsboro | #152729black |
| Muted foreground | #595e5fdimgray | #a0a5a6darkgray |
| Accent | #8781c1mediumpurple | #8781c1mediumpurple |
| Accent foreground | #000000black | #000000black |
| Destructive | #75150amaroon | #ed4331tomato |
| Destructive foreground | #f9bfb9lightpink | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #819ac1lightslategray | #819ac1lightslategray |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 20.43:1 | AAA |
| Text on card | 20.30:1 | AAA |
| Primary button | 7.04:1 | AAA |
| Secondary button | 9.24:1 | AAA |
| Muted text | 5.22:1 | AA |
| Accent | 5.91:1 | AA |
| Destructive | 7.04:1 | AAA |
| Text on background | 19.29:1 | AAA |
| Text on card | 19.40:1 | AAA |
| Primary button | 7.04:1 | AAA |
| Secondary button | 9.24:1 | AAA |
| Muted text | 6.24:1 | AA |
| Accent | 5.91:1 | AA |
| Destructive | 3.84:1 | AA Large |
Paste this into your globals.css to use Agonizing in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(1 0 180);
--foreground: oklch(0.109 0.013 250.14);
--muted: oklch(0.92 0.02 204.842);
--muted-foreground: oklch(0.478 0.006 204.893);
--popover: oklch(0.992 0 161.565);
--popover-foreground: oklch(0.086 0.01 250.14);
--card: oklch(0.992 0 161.565);
--card-foreground: oklch(0.086 0.01 250.14);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.681 0.064 258.343);
--primary-foreground: oklch(0.128 0.009 253.556);
--secondary: oklch(0.752 0.06 204.697);
--secondary-foreground: oklch(0.138 0.009 203.207);
--accent: oklch(0.633 0.095 287.93);
--accent-foreground: oklch(0 0 0);
--destructive: oklch(0.367 0.132 30.479);
--destructive-foreground: oklch(0.855 0.068 25.83);
--ring: oklch(0.681 0.064 258.343);
--chart-1: oklch(0.681 0.064 258.343);
--chart-2: oklch(0.752 0.06 204.697);
--chart-3: oklch(0.633 0.095 287.93);
--chart-4: oklch(0.773 0.056 204.686);
--chart-5: oklch(0.679 0.07 258.334);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.127 0.01 253.132);
--foreground: oklch(0.984 0.002 258.317);
--muted: oklch(0.257 0.024 204.751);
--muted-foreground: oklch(0.719 0.006 204.93);
--popover: oklch(0.141 0.012 255.197);
--popover-foreground: oklch(0.992 0.001 258.315);
--card: oklch(0.141 0.012 255.197);
--card-foreground: oklch(0.992 0.001 258.315);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.681 0.064 258.343);
--primary-foreground: oklch(0.128 0.009 253.556);
--secondary: oklch(0.752 0.06 204.697);
--secondary-foreground: oklch(0.138 0.009 203.207);
--accent: oklch(0.633 0.095 287.93);
--accent-foreground: oklch(0 0 0);
--destructive: oklch(0.631 0.209 30.166);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.681 0.064 258.343);
--chart-1: oklch(0.681 0.064 258.343);
--chart-2: oklch(0.752 0.06 204.697);
--chart-3: oklch(0.633 0.095 287.93);
--chart-4: oklch(0.773 0.056 204.686);
--chart-5: oklch(0.679 0.07 258.334);
}