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.
Evening is a shadcn/ui theme built around a light indigo primary color (#aaaadf) with light yellow accents (#dfdfaa). The light mode uses a neutral background (#fbfbfe). Dark mode keeps the light indigo primary (#aaaadf) on an indigo-tinted background (#04040b).
| Token | Light | Dark |
|---|---|---|
| Background | #fbfbfeghostwhite | #04040bblack |
| Foreground | #03030dblack | #fcfcfdwhite |
| Card | #f7f7fdghostwhite | #06060eblack |
| Card foreground | #020208black | #ffffffwhite |
| Popover | #fbfbfeghostwhite | #04040bblack |
| Popover foreground | #03030dblack | #fcfcfdwhite |
| Primary | #aaaadflightsteelblue | #aaaadflightsteelblue |
| Primary foreground | #18183fmidnightblue | #18183fmidnightblue |
| Secondary | #dfdfaapalegoldenrod | #dfdfaapalegoldenrod |
| Secondary foreground | #3f3f18darkolivegreen | #3f3f18darkolivegreen |
| Muted | #ececd5antiquewhite | #2a2a13black |
| Muted foreground | #5f5f4fdimgray | #b0b0a0darkgray |
| Accent | #dfdfaapalegoldenrod | #dfdfaapalegoldenrod |
| Accent foreground | #3f3f18darkolivegreen | #3f3f18darkolivegreen |
| Destructive | #d25004chocolate | #fa6c19chocolate |
| Destructive foreground | #ffffffwhite | #000000black |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #aaaadflightsteelblue | #aaaadflightsteelblue |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 19.87:1 | AAA |
| Text on card | 19.38:1 | AAA |
| Primary button | 7.66:1 | AAA |
| Secondary button | 7.87:1 | AAA |
| Muted text | 5.41:1 | AA |
| Accent | 7.87:1 | AAA |
| Destructive | 4.30:1 | AA Large |
| Text on background | 19.88:1 | AAA |
| Text on card | 20.19:1 | AAA |
| Primary button | 7.66:1 | AAA |
| Secondary button | 7.87:1 | AAA |
| Muted text | 6.62:1 | AA |
| Accent | 7.87:1 | AAA |
| Destructive | 7.22:1 | AAA |
Paste this into your globals.css to use Evening in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.989 0.004 286.328);
--foreground: oklch(0.103 0.03 279.753);
--muted: oklch(0.937 0.031 106.978);
--muted-foreground: oklch(0.479 0.024 107.279);
--popover: oklch(0.989 0.004 286.328);
--popover-foreground: oklch(0.103 0.03 279.753);
--card: oklch(0.978 0.008 286.254);
--card-foreground: oklch(0.09 0.026 279.843);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.757 0.075 284.455);
--primary-foreground: oklch(0.234 0.073 279.206);
--secondary: oklch(0.89 0.069 107.723);
--secondary-foreground: oklch(0.358 0.058 109.005);
--accent: oklch(0.89 0.069 107.723);
--accent-foreground: oklch(0.358 0.058 109.005);
--destructive: oklch(0.597 0.178 42.096);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.757 0.075 284.455);
--chart-1: oklch(0.757 0.075 284.455);
--chart-2: oklch(0.89 0.069 107.723);
--chart-3: oklch(0.89 0.069 107.723);
--chart-4: oklch(0.904 0.06 107.545);
--chart-5: oklch(0.752 0.081 284.298);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.115 0.018 283.267);
--foreground: oklch(0.991 0.002 286.371);
--muted: oklch(0.279 0.038 108.643);
--muted-foreground: oklch(0.753 0.022 106.912);
--popover: oklch(0.115 0.018 283.267);
--popover-foreground: oklch(0.991 0.002 286.371);
--card: oklch(0.127 0.02 283.099);
--card-foreground: oklch(1 0 180);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.757 0.075 284.455);
--primary-foreground: oklch(0.234 0.073 279.206);
--secondary: oklch(0.89 0.069 107.723);
--secondary-foreground: oklch(0.358 0.058 109.005);
--accent: oklch(0.89 0.069 107.723);
--accent-foreground: oklch(0.358 0.058 109.005);
--destructive: oklch(0.697 0.193 44.355);
--destructive-foreground: oklch(0 0 0);
--ring: oklch(0.757 0.075 284.455);
--chart-1: oklch(0.757 0.075 284.455);
--chart-2: oklch(0.89 0.069 107.723);
--chart-3: oklch(0.89 0.069 107.723);
--chart-4: oklch(0.904 0.06 107.545);
--chart-5: oklch(0.752 0.081 284.298);
}