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.
Rosy is a shadcn/ui theme built around a neutral gray primary color (#828282) with muted light red accents (#decfcf). The light mode uses a neutral background (#fdf7f7). Dark mode keeps the neutral gray primary (#828282) on a neutral background (#080202).
| Token | Light | Dark |
|---|---|---|
| Background | #fdf7f7snow | #080202black |
| Foreground | #120303black | #faf4f4whitesmoke |
| Card | #fcf3f3lavenderblush | #0c0303black |
| Card foreground | #0d0202black | #fcf8f8snow |
| Popover | #fdf7f7snow | #080202black |
| Popover foreground | #120303black | #faf4f4whitesmoke |
| Primary | #828282gray | #828282gray |
| Primary foreground | #000000black | #000000black |
| Secondary | #decfcflightgrey | #211717black |
| Secondary foreground | #483232darkslategray | #c2a8a8darkgray |
| Muted | #eeddddgainsboro | #221111black |
| Muted foreground | #484141darkslategray | #beb7b7silver |
| Accent | #decfcflightgrey | #211717black |
| Accent foreground | #483232darkslategray | #c2a8a8darkgray |
| Destructive | #e21a03red | #fc412ctomato |
| Destructive foreground | #ffffffwhite | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #828282gray | #828282gray |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 19.04:1 | AAA |
| Text on card | 18.73:1 | AAA |
| Primary button | 5.46:1 | AA |
| Secondary button | 7.81:1 | AAA |
| Muted text | 7.58:1 | AAA |
| Accent | 7.81:1 | AAA |
| Destructive | 4.79:1 | AA |
| Text on background | 18.91:1 | AAA |
| Text on card | 19.31:1 | AAA |
| Primary button | 5.46:1 | AA |
| Secondary button | 7.87:1 | AAA |
| Muted text | 9.21:1 | AAA |
| Accent | 7.87:1 | AAA |
| Destructive | 3.54:1 | AA Large |
Paste this into your globals.css to use Rosy in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.981 0.006 17.265);
--foreground: oklch(0.128 0.034 23.275);
--muted: oklch(0.911 0.02 17.52);
--muted-foreground: oklch(0.384 0.009 17.571);
--popover: oklch(0.981 0.006 17.265);
--popover-foreground: oklch(0.128 0.034 23.275);
--card: oklch(0.971 0.01 17.321);
--card-foreground: oklch(0.114 0.03 23.022);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.607 0 171.87);
--primary-foreground: oklch(0 0 0);
--secondary: oklch(0.866 0.016 17.474);
--secondary-foreground: oklch(0.343 0.032 18.851);
--accent: oklch(0.866 0.016 17.474);
--accent-foreground: oklch(0.343 0.032 18.851);
--destructive: oklch(0.58 0.229 30.331);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.607 0 171.87);
--chart-1: oklch(0.607 0 171.87);
--chart-2: oklch(0.866 0.016 17.474);
--chart-3: oklch(0.866 0.016 17.474);
--chart-4: oklch(0.891 0.013 17.404);
--chart-5: oklch(0.601 0.009 17.411);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.104 0.018 20.589);
--foreground: oklch(0.973 0.007 17.27);
--muted: oklch(0.201 0.03 20.053);
--muted-foreground: oklch(0.784 0.008 17.323);
--popover: oklch(0.104 0.018 20.589);
--popover-foreground: oklch(0.973 0.007 17.27);
--card: oklch(0.119 0.021 20.618);
--card-foreground: oklch(0.982 0.004 17.231);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.607 0 171.87);
--primary-foreground: oklch(0 0 0);
--secondary: oklch(0.218 0.015 18.409);
--secondary-foreground: oklch(0.755 0.029 17.821);
--accent: oklch(0.218 0.015 18.409);
--accent-foreground: oklch(0.755 0.029 17.821);
--destructive: oklch(0.653 0.226 30.35);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.607 0 171.87);
--chart-1: oklch(0.607 0 171.87);
--chart-2: oklch(0.218 0.015 18.409);
--chart-3: oklch(0.218 0.015 18.409);
--chart-4: oklch(0.248 0.019 18.522);
--chart-5: oklch(0.601 0.009 17.411);
}