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.
Inconsequential is a shadcn/ui theme built around a neutral gray primary color (#473e46) with neutral gray accents (#3e4647). The light mode uses a neutral background (#fcf8fb). Dark mode keeps the neutral gray primary (#473e46) on a purple-tinted background (#0b040a).
| Token | Light | Dark |
|---|---|---|
| Background | #fcf8fbsnow | #0b040ablack |
| Foreground | #0d030bblack | #f9f6f8whitesmoke |
| Card | #faf5f9whitesmoke | #0f050eblack |
| Card foreground | #090207black | #fbf9fbsnow |
| Popover | #fcf8fbsnow | #0b040ablack |
| Popover foreground | #0d030bblack | #f9f6f8whitesmoke |
| Primary | #473e46darkslategray | #473e46darkslategray |
| Primary foreground | #ded9ddgainsboro | #ded9ddgainsboro |
| Secondary | #46473edarkslategray | #46473edarkslategray |
| Secondary foreground | #ddded9gainsboro | #ddded9gainsboro |
| Muted | #eff0ealinen | #14150fblack |
| Muted foreground | #43443bdarkslategray | #c2c4bbsilver |
| Accent | #3e4647darkslategray | #3e4647darkslategray |
| Accent foreground | #d9dddegainsboro | #d9dddegainsboro |
| Destructive | #692602maroon | #fb5e09orangered |
| Destructive foreground | #fec0a0navajowhite | #000000black |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #473e46darkslategray | #473e46darkslategray |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 19.30:1 | AAA |
| Text on card | 19.03:1 | AAA |
| Primary button | 7.40:1 | AAA |
| Secondary button | 6.97:1 | AA |
| Muted text | 8.62:1 | AAA |
| Accent | 7.11:1 | AAA |
| Destructive | 7.03:1 | AAA |
| Text on background | 18.88:1 | AAA |
| Text on card | 19.10:1 | AAA |
| Primary button | 7.40:1 | AAA |
| Secondary button | 6.97:1 | AA |
| Muted text | 10.41:1 | AAA |
| Accent | 7.11:1 | AAA |
| Destructive | 6.70:1 | AA |
Paste this into your globals.css to use Inconsequential in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.983 0.005 330.312);
--foreground: oklch(0.122 0.033 331.995);
--muted: oklch(0.953 0.008 113.465);
--muted-foreground: oklch(0.383 0.015 114.026);
--popover: oklch(0.983 0.005 330.312);
--popover-foreground: oklch(0.122 0.033 331.995);
--card: oklch(0.975 0.008 330.346);
--card-foreground: oklch(0.106 0.029 331.561);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.375 0.018 330.857);
--primary-foreground: oklch(0.89 0.008 330.361);
--secondary: oklch(0.393 0.015 114.031);
--secondary-foreground: oklch(0.898 0.007 113.447);
--accent: oklch(0.386 0.011 209.43);
--accent-foreground: oklch(0.895 0.005 209.454);
--destructive: oklch(0.364 0.106 43.223);
--destructive-foreground: oklch(0.857 0.083 49.514);
--ring: oklch(0.375 0.018 330.857);
--chart-1: oklch(0.375 0.018 330.857);
--chart-2: oklch(0.393 0.015 114.031);
--chart-3: oklch(0.386 0.011 209.43);
--chart-4: oklch(0.423 0.017 114.043);
--chart-5: oklch(0.373 0.026 331.115);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.125 0.024 331.426);
--foreground: oklch(0.976 0.005 330.312);
--muted: oklch(0.192 0.012 114.457);
--muted-foreground: oklch(0.816 0.012 113.589);
--popover: oklch(0.125 0.024 331.426);
--popover-foreground: oklch(0.976 0.005 330.312);
--card: oklch(0.138 0.028 332.088);
--card-foreground: oklch(0.984 0.003 330.29);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.375 0.018 330.857);
--primary-foreground: oklch(0.89 0.008 330.361);
--secondary: oklch(0.393 0.015 114.031);
--secondary-foreground: oklch(0.898 0.007 113.447);
--accent: oklch(0.386 0.011 209.43);
--accent-foreground: oklch(0.895 0.005 209.454);
--destructive: oklch(0.68 0.207 40.998);
--destructive-foreground: oklch(0 0 0);
--ring: oklch(0.375 0.018 330.857);
--chart-1: oklch(0.375 0.018 330.857);
--chart-2: oklch(0.393 0.015 114.031);
--chart-3: oklch(0.386 0.011 209.43);
--chart-4: oklch(0.423 0.017 114.043);
--chart-5: oklch(0.373 0.026 331.115);
}