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.
Concerned is a shadcn/ui theme built around a light teal primary color (#b9dad3) with light yellow accents (#dad3b9). The light mode uses a neutral background (#ffffff). Dark mode keeps the light teal primary (#b9dad3) on a teal-tinted background (#070e0c).
| Token | Light | Dark |
|---|---|---|
| Background | #ffffffwhite | #070e0cblack |
| Foreground | #020807black | #f8fcfbmintcream |
| Card | #ffffffwhite | #070e0cblack |
| Card foreground | #020807black | #f8fcfbmintcream |
| Popover | #ffffffwhite | #070e0cblack |
| Popover foreground | #020807black | #f8fcfbmintcream |
| Primary | #b9dad3powderblue | #b9dad3powderblue |
| Primary foreground | #223f39darkslategray | #223f39darkslategray |
| Secondary | #d3b9dathistle | #d3b9dathistle |
| Secondary foreground | #39223fdarkslategray | #39223fdarkslategray |
| Muted | #eee5f0lavender | #180f1ablack |
| Muted foreground | #636363dimgray | #9c9c9cdarkgray |
| Accent | #dad3b9lightgrey | #dad3b9lightgrey |
| Accent foreground | #3f3922darkslategray | #3f3922darkslategray |
| Destructive | #8c390dsaddlebrown | #d25614chocolate |
| Destructive foreground | #fbdfd0blanchedalmond | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #b9dad3powderblue | #b9dad3powderblue |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 20.18:1 | AAA |
| Text on card | 20.18:1 | AAA |
| Primary button | 7.60:1 | AAA |
| Secondary button | 7.95:1 | AAA |
| Muted text | 4.89:1 | AA |
| Accent | 7.66:1 | AAA |
| Destructive | 6.10:1 | AA |
| Text on background | 18.89:1 | AAA |
| Text on card | 18.89:1 | AAA |
| Primary button | 7.60:1 | AAA |
| Secondary button | 7.95:1 | AAA |
| Muted text | 6.82:1 | AA |
| Accent | 7.66:1 | AAA |
| Destructive | 4.12:1 | AA Large |
Paste this into your globals.css to use Concerned in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(1 0 180);
--foreground: oklch(0.124 0.014 181.989);
--muted: oklch(0.932 0.017 318.884);
--muted-foreground: oklch(0.501 0 180);
--popover: oklch(1 0 180);
--popover-foreground: oklch(0.124 0.014 181.989);
--card: oklch(1 0 180);
--card-foreground: oklch(0.124 0.014 181.989);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.861 0.035 180.883);
--primary-foreground: oklch(0.342 0.037 178.512);
--secondary: oklch(0.818 0.052 318.867);
--secondary-foreground: oklch(0.294 0.059 318.742);
--accent: oklch(0.864 0.035 94.247);
--accent-foreground: oklch(0.343 0.037 94.479);
--destructive: oklch(0.453 0.124 43.854);
--destructive-foreground: oklch(0.923 0.036 50.178);
--ring: oklch(0.861 0.035 180.883);
--chart-1: oklch(0.861 0.035 180.883);
--chart-2: oklch(0.818 0.052 318.867);
--chart-3: oklch(0.864 0.035 94.247);
--chart-4: oklch(0.845 0.044 318.872);
--chart-5: oklch(0.864 0.039 180.767);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.154 0.012 180.541);
--foreground: oklch(0.987 0.004 181.966);
--muted: oklch(0.185 0.026 318.82);
--muted-foreground: oklch(0.691 0 180);
--popover: oklch(0.154 0.012 180.541);
--popover-foreground: oklch(0.987 0.004 181.966);
--card: oklch(0.154 0.012 180.541);
--card-foreground: oklch(0.987 0.004 181.966);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.861 0.035 180.883);
--primary-foreground: oklch(0.342 0.037 178.512);
--secondary: oklch(0.818 0.052 318.867);
--secondary-foreground: oklch(0.294 0.059 318.742);
--accent: oklch(0.864 0.035 94.247);
--accent-foreground: oklch(0.343 0.037 94.479);
--destructive: oklch(0.606 0.171 43.108);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.861 0.035 180.883);
--chart-1: oklch(0.861 0.035 180.883);
--chart-2: oklch(0.818 0.052 318.867);
--chart-3: oklch(0.864 0.035 94.247);
--chart-4: oklch(0.845 0.044 318.872);
--chart-5: oklch(0.864 0.039 180.767);
}