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.
Macaw is a shadcn/ui theme built around a teal primary color (#20b188) with cyan accents (#2091b1). The light mode uses a neutral background (#fbfefd). Dark mode keeps the teal primary (#20b188) on a neutral background (#030706).
| Token | Light | Dark |
|---|---|---|
| Background | #fbfefdwhite | #030706black |
| Foreground | #010403black | #f8fbfbghostwhite |
| Card | #f7fcfbmintcream | #050b09black |
| Card foreground | #000000black | #fcfdfdwhite |
| Popover | #fbfefdwhite | #030706black |
| Popover foreground | #010403black | #f8fbfbghostwhite |
| Primary | #20b188lightseagreen | #20b188lightseagreen |
| Primary foreground | #010403black | #010403black |
| Secondary | #20b140limegreen | #20b140limegreen |
| Secondary foreground | #ffffffwhite | #ffffffwhite |
| Muted | #e7f3eahoneydew | #0c180fblack |
| Muted foreground | #444644darkslategray | #b9bbbasilver |
| Accent | #2091b1lightseagreen | #2091b1lightseagreen |
| Accent foreground | #ffffffwhite | #ffffffwhite |
| Destructive | #b20b06firebrick | #df0e07red |
| Destructive foreground | #feeceblinen | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #20b188lightseagreen | #20b188lightseagreen |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 20.25:1 | AAA |
| Text on card | 20.33:1 | AAA |
| Primary button | 7.53:1 | AAA |
| Secondary button | 2.83:1 | Fail |
| Muted text | 8.34:1 | AAA |
| Accent | 3.63:1 | AA Large |
| Destructive | 6.24:1 | AA |
| Text on background | 19.44:1 | AAA |
| Text on card | 19.50:1 | AAA |
| Primary button | 7.53:1 | AAA |
| Secondary button | 2.83:1 | Fail |
| Muted text | 9.46:1 | AAA |
| Accent | 3.63:1 | AA Large |
| Destructive | 5.00:1 | AA |
Paste this into your globals.css to use Macaw in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.994 0.003 177.634);
--foreground: oklch(0.099 0.012 177.862);
--muted: oklch(0.953 0.017 152.336);
--muted-foreground: oklch(0.391 0.003 152.514);
--popover: oklch(0.994 0.003 177.634);
--popover-foreground: oklch(0.099 0.012 177.862);
--card: oklch(0.988 0.005 177.553);
--card-foreground: oklch(0 0 0);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.678 0.131 167.885);
--primary-foreground: oklch(0.1 0.014 177.884);
--secondary: oklch(0.664 0.193 145.879);
--secondary-foreground: oklch(1 0 180);
--accent: oklch(0.612 0.105 221.821);
--accent-foreground: oklch(1 0 180);
--destructive: oklch(0.483 0.193 29.33);
--destructive-foreground: oklch(0.957 0.02 19.908);
--ring: oklch(0.678 0.131 167.885);
--chart-1: oklch(0.678 0.131 167.885);
--chart-2: oklch(0.664 0.193 145.879);
--chart-3: oklch(0.612 0.105 221.821);
--chart-4: oklch(0.7 0.204 145.838);
--chart-5: oklch(0.686 0.134 167.492);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.122 0.011 177.825);
--foreground: oklch(0.987 0.004 177.61);
--muted: oklch(0.193 0.024 150.401);
--muted-foreground: oklch(0.79 0.002 152.574);
--popover: oklch(0.122 0.011 177.825);
--popover-foreground: oklch(0.987 0.004 177.61);
--card: oklch(0.14 0.013 177.722);
--card-foreground: oklch(0.993 0.002 177.663);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.678 0.131 167.885);
--primary-foreground: oklch(0.1 0.014 177.884);
--secondary: oklch(0.664 0.193 145.879);
--secondary-foreground: oklch(1 0 180);
--accent: oklch(0.612 0.105 221.821);
--accent-foreground: oklch(1 0 180);
--destructive: oklch(0.57 0.229 29.323);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.678 0.131 167.885);
--chart-1: oklch(0.678 0.131 167.885);
--chart-2: oklch(0.664 0.193 145.879);
--chart-3: oklch(0.612 0.105 221.821);
--chart-4: oklch(0.7 0.204 145.838);
--chart-5: oklch(0.686 0.134 167.492);
}