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.
Kindly is a shadcn/ui theme built around a neutral gray primary color (#a39599) with neutral gray accents (#d7d5d6). The light mode uses a neutral background (#fefbfc). Dark mode keeps the neutral gray primary (#a39599) on a pink-tinted background (#0b0406).
| Token | Light | Dark |
|---|---|---|
| Background | #fefbfcsnow | #0b0406black |
| Foreground | #100508black | #ffffffwhite |
| Card | #fcf7f9snow | #0f0508black |
| Card foreground | #0c0406black | #ffffffwhite |
| Popover | #fcf7f9snow | #0f0508black |
| Popover foreground | #0c0406black | #ffffffwhite |
| Primary | #a39599darkgray | #a39599darkgray |
| Primary foreground | #030202black | #030202black |
| Secondary | #d7d5d6lightgrey | #171213black |
| Secondary foreground | #3f3b3cdarkslategray | #b9a2a9darkgray |
| Muted | #dcd6d8gainsboro | #292325darkslategray |
| Muted foreground | #4c4849darkslategray | #b7b3b4silver |
| Accent | #d7d5d6lightgrey | #171213black |
| Accent foreground | #3f3b3cdarkslategray | #b9a2a9darkgray |
| Destructive | #631908maroon | #e73a13orangered |
| Destructive foreground | #f8b4a5lightpink | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #a39599darkgray | #a39599darkgray |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 19.50:1 | AAA |
| Text on card | 19.18:1 | AAA |
| Primary button | 7.18:1 | AAA |
| Secondary button | 7.56:1 | AAA |
| Muted text | 6.26:1 | AA |
| Accent | 7.56:1 | AAA |
| Destructive | 7.21:1 | AAA |
| Text on background | 20.30:1 | AAA |
| Text on card | 20.06:1 | AAA |
| Primary button | 7.18:1 | AAA |
| Secondary button | 7.78:1 | AAA |
| Muted text | 7.41:1 | AAA |
| Accent | 7.78:1 | AAA |
| Destructive | 4.19:1 | AA Large |
Paste this into your globals.css to use Kindly in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.991 0.003 356.742);
--foreground: oklch(0.135 0.023 357.953);
--muted: oklch(0.881 0.007 356.891);
--muted-foreground: oklch(0.405 0.006 357.103);
--popover: oklch(0.982 0.006 356.828);
--popover-foreground: oklch(0.122 0.02 356.579);
--card: oklch(0.982 0.006 356.828);
--card-foreground: oklch(0.122 0.02 356.579);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.682 0.017 357.385);
--primary-foreground: oklch(0.091 0.002 356.63);
--secondary: oklch(0.875 0.003 356.752);
--secondary-foreground: oklch(0.358 0.005 357.089);
--accent: oklch(0.875 0.003 356.752);
--accent-foreground: oklch(0.358 0.005 357.089);
--destructive: oklch(0.335 0.11 33.854);
--destructive-foreground: oklch(0.83 0.082 33.022);
--ring: oklch(0.682 0.017 357.385);
--chart-1: oklch(0.682 0.017 357.385);
--chart-2: oklch(0.875 0.003 356.752);
--chart-3: oklch(0.875 0.003 356.752);
--chart-4: oklch(0.899 0.002 356.732);
--chart-5: oklch(0.678 0.025 357.701);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.122 0.019 356.564);
--foreground: oklch(1 0 180);
--muted: oklch(0.265 0.01 357.699);
--muted-foreground: oklch(0.77 0.005 356.858);
--popover: oklch(0.135 0.022 357.908);
--popover-foreground: oklch(1 0 180);
--card: oklch(0.135 0.022 357.908);
--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.682 0.017 357.385);
--primary-foreground: oklch(0.091 0.002 356.63);
--secondary: oklch(0.188 0.01 358.142);
--secondary-foreground: oklch(0.734 0.028 357.742);
--accent: oklch(0.188 0.01 358.142);
--accent-foreground: oklch(0.734 0.028 357.742);
--destructive: oklch(0.61 0.214 33.218);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.682 0.017 357.385);
--chart-1: oklch(0.682 0.017 357.385);
--chart-2: oklch(0.188 0.01 358.142);
--chart-3: oklch(0.188 0.01 358.142);
--chart-4: oklch(0.22 0.013 358.331);
--chart-5: oklch(0.678 0.025 357.701);
}