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.
Third is a shadcn/ui theme built around a light green primary color (#bbe8cd) with light orange accents (#e8cdbb). The light mode uses a neutral background (#f7fdf9). Dark mode keeps the light green primary (#bbe8cd) on a neutral background (#000000).
| Token | Light | Dark |
|---|---|---|
| Background | #f7fdf9mintcream | #000000black |
| Foreground | #04160bblack | #fcfdfcwhite |
| Card | #f3fcf6mintcream | #030303black |
| Card foreground | #031109black | #ffffffwhite |
| Popover | #f3fcf6mintcream | #030303black |
| Popover foreground | #031109black | #ffffffwhite |
| Primary | #bbe8cdpowderblue | #bbe8cdpowderblue |
| Primary foreground | #1d5433darkslategray | #1d5433darkslategray |
| Secondary | #cdbbe8thistle | #cdbbe8thistle |
| Secondary foreground | #331d54midnightblue | #331d54midnightblue |
| Muted | #eeeaf6lavender | #0e0915black |
| Muted foreground | #49464edarkslategray | #b4b1b9silver |
| Accent | #e8cdbbwheat | #e8cdbbwheat |
| Accent foreground | #54331dsaddlebrown | #54331dsaddlebrown |
| Destructive | #832001maroon | #e83802orangered |
| Destructive foreground | #fec9b8peachpuff | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #bbe8cdpowderblue | #bbe8cdpowderblue |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 18.09:1 | AAA |
| Text on card | 18.41:1 | AAA |
| Primary button | 6.53:1 | AA |
| Secondary button | 8.18:1 | AAA |
| Muted text | 7.80:1 | AAA |
| Accent | 7.40:1 | AAA |
| Destructive | 6.56:1 | AA |
| Text on background | 20.59:1 | AAA |
| Text on card | 20.67:1 | AAA |
| Primary button | 6.53:1 | AA |
| Secondary button | 8.18:1 | AAA |
| Muted text | 9.28:1 | AAA |
| Accent | 7.40:1 | AAA |
| Destructive | 4.19:1 | AA Large |
Paste this into your globals.css to use Third in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.988 0.008 160.056);
--foreground: oklch(0.179 0.034 156.422);
--muted: oklch(0.943 0.017 304.085);
--muted-foreground: oklch(0.399 0.015 303.793);
--popover: oklch(0.982 0.011 159.964);
--popover-foreground: oklch(0.162 0.029 158.072);
--card: oklch(0.982 0.011 159.964);
--card-foreground: oklch(0.162 0.029 158.072);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.891 0.059 158.599);
--primary-foreground: oklch(0.398 0.08 153.966);
--secondary: oklch(0.821 0.065 303.205);
--secondary-foreground: oklch(0.29 0.096 298.669);
--accent: oklch(0.865 0.039 55.812);
--accent-foreground: oklch(0.355 0.059 53.386);
--destructive: oklch(0.404 0.139 35.374);
--destructive-foreground: oklch(0.878 0.065 37.594);
--ring: oklch(0.891 0.059 158.599);
--chart-1: oklch(0.891 0.059 158.599);
--chart-2: oklch(0.821 0.065 303.205);
--chart-3: oklch(0.865 0.039 55.812);
--chart-4: oklch(0.851 0.054 303.439);
--chart-5: oklch(0.893 0.063 158.499);
}
.dark {
--radius: 0.5rem;
--background: oklch(0 0 0);
--foreground: oklch(0.993 0.002 160.192);
--muted: oklch(0.154 0.027 301.822);
--muted-foreground: oklch(0.765 0.013 304.1);
--popover: oklch(0.092 0 180);
--popover-foreground: oklch(1 0 180);
--card: oklch(0.092 0 180);
--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.891 0.059 158.599);
--primary-foreground: oklch(0.398 0.08 153.966);
--secondary: oklch(0.821 0.065 303.205);
--secondary-foreground: oklch(0.29 0.096 298.669);
--accent: oklch(0.865 0.039 55.812);
--accent-foreground: oklch(0.355 0.059 53.386);
--destructive: oklch(0.61 0.218 34.112);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.891 0.059 158.599);
--chart-1: oklch(0.891 0.059 158.599);
--chart-2: oklch(0.821 0.065 303.205);
--chart-3: oklch(0.865 0.039 55.812);
--chart-4: oklch(0.851 0.054 303.439);
--chart-5: oklch(0.893 0.063 158.499);
}