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.
Rotating is a shadcn/ui theme built around a muted deep violet primary color (#251d2f) with muted deep green accents (#282f1d). The light mode uses a neutral background (#ffffff). Dark mode keeps the muted deep violet primary (#251d2f) on a violet-tinted background (#0a060e).
| Token | Light | Dark |
|---|---|---|
| Background | #ffffffwhite | #0a060eblack |
| Foreground | #000000black | #ffffffwhite |
| Card | #fcfcfcsnow | #0c0812black |
| Card foreground | #000000black | #ffffffwhite |
| Popover | #ffffffwhite | #0a060eblack |
| Popover foreground | #000000black | #ffffffwhite |
| Primary | #251d2fdarkslategray | #251d2fdarkslategray |
| Primary foreground | #bdb1cesilver | #bdb1cesilver |
| Secondary | #282f1ddarkslategray | #282f1ddarkslategray |
| Secondary foreground | #c2ceb1silver | #c2ceb1silver |
| Muted | #eef0ealinen | #12150fblack |
| Muted foreground | #61645edimgray | #9fa19bdarkgray |
| Accent | #282f1ddarkslategray | #282f1ddarkslategray |
| Accent foreground | #c2ceb1silver | #c2ceb1silver |
| Destructive | #81150emaroon | #d92417crimson |
| Destructive foreground | #f9cbc8pink | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #251d2fdarkslategray | #251d2fdarkslategray |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 21.00:1 | AAA |
| Text on card | 20.54:1 | AAA |
| Primary button | 7.96:1 | AAA |
| Secondary button | 8.42:1 | AAA |
| Muted text | 5.23:1 | AA |
| Accent | 8.42:1 | AAA |
| Destructive | 7.01:1 | AAA |
| Text on background | 20.09:1 | AAA |
| Text on card | 19.87:1 | AAA |
| Primary button | 7.96:1 | AAA |
| Secondary button | 8.42:1 | AAA |
| Muted text | 7.06:1 | AAA |
| Accent | 8.42:1 | AAA |
| Destructive | 4.98:1 | AA |
Paste this into your globals.css to use Rotating in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(1 0 180);
--foreground: oklch(0 0 0);
--muted: oklch(0.952 0.008 125.161);
--muted-foreground: oklch(0.499 0.01 125.311);
--popover: oklch(1 0 180);
--popover-foreground: oklch(0 0 0);
--card: oklch(0.992 0 161.565);
--card-foreground: oklch(0 0 0);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.25 0.034 303.114);
--primary-foreground: oklch(0.779 0.043 304.279);
--secondary: oklch(0.293 0.032 126.667);
--secondary-foreground: oklch(0.834 0.042 125.757);
--accent: oklch(0.293 0.032 126.667);
--accent-foreground: oklch(0.834 0.042 125.757);
--destructive: oklch(0.392 0.144 29.426);
--destructive-foreground: oklch(0.881 0.053 22.981);
--ring: oklch(0.25 0.034 303.114);
--chart-1: oklch(0.25 0.034 303.114);
--chart-2: oklch(0.293 0.032 126.667);
--chart-3: oklch(0.293 0.032 126.667);
--chart-4: oklch(0.328 0.037 126.74);
--chart-5: oklch(0.247 0.039 302.825);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.133 0.02 304.641);
--foreground: oklch(1 0 180);
--muted: oklch(0.19 0.012 125.931);
--muted-foreground: oklch(0.705 0.009 125.217);
--popover: oklch(0.133 0.02 304.641);
--popover-foreground: oklch(1 0 180);
--card: oklch(0.144 0.024 303.228);
--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.25 0.034 303.114);
--primary-foreground: oklch(0.779 0.043 304.279);
--secondary: oklch(0.293 0.032 126.667);
--secondary-foreground: oklch(0.834 0.042 125.757);
--accent: oklch(0.293 0.032 126.667);
--accent-foreground: oklch(0.834 0.042 125.757);
--destructive: oklch(0.569 0.215 29.628);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.25 0.034 303.114);
--chart-1: oklch(0.25 0.034 303.114);
--chart-2: oklch(0.293 0.032 126.667);
--chart-3: oklch(0.293 0.032 126.667);
--chart-4: oklch(0.328 0.037 126.74);
--chart-5: oklch(0.247 0.039 302.825);
}