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.
Giggle is a shadcn/ui theme built around a neutral gray primary color (#403c44) with neutral gray accents (#40443c). The light mode uses a neutral background (#fcfbfe). Dark mode keeps the neutral gray primary (#403c44) on a neutral background (#050208).
| Token | Light | Dark |
|---|---|---|
| Background | #fcfbfewhite | #050208black |
| Foreground | #030104black | #ffffffwhite |
| Card | #faf7fdghostwhite | #08030cblack |
| Card foreground | #000000black | #ffffffwhite |
| Popover | #fcfbfewhite | #050208black |
| Popover foreground | #030104black | #ffffffwhite |
| Primary | #403c44darkslategray | #403c44darkslategray |
| Primary foreground | #d9d6dbgainsboro | #d9d6dbgainsboro |
| Secondary | #40443cdarkslategray | #40443cdarkslategray |
| Secondary foreground | #d9dbd6gainsboro | #d9dbd6gainsboro |
| Muted | #e6e7e4gainsboro | #191b18black |
| Muted foreground | #616f52dimgray | #9ead90darkseagreen |
| Accent | #40443cdarkslategray | #40443cdarkslategray |
| Accent foreground | #d9dbd6gainsboro | #d9dbd6gainsboro |
| Destructive | #752300maroon | #e64500orangered |
| Destructive foreground | #ffc2a8lightpink | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #403c44darkslategray | #403c44darkslategray |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 20.17:1 | AAA |
| Text on card | 19.75:1 | AAA |
| Primary button | 7.50:1 | AAA |
| Secondary button | 7.17:1 | AAA |
| Muted text | 4.33:1 | AA Large |
| Accent | 7.17:1 | AAA |
| Destructive | 6.75:1 | AA |
| Text on background | 20.60:1 | AAA |
| Text on card | 20.41:1 | AAA |
| Primary button | 7.50:1 | AAA |
| Secondary button | 7.17:1 | AAA |
| Muted text | 7.27:1 | AAA |
| Accent | 7.17:1 | AAA |
| Destructive | 4.04:1 | AA Large |
Paste this into your globals.css to use Giggle in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.99 0.004 308.411);
--foreground: oklch(0.08 0.019 310.146);
--muted: oklch(0.926 0.005 128.522);
--muted-foreground: oklch(0.523 0.047 129.531);
--popover: oklch(0.99 0.004 308.411);
--popover-foreground: oklch(0.08 0.019 310.146);
--card: oklch(0.98 0.009 308.36);
--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.363 0.014 308.035);
--primary-foreground: oklch(0.881 0.007 308.376);
--secondary: oklch(0.379 0.014 128.87);
--secondary-foreground: oklch(0.888 0.007 128.544);
--accent: oklch(0.379 0.014 128.87);
--accent-foreground: oklch(0.888 0.007 128.544);
--destructive: oklch(0.382 0.122 39.243);
--destructive-foreground: oklch(0.863 0.078 44.272);
--ring: oklch(0.363 0.014 308.035);
--chart-1: oklch(0.363 0.014 308.035);
--chart-2: oklch(0.379 0.014 128.87);
--chart-3: oklch(0.379 0.014 128.87);
--chart-4: oklch(0.409 0.015 128.878);
--chart-5: oklch(0.359 0.021 307.815);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.101 0.024 310.146);
--foreground: oklch(1 0 180);
--muted: oklch(0.22 0.007 128.837);
--muted-foreground: oklch(0.727 0.044 129.157);
--popover: oklch(0.101 0.024 310.146);
--popover-foreground: oklch(1 0 180);
--card: oklch(0.116 0.027 309.838);
--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.363 0.014 308.035);
--primary-foreground: oklch(0.881 0.007 308.376);
--secondary: oklch(0.379 0.014 128.87);
--secondary-foreground: oklch(0.888 0.007 128.544);
--accent: oklch(0.379 0.014 128.87);
--accent-foreground: oklch(0.888 0.007 128.544);
--destructive: oklch(0.617 0.206 37.099);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.363 0.014 308.035);
--chart-1: oklch(0.363 0.014 308.035);
--chart-2: oklch(0.379 0.014 128.87);
--chart-3: oklch(0.379 0.014 128.87);
--chart-4: oklch(0.409 0.015 128.878);
--chart-5: oklch(0.359 0.021 307.815);
}