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.
Divalent is a shadcn/ui theme built around a muted deep purple primary color (#321f2d) with muted deep cyan accents (#1f2d32). The light mode uses a neutral background (#fefbfd). Dark mode keeps the muted deep purple primary (#321f2d) on a neutral background (#030203).
| Token | Light | Dark |
|---|---|---|
| Background | #fefbfdsnow | #030203black |
| Foreground | #0c030ablack | #faf4f9whitesmoke |
| Card | #fdf7fbsnow | #070306black |
| Card foreground | #080207black | #fcf8fbsnow |
| Popover | #fdf7fbsnow | #070306black |
| Popover foreground | #080207black | #fcf8fbsnow |
| Primary | #321f2ddarkslategray | #321f2ddarkslategray |
| Primary foreground | #d0b4c9thistle | #d0b4c9thistle |
| Secondary | #2d321fdarkslategray | #2d321fdarkslategray |
| Secondary foreground | #c9d0b4silver | #c9d0b4silver |
| Muted | #e9eddebeige | #1d2112black |
| Muted foreground | #5c5f54dimgray | #a8aba0darkgray |
| Accent | #1f2d32darkslategray | #1f2d32darkslategray |
| Accent foreground | #b4c9d0lightsteelblue | #b4c9d0lightsteelblue |
| Destructive | #7d3108saddlebrown | #eb5c0fchocolate |
| Destructive foreground | #fbd2bcpeachpuff | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #321f2ddarkslategray | #321f2ddarkslategray |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 19.78:1 | AAA |
| Text on card | 19.44:1 | AAA |
| Primary button | 8.03:1 | AAA |
| Secondary button | 8.26:1 | AAA |
| Muted text | 5.46:1 | AA |
| Accent | 8.19:1 | AAA |
| Destructive | 6.52:1 | AA |
| Text on background | 19.12:1 | AAA |
| Text on card | 19.44:1 | AAA |
| Primary button | 8.03:1 | AAA |
| Secondary button | 8.26:1 | AAA |
| Muted text | 7.05:1 | AAA |
| Accent | 8.19:1 | AAA |
| Destructive | 3.46:1 | AA Large |
Paste this into your globals.css to use Divalent in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.991 0.004 333.946);
--foreground: oklch(0.123 0.026 334.922);
--muted: oklch(0.938 0.019 118.19);
--muted-foreground: oklch(0.478 0.017 118.459);
--popover: oklch(0.982 0.008 334.016);
--popover-foreground: oklch(0.107 0.023 334.601);
--card: oklch(0.982 0.008 334.016);
--card-foreground: oklch(0.107 0.023 334.601);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.27 0.037 336.052);
--primary-foreground: oklch(0.8 0.043 334.755);
--secondary: oklch(0.307 0.032 119.755);
--secondary-foreground: oklch(0.844 0.039 118.644);
--accent: oklch(0.288 0.021 220.417);
--accent-foreground: oklch(0.822 0.025 219.778);
--destructive: oklch(0.414 0.116 43.4);
--destructive-foreground: oklch(0.893 0.055 49.931);
--ring: oklch(0.27 0.037 336.052);
--chart-1: oklch(0.27 0.037 336.052);
--chart-2: oklch(0.307 0.032 119.755);
--chart-3: oklch(0.288 0.021 220.417);
--chart-4: oklch(0.343 0.037 119.827);
--chart-5: oklch(0.27 0.042 336.323);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.088 0.01 334.295);
--foreground: oklch(0.974 0.008 334.023);
--muted: oklch(0.238 0.026 119.85);
--muted-foreground: oklch(0.736 0.015 118.196);
--popover: oklch(0.111 0.013 334.295);
--popover-foreground: oklch(0.983 0.006 333.973);
--card: oklch(0.111 0.013 334.295);
--card-foreground: oklch(0.983 0.006 333.973);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.27 0.037 336.052);
--primary-foreground: oklch(0.8 0.043 334.755);
--secondary: oklch(0.307 0.032 119.755);
--secondary-foreground: oklch(0.844 0.039 118.644);
--accent: oklch(0.288 0.021 220.417);
--accent-foreground: oklch(0.822 0.025 219.778);
--destructive: oklch(0.653 0.192 42.053);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.27 0.037 336.052);
--chart-1: oklch(0.27 0.037 336.052);
--chart-2: oklch(0.307 0.032 119.755);
--chart-3: oklch(0.288 0.021 220.417);
--chart-4: oklch(0.343 0.037 119.827);
--chart-5: oklch(0.27 0.042 336.323);
}