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.
Consent is a shadcn/ui theme built around a near-black primary color (#0d0c0d) with near-black accents (#0c0d0d). The light mode uses a neutral background (#ffffff). Dark mode keeps the near-black primary (#0d0c0d) on a neutral background (#000000).
| Token | Light | Dark |
|---|---|---|
| Background | #ffffffwhite | #000000black |
| Foreground | #040103black | #fdfcfdwhite |
| Card | #ffffffwhite | #000000black |
| Card foreground | #040103black | #fdfcfdwhite |
| Popover | #ffffffwhite | #000000black |
| Popover foreground | #040103black | #fdfcfdwhite |
| Primary | #0d0c0dblack | #0d0c0dblack |
| Primary foreground | #aaa1a8darkgray | #aaa1a8darkgray |
| Secondary | #0d0d0cblack | #0d0d0cblack |
| Secondary foreground | #a8aaa1darkgray | #a8aaa1darkgray |
| Muted | #f5f7eewhitesmoke | #0f1108black |
| Muted foreground | #4a4e3bdarkolivegreen | #bfc4b1silver |
| Accent | #0c0d0dblack | #0c0d0dblack |
| Accent foreground | #a1a8aadarkgray | #a1a8aadarkgray |
| Destructive | #91160ddarkred | #ee463atomato |
| Destructive foreground | #fbd7d5mistyrose | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #0d0c0dblack | #0d0c0dblack |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 20.77:1 | AAA |
| Text on card | 20.77:1 | AAA |
| Primary button | 7.77:1 | AAA |
| Secondary button | 8.25:1 | AAA |
| Muted text | 7.91:1 | AAA |
| Accent | 8.05:1 | AAA |
| Destructive | 6.77:1 | AA |
| Text on background | 20.51:1 | AAA |
| Text on card | 20.51:1 | AAA |
| Primary button | 7.77:1 | AAA |
| Secondary button | 8.25:1 | AAA |
| Muted text | 10.63:1 | AAA |
| Accent | 8.05:1 | AAA |
| Destructive | 3.77:1 | AA Large |
Paste this into your globals.css to use Consent in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(1 0 180);
--foreground: oklch(0.085 0.02 334.102);
--muted: oklch(0.971 0.012 117.294);
--muted-foreground: oklch(0.416 0.031 118.448);
--popover: oklch(1 0 180);
--popover-foreground: oklch(0.085 0.02 334.102);
--card: oklch(1 0 180);
--card-foreground: oklch(0.085 0.02 334.102);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.157 0.003 333.542);
--primary-foreground: oklch(0.72 0.014 333.555);
--secondary: oklch(0.16 0.003 117.38);
--secondary-foreground: oklch(0.734 0.013 117.393);
--accent: oklch(0.158 0.002 217.809);
--accent-foreground: oklch(0.727 0.008 217.813);
--destructive: oklch(0.424 0.159 29.588);
--destructive-foreground: oklch(0.91 0.04 22.763);
--ring: oklch(0.157 0.003 333.542);
--chart-1: oklch(0.157 0.003 333.542);
--chart-2: oklch(0.16 0.003 117.38);
--chart-3: oklch(0.158 0.002 217.809);
--chart-4: oklch(0.196 0.004 117.452);
--chart-5: oklch(0.156 0.005 333.722);
}
.dark {
--radius: 0.5rem;
--background: oklch(0 0 0);
--foreground: oklch(0.992 0.002 333.277);
--muted: oklch(0.173 0.017 118.848);
--muted-foreground: oklch(0.811 0.027 117.676);
--popover: oklch(0 0 0);
--popover-foreground: oklch(0.992 0.002 333.277);
--card: oklch(0 0 0);
--card-foreground: oklch(0.992 0.002 333.277);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.157 0.003 333.542);
--primary-foreground: oklch(0.72 0.014 333.555);
--secondary: oklch(0.16 0.003 117.38);
--secondary-foreground: oklch(0.734 0.013 117.393);
--accent: oklch(0.158 0.002 217.809);
--accent-foreground: oklch(0.727 0.008 217.813);
--destructive: oklch(0.636 0.206 28.476);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.157 0.003 333.542);
--chart-1: oklch(0.157 0.003 333.542);
--chart-2: oklch(0.16 0.003 117.38);
--chart-3: oklch(0.158 0.002 217.809);
--chart-4: oklch(0.196 0.004 117.452);
--chart-5: oklch(0.156 0.005 333.722);
}