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.
Smart Largest Black Slug is a shadcn/ui theme built around a deep red primary color (#591c2b) with deep teal accents (#1c594a). The light mode uses a neutral background (#fcf8f9). Dark mode keeps the deep red primary (#591c2b) on a neutral background (#080304).
| Token | Light | Dark |
|---|---|---|
| Background | #fcf8f9snow | #080304black |
| Foreground | #000000black | #fcf8f9snow |
| Card | #faf4f6whitesmoke | #0b0406black |
| Card foreground | #000000black | #fdfcfcsnow |
| Popover | #fcf8f9snow | #080304black |
| Popover foreground | #000000black | #fcf8f9snow |
| Primary | #591c2bmaroon | #591c2bmaroon |
| Primary foreground | #eabdc8pink | #eabdc8pink |
| Secondary | #1c594adarkslategray | #1c594adarkslategray |
| Secondary foreground | #bdeadfpowderblue | #bdeadfpowderblue |
| Muted | #cfe2degainsboro | #1d302bdarkslategray |
| Muted foreground | #4a5e59darkslategray | #a1b5b0darkgray |
| Accent | #1c594adarkslategray | #1c594adarkslategray |
| Accent foreground | #bdeadfpowderblue | #bdeadfpowderblue |
| Destructive | #772208maroon | #db3f0forangered |
| Destructive foreground | #fac7b7peachpuff | #ffffffwhite |
| Border | #eceaealinen | #1d1b1bblack |
| Input | #eceaealinen | #1d1b1bblack |
| Ring | #591c2bmaroon | #591c2bmaroon |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 19.91:1 | AAA |
| Text on card | 19.39:1 | AAA |
| Primary button | 7.74:1 | AAA |
| Secondary button | 6.19:1 | AA |
| Muted text | 5.14:1 | AA |
| Accent | 6.19:1 | AA |
| Destructive | 6.88:1 | AA |
| Text on background | 19.48:1 | AAA |
| Text on card | 19.82:1 | AAA |
| Primary button | 7.74:1 | AAA |
| Secondary button | 6.19:1 | AA |
| Muted text | 6.47:1 | AA |
| Accent | 6.19:1 | AA |
| Destructive | 4.43:1 | AA Large |
Paste this into your globals.css to use Smart Largest Black Slug in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.982 0.004 359.994);
--foreground: oklch(0 0 0);
--muted: oklch(0.898 0.021 179.174);
--muted-foreground: oklch(0.464 0.026 178.171);
--popover: oklch(0.982 0.004 359.994);
--popover-foreground: oklch(0 0 0);
--card: oklch(0.973 0.007 0.059);
--card-foreground: oklch(0 0 0);
--border: oklch(0.937 0.002 359.935);
--input: oklch(0.937 0.002 359.935);
--primary: oklch(0.327 0.09 8.346);
--primary-foreground: oklch(0.842 0.054 1.608);
--secondary: oklch(0.421 0.067 173.26);
--secondary-foreground: oklch(0.903 0.049 178.219);
--accent: oklch(0.421 0.067 173.26);
--accent-foreground: oklch(0.903 0.049 178.219);
--destructive: oklch(0.385 0.123 36.032);
--destructive-foreground: oklch(0.871 0.062 37.593);
--ring: oklch(0.327 0.09 8.346);
--chart-1: oklch(0.327 0.09 8.346);
--chart-2: oklch(0.421 0.067 173.26);
--chart-3: oklch(0.421 0.067 173.26);
--chart-4: oklch(0.458 0.074 173.117);
--chart-5: oklch(0.328 0.095 8.945);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.106 0.016 359.801);
--foreground: oklch(0.983 0.004 359.977);
--muted: oklch(0.29 0.026 176.897);
--muted-foreground: oklch(0.756 0.023 178.956);
--popover: oklch(0.106 0.016 359.801);
--popover-foreground: oklch(0.983 0.004 359.977);
--card: oklch(0.122 0.018 359.923);
--card-foreground: oklch(0.991 0.002 359.921);
--border: oklch(0.224 0.005 0.435);
--input: oklch(0.224 0.005 0.435);
--primary: oklch(0.327 0.09 8.346);
--primary-foreground: oklch(0.842 0.054 1.608);
--secondary: oklch(0.421 0.067 173.26);
--secondary-foreground: oklch(0.903 0.049 178.219);
--accent: oklch(0.421 0.067 173.26);
--accent-foreground: oklch(0.903 0.049 178.219);
--destructive: oklch(0.594 0.2 35.28);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.327 0.09 8.346);
--chart-1: oklch(0.327 0.09 8.346);
--chart-2: oklch(0.421 0.067 173.26);
--chart-3: oklch(0.421 0.067 173.26);
--chart-4: oklch(0.458 0.074 173.117);
--chart-5: oklch(0.328 0.095 8.945);
}