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.
Graft is a shadcn/ui theme built around a near-black primary color (#01010f) with muted light indigo accents (#e2e1ea). The light mode uses a neutral background (#ffffff). Dark mode keeps the near-black primary (#01010f) on an indigo-tinted background (#07070d).
| Token | Light | Dark |
|---|---|---|
| Background | #ffffffwhite | #07070dblack |
| Foreground | #020109black | #ffffffwhite |
| Card | #ffffffwhite | #07070dblack |
| Card foreground | #020109black | #ffffffwhite |
| Popover | #ffffffwhite | #07070dblack |
| Popover foreground | #020109black | #ffffffwhite |
| Primary | #01010fblack | #01010fblack |
| Primary foreground | #afabfclightsteelblue | #afabfclightsteelblue |
| Secondary | #e2e1eagainsboro | #2d2c35darkslategray |
| Secondary foreground | #413f5adarkslategray | #c5c5cesilver |
| Muted | #d8d7e4gainsboro | #1b1b28black |
| Muted foreground | #474659darkslategray | #a7a6b9darkgray |
| Accent | #e2e1eagainsboro | #2d2c35darkslategray |
| Accent foreground | #413f5adarkslategray | #c5c5cesilver |
| Destructive | #cf3217firebrick | #e8482cchocolate |
| Destructive foreground | #ffffffwhite | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #01010fblack | #01010fblack |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 20.77:1 | AAA |
| Text on card | 20.77:1 | AAA |
| Primary button | 9.94:1 | AAA |
| Secondary button | 7.77:1 | AAA |
| Muted text | 6.46:1 | AA |
| Accent | 7.77:1 | AAA |
| Destructive | 5.10:1 | AA |
| Text on background | 20.06:1 | AAA |
| Text on card | 20.06:1 | AAA |
| Primary button | 9.94:1 | AAA |
| Secondary button | 8.04:1 | AAA |
| Muted text | 7.15:1 | AAA |
| Accent | 8.04:1 | AAA |
| Destructive | 3.90:1 | AA Large |
Paste this into your globals.css to use Graft in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(1 0 180);
--foreground: oklch(0.087 0.029 282.652);
--muted: oklch(0.884 0.018 288.325);
--muted-foreground: oklch(0.401 0.032 287.167);
--popover: oklch(1 0 180);
--popover-foreground: oklch(0.087 0.029 282.652);
--card: oklch(1 0 180);
--card-foreground: oklch(0.087 0.029 282.652);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.086 0.046 276.883);
--primary-foreground: oklch(0.776 0.114 285.7);
--secondary: oklch(0.913 0.012 288.469);
--secondary-foreground: oklch(0.382 0.044 286.405);
--accent: oklch(0.913 0.012 288.469);
--accent-foreground: oklch(0.382 0.044 286.405);
--destructive: oklch(0.561 0.196 32.218);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.086 0.046 276.883);
--chart-1: oklch(0.086 0.046 276.883);
--chart-2: oklch(0.913 0.012 288.469);
--chart-3: oklch(0.913 0.012 288.469);
--chart-4: oklch(0.939 0.008 288.548);
--chart-5: oklch(0.084 0.048 275.497);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.133 0.014 286.955);
--foreground: oklch(1 0 180);
--muted: oklch(0.227 0.026 286.465);
--muted-foreground: oklch(0.734 0.027 288.006);
--popover: oklch(0.133 0.014 286.955);
--popover-foreground: oklch(1 0 180);
--card: oklch(0.133 0.014 286.955);
--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.086 0.046 276.883);
--primary-foreground: oklch(0.776 0.114 285.7);
--secondary: oklch(0.298 0.016 287.699);
--secondary-foreground: oklch(0.826 0.013 288.406);
--accent: oklch(0.298 0.016 287.699);
--accent-foreground: oklch(0.826 0.013 288.406);
--destructive: oklch(0.626 0.201 32.383);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.086 0.046 276.883);
--chart-1: oklch(0.086 0.046 276.883);
--chart-2: oklch(0.298 0.016 287.699);
--chart-3: oklch(0.298 0.016 287.699);
--chart-4: oklch(0.326 0.018 287.664);
--chart-5: oklch(0.084 0.048 275.497);
}