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.
Heavy is a shadcn/ui theme built around a muted yellow primary color (#c1bc9a) with muted green accents (#b2c19a). The light mode uses a neutral background (#ffffff). Dark mode keeps the muted yellow primary (#c1bc9a) on a neutral background (#070703).
| Token | Light | Dark |
|---|---|---|
| Background | #ffffffwhite | #070703black |
| Foreground | #141206black | #f9f8f6whitesmoke |
| Card | #ffffffwhite | #070703black |
| Card foreground | #141206black | #f9f8f6whitesmoke |
| Popover | #ffffffwhite | #070703black |
| Popover foreground | #141206black | #f9f8f6whitesmoke |
| Primary | #c1bc9atan | #c1bc9atan |
| Primary foreground | #191810black | #191810black |
| Secondary | #c1a99atan | #c1a99atan |
| Secondary foreground | #191310black | #191310black |
| Muted | #f2ece9linen | #16110dblack |
| Muted foreground | #5e5855dimgray | #aaa5a1darkgray |
| Accent | #b2c19adarkgray | #b2c19adarkgray |
| Accent foreground | #161910black | #161910black |
| Destructive | #c20805firebrick | #f90a06red |
| Destructive foreground | #fffafasnow | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #c1bc9atan | #c1bc9atan |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 18.76:1 | AAA |
| Text on card | 18.76:1 | AAA |
| Primary button | 9.29:1 | AAA |
| Secondary button | 8.22:1 | AAA |
| Muted text | 5.97:1 | AA |
| Accent | 9.30:1 | AAA |
| Destructive | 6.09:1 | AA |
| Text on background | 19.00:1 | AAA |
| Text on card | 19.00:1 | AAA |
| Primary button | 9.29:1 | AAA |
| Secondary button | 8.22:1 | AAA |
| Muted text | 7.68:1 | AAA |
| Accent | 9.30:1 | AAA |
| Destructive | 4.14:1 | AA Large |
Paste this into your globals.css to use Heavy in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(1 0 180);
--foreground: oklch(0.181 0.024 102.21);
--muted: oklch(0.947 0.008 54.396);
--muted-foreground: oklch(0.465 0.009 54.241);
--popover: oklch(1 0 180);
--popover-foreground: oklch(0.181 0.024 102.21);
--card: oklch(1 0 180);
--card-foreground: oklch(0.181 0.024 102.21);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.791 0.047 101.163);
--primary-foreground: oklch(0.208 0.016 101.378);
--secondary: oklch(0.751 0.035 53.876);
--secondary-foreground: oklch(0.194 0.012 53.648);
--accent: oklch(0.789 0.056 124.724);
--accent-foreground: oklch(0.207 0.019 125.093);
--destructive: oklch(0.513 0.207 29.185);
--destructive-foreground: oklch(0.989 0.005 18.44);
--ring: oklch(0.791 0.047 101.163);
--chart-1: oklch(0.791 0.047 101.163);
--chart-2: oklch(0.751 0.035 53.876);
--chart-3: oklch(0.789 0.056 124.724);
--chart-4: oklch(0.775 0.032 53.956);
--chart-5: oklch(0.797 0.053 101.242);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.127 0.014 103.221);
--foreground: oklch(0.98 0.003 100.381);
--muted: oklch(0.182 0.011 53.662);
--muted-foreground: oklch(0.725 0.008 54.353);
--popover: oklch(0.127 0.014 103.221);
--popover-foreground: oklch(0.98 0.003 100.381);
--card: oklch(0.127 0.014 103.221);
--card-foreground: oklch(0.98 0.003 100.381);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.791 0.047 101.163);
--primary-foreground: oklch(0.208 0.016 101.378);
--secondary: oklch(0.751 0.035 53.876);
--secondary-foreground: oklch(0.194 0.012 53.648);
--accent: oklch(0.789 0.056 124.724);
--accent-foreground: oklch(0.207 0.019 125.093);
--destructive: oklch(0.618 0.251 29.198);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.791 0.047 101.163);
--chart-1: oklch(0.791 0.047 101.163);
--chart-2: oklch(0.751 0.035 53.876);
--chart-3: oklch(0.789 0.056 124.724);
--chart-4: oklch(0.775 0.032 53.956);
--chart-5: oklch(0.797 0.053 101.242);
}