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.
Perfumed is a shadcn/ui theme built around a deep purple primary color (#431d44) with deep pink accents (#441d32). The light mode uses a neutral background (#fdfcfd). Dark mode keeps the deep purple primary (#431d44) on a neutral background (#070307).
| Token | Light | Dark |
|---|---|---|
| Background | #fdfcfdwhite | #070307black |
| Foreground | #130613black | #f9f5faghostwhite |
| Card | #fdfcfdwhite | #070307black |
| Card foreground | #130613black | #f9f5faghostwhite |
| Popover | #fdfcfdwhite | #070307black |
| Popover foreground | #130613black | #f9f5faghostwhite |
| Primary | #431d44darkslategray | #431d44darkslategray |
| Primary foreground | #ddb4dfthistle | #ddb4dfthistle |
| Secondary | #2f1d44midnightblue | #2f1d44midnightblue |
| Secondary foreground | #c8b4dfthistle | #c8b4dfthistle |
| Muted | #edebf0lavender | #120f14black |
| Muted foreground | #5e526bdimgray | #a094addarkgray |
| Accent | #441d32darkslategray | #441d32darkslategray |
| Accent foreground | #dfb4cbthistle | #dfb4cbthistle |
| Destructive | #ce100dfirebrick | #d8110ered |
| Destructive foreground | #ffffffwhite | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #431d44darkslategray | #431d44darkslategray |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 19.27:1 | AAA |
| Text on card | 19.27:1 | AAA |
| Primary button | 7.80:1 | AAA |
| Secondary button | 8.00:1 | AAA |
| Muted text | 6.11:1 | AA |
| Accent | 7.86:1 | AAA |
| Destructive | 5.65:1 | AA |
| Text on background | 18.99:1 | AAA |
| Text on card | 18.99:1 | AAA |
| Primary button | 7.80:1 | AAA |
| Secondary button | 8.00:1 | AAA |
| Muted text | 6.63:1 | AA |
| Accent | 7.86:1 | AAA |
| Destructive | 5.25:1 | AA |
Paste this into your globals.css to use Perfumed in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.992 0.003 324.635);
--foreground: oklch(0.152 0.034 325.933);
--muted: oklch(0.942 0.007 307.019);
--muted-foreground: oklch(0.459 0.042 306.002);
--popover: oklch(0.992 0.003 324.635);
--popover-foreground: oklch(0.152 0.034 325.933);
--card: oklch(0.992 0.003 324.635);
--card-foreground: oklch(0.152 0.034 325.933);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.302 0.082 326.114);
--primary-foreground: oklch(0.82 0.074 325.173);
--secondary: oklch(0.275 0.072 303.582);
--secondary-foreground: oklch(0.801 0.063 306.145);
--accent: oklch(0.294 0.066 348.723);
--accent-foreground: oklch(0.815 0.058 345.138);
--destructive: oklch(0.54 0.215 28.917);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.302 0.082 326.114);
--chart-1: oklch(0.302 0.082 326.114);
--chart-2: oklch(0.275 0.072 303.582);
--chart-3: oklch(0.294 0.066 348.723);
--chart-4: oklch(0.3 0.081 303.44);
--chart-5: oklch(0.302 0.087 326.189);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.11 0.019 325.868);
--foreground: oklch(0.975 0.007 324.667);
--muted: oklch(0.175 0.011 306.358);
--muted-foreground: oklch(0.686 0.038 306.44);
--popover: oklch(0.11 0.019 325.868);
--popover-foreground: oklch(0.975 0.007 324.667);
--card: oklch(0.11 0.019 325.868);
--card-foreground: oklch(0.975 0.007 324.667);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.302 0.082 326.114);
--primary-foreground: oklch(0.82 0.074 325.173);
--secondary: oklch(0.275 0.072 303.582);
--secondary-foreground: oklch(0.801 0.063 306.145);
--accent: oklch(0.294 0.066 348.723);
--accent-foreground: oklch(0.815 0.058 345.138);
--destructive: oklch(0.558 0.223 28.936);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.302 0.082 326.114);
--chart-1: oklch(0.302 0.082 326.114);
--chart-2: oklch(0.275 0.072 303.582);
--chart-3: oklch(0.294 0.066 348.723);
--chart-4: oklch(0.3 0.081 303.44);
--chart-5: oklch(0.302 0.087 326.189);
}