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.
Month is a shadcn/ui theme built around a muted red primary color (#c2a3aa) with muted teal accents (#a3c2bb). The light mode uses a neutral background (#fdf7f8). Dark mode keeps the muted red primary (#c2a3aa) on a neutral background (#040102).
| Token | Light | Dark |
|---|---|---|
| Background | #fdf7f8snow | #040102black |
| Foreground | #080304black | #ffffffwhite |
| Card | #fcf3f5lavenderblush | #080204black |
| Card foreground | #040102black | #ffffffwhite |
| Popover | #fdf7f8snow | #040102black |
| Popover foreground | #080304black | #ffffffwhite |
| Primary | #c2a3aadarkgray | #c2a3aadarkgray |
| Primary foreground | #1f1417black | #1f1417black |
| Secondary | #a3c2bbsilver | #a3c2bbsilver |
| Secondary foreground | #141f1cblack | #141f1cblack |
| Muted | #e7f4f1honeydew | #0b1816black |
| Muted foreground | #636363dimgray | #9c9c9cdarkgray |
| Accent | #a3c2bbsilver | #a3c2bbsilver |
| Accent foreground | #141f1cblack | #141f1cblack |
| Destructive | #66170bmaroon | #de3217orangered |
| Destructive foreground | #f6b6aclightpink | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #c2a3aadarkgray | #c2a3aadarkgray |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 19.33:1 | AAA |
| Text on card | 19.04:1 | AAA |
| Primary button | 7.79:1 | AAA |
| Secondary button | 8.83:1 | AAA |
| Muted text | 5.31:1 | AA |
| Accent | 8.83:1 | AAA |
| Destructive | 7.24:1 | AAA |
| Text on background | 20.77:1 | AAA |
| Text on card | 20.55:1 | AAA |
| Primary button | 7.79:1 | AAA |
| Secondary button | 8.83:1 | AAA |
| Muted text | 6.59:1 | AA |
| Accent | 8.83:1 | AAA |
| Destructive | 4.61:1 | AA |
Paste this into your globals.css to use Month in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.981 0.007 2.256);
--foreground: oklch(0.106 0.016 2.182);
--muted: oklch(0.956 0.014 181.643);
--muted-foreground: oklch(0.501 0 180);
--popover: oklch(0.981 0.007 2.256);
--popover-foreground: oklch(0.106 0.016 2.182);
--card: oklch(0.971 0.01 2.354);
--card-foreground: oklch(0.084 0.013 2.182);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.745 0.037 3.401);
--primary-foreground: oklch(0.207 0.017 4.282);
--secondary: oklch(0.789 0.034 180.806);
--secondary-foreground: oklch(0.227 0.015 180.048);
--accent: oklch(0.789 0.034 180.806);
--accent-foreground: oklch(0.227 0.015 180.048);
--destructive: oklch(0.338 0.114 31.659);
--destructive-foreground: oklch(0.833 0.077 28.686);
--ring: oklch(0.745 0.037 3.401);
--chart-1: oklch(0.745 0.037 3.401);
--chart-2: oklch(0.789 0.034 180.806);
--chart-3: oklch(0.789 0.034 180.806);
--chart-4: oklch(0.81 0.031 180.972);
--chart-5: oklch(0.743 0.043 3.609);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.084 0.014 2.194);
--foreground: oklch(1 0 180);
--muted: oklch(0.198 0.02 178.884);
--muted-foreground: oklch(0.691 0 180);
--popover: oklch(0.084 0.014 2.194);
--popover-foreground: oklch(1 0 180);
--card: oklch(0.105 0.018 2.194);
--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.745 0.037 3.401);
--primary-foreground: oklch(0.207 0.017 4.282);
--secondary: oklch(0.789 0.034 180.806);
--secondary-foreground: oklch(0.227 0.015 180.048);
--accent: oklch(0.789 0.034 180.806);
--accent-foreground: oklch(0.227 0.015 180.048);
--destructive: oklch(0.587 0.211 31.572);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.745 0.037 3.401);
--chart-1: oklch(0.745 0.037 3.401);
--chart-2: oklch(0.789 0.034 180.806);
--chart-3: oklch(0.789 0.034 180.806);
--chart-4: oklch(0.81 0.031 180.972);
--chart-5: oklch(0.743 0.043 3.609);
}