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.
Gathering is a shadcn/ui theme built around a vivid light teal primary color (#e3fcf5) with vivid light yellow accents (#fcf5e3). The light mode uses a neutral background (#fbfefd). Dark mode keeps the vivid light teal primary (#e3fcf5) on a teal-tinted background (#070e0c).
| Token | Light | Dark |
|---|---|---|
| Background | #fbfefdwhite | #070e0cblack |
| Foreground | #010403black | #fcfdfdwhite |
| Card | #fbfefdwhite | #070e0cblack |
| Card foreground | #010403black | #fcfdfdwhite |
| Popover | #fbfefdwhite | #070e0cblack |
| Popover foreground | #010403black | #fcfdfdwhite |
| Primary | #e3fcf5lightcyan | #e3fcf5lightcyan |
| Primary foreground | #074031darkslategray | #074031darkslategray |
| Secondary | #f5e3fclavender | #f5e3fclavender |
| Secondary foreground | #77119cdarkmagenta | #77119cdarkmagenta |
| Muted | #e9e5eblavender | #18141ablack |
| Muted foreground | #615865dimgray | #a49aa7darkgray |
| Accent | #fcf5e3oldlace | #fcf5e3oldlace |
| Accent foreground | #403107darkolivegreen | #403107darkolivegreen |
| Destructive | #97310csaddlebrown | #ed5b26chocolate |
| Destructive foreground | #fce3d9antiquewhite | #000000black |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #e3fcf5lightcyan | #e3fcf5lightcyan |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 20.25:1 | AAA |
| Text on card | 20.25:1 | AAA |
| Primary button | 10.92:1 | AAA |
| Secondary button | 7.39:1 | AAA |
| Muted text | 5.47:1 | AA |
| Accent | 11.66:1 | AAA |
| Destructive | 6.19:1 | AA |
| Text on background | 19.17:1 | AAA |
| Text on card | 19.17:1 | AAA |
| Primary button | 10.92:1 | AAA |
| Secondary button | 7.39:1 | AAA |
| Muted text | 6.71:1 | AA |
| Accent | 11.66:1 | AAA |
| Destructive | 6.14:1 | AA |
Paste this into your globals.css to use Gathering in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.994 0.003 178.708);
--foreground: oklch(0.099 0.012 178.887);
--muted: oklch(0.928 0.009 317.168);
--muted-foreground: oklch(0.473 0.024 317.073);
--popover: oklch(0.994 0.003 178.708);
--popover-foreground: oklch(0.099 0.012 178.887);
--card: oklch(0.994 0.003 178.708);
--card-foreground: oklch(0.099 0.012 178.887);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.971 0.027 177.965);
--primary-foreground: oklch(0.333 0.062 169.705);
--secondary: oklch(0.939 0.038 317.098);
--secondary-foreground: oklch(0.434 0.203 313.895);
--accent: oklch(0.972 0.025 90.294);
--accent-foreground: oklch(0.322 0.06 87.5);
--destructive: oklch(0.461 0.143 37.731);
--destructive-foreground: oklch(0.933 0.031 41.086);
--ring: oklch(0.971 0.027 177.965);
--chart-1: oklch(0.971 0.027 177.965);
--chart-2: oklch(0.939 0.038 317.098);
--chart-3: oklch(0.972 0.025 90.294);
--chart-4: oklch(0.969 0.019 317.145);
--chart-5: oklch(0.972 0.028 177.935);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.154 0.012 177.235);
--foreground: oklch(0.993 0.001 178.744);
--muted: oklch(0.199 0.012 317.047);
--muted-foreground: oklch(0.699 0.022 317.118);
--popover: oklch(0.154 0.012 177.235);
--popover-foreground: oklch(0.993 0.001 178.744);
--card: oklch(0.154 0.012 177.235);
--card-foreground: oklch(0.993 0.001 178.744);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.971 0.027 177.965);
--primary-foreground: oklch(0.333 0.062 169.705);
--secondary: oklch(0.939 0.038 317.098);
--secondary-foreground: oklch(0.434 0.203 313.895);
--accent: oklch(0.972 0.025 90.294);
--accent-foreground: oklch(0.322 0.06 87.5);
--destructive: oklch(0.656 0.191 38.59);
--destructive-foreground: oklch(0 0 0);
--ring: oklch(0.971 0.027 177.965);
--chart-1: oklch(0.971 0.027 177.965);
--chart-2: oklch(0.939 0.038 317.098);
--chart-3: oklch(0.972 0.025 90.294);
--chart-4: oklch(0.969 0.019 317.145);
--chart-5: oklch(0.972 0.028 177.935);
}