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.
Cowboy is a shadcn/ui theme built around a near-white primary color (#fefbfb) with muted light red accents (#d2c1c5). The light mode uses a neutral background (#ffffff). Dark mode keeps the near-white primary (#fefbfb) on a red-tinted background (#0b0406).
| Token | Light | Dark |
|---|---|---|
| Background | #ffffffwhite | #0b0406black |
| Foreground | #100407black | #fdfcfcsnow |
| Card | #ffffffwhite | #0b0406black |
| Card foreground | #100407black | #fdfcfcsnow |
| Popover | #ffffffwhite | #0b0406black |
| Popover foreground | #100407black | #fdfcfcsnow |
| Primary | #fefbfbsnow | #fefbfbsnow |
| Primary foreground | #ac1b3dbrown | #ac1b3dbrown |
| Secondary | #dcd6d7gainsboro | #242323black |
| Secondary foreground | #453b3ddarkslategray | #bebbbcsilver |
| Muted | #efebeclinen | #141011black |
| Muted foreground | #61484ddimgray | #b79ea4darkgray |
| Accent | #d2c1c5silver | #372f31darkslategray |
| Accent foreground | #38292cdarkslategray | #d0c8calightgrey |
| Destructive | #b1110bfirebrick | #f12e27crimson |
| Destructive foreground | #fef1f1lavenderblush | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #fefbfbsnow | #fefbfbsnow |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 20.14:1 | AAA |
| Text on card | 20.14:1 | AAA |
| Primary button | 6.84:1 | AA |
| Secondary button | 7.50:1 | AAA |
| Muted text | 6.98:1 | AA |
| Accent | 7.99:1 | AAA |
| Destructive | 6.43:1 | AA |
| Text on background | 19.83:1 | AAA |
| Text on card | 19.83:1 | AAA |
| Primary button | 6.84:1 | AA |
| Secondary button | 8.21:1 | AAA |
| Muted text | 7.60:1 | AAA |
| Accent | 7.93:1 | AAA |
| Destructive | 4.06:1 | AA Large |
Paste this into your globals.css to use Cowboy in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(1 0 180);
--foreground: oklch(0.134 0.025 2.415);
--muted: oklch(0.943 0.005 1.114);
--muted-foreground: oklch(0.429 0.036 3.199);
--popover: oklch(1 0 180);
--popover-foreground: oklch(0.134 0.025 2.415);
--card: oklch(1 0 180);
--card-foreground: oklch(0.134 0.025 2.415);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.99 0.004 1.077);
--primary-foreground: oklch(0.485 0.178 15.212);
--secondary: oklch(0.88 0.007 1.182);
--secondary-foreground: oklch(0.362 0.015 2.074);
--accent: oklch(0.826 0.02 1.629);
--accent-foreground: oklch(0.299 0.024 3.117);
--destructive: oklch(0.484 0.19 29.101);
--destructive-foreground: oklch(0.968 0.014 19.812);
--ring: oklch(0.99 0.004 1.077);
--chart-1: oklch(0.99 0.004 1.077);
--chart-2: oklch(0.88 0.007 1.182);
--chart-3: oklch(0.826 0.02 1.629);
--chart-4: oklch(0.905 0.006 1.132);
--chart-5: oklch(0.99 0.004 1.082);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.122 0.019 1.107);
--foreground: oklch(0.992 0.001 0.988);
--muted: oklch(0.177 0.008 2.2);
--muted-foreground: oklch(0.724 0.031 2.121);
--popover: oklch(0.122 0.019 1.107);
--popover-foreground: oklch(0.992 0.001 0.988);
--card: oklch(0.122 0.019 1.107);
--card-foreground: oklch(0.992 0.001 0.988);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.99 0.004 1.077);
--primary-foreground: oklch(0.485 0.178 15.212);
--secondary: oklch(0.258 0.002 1.2);
--secondary-foreground: oklch(0.796 0.003 1.069);
--accent: oklch(0.314 0.012 2.025);
--accent-foreground: oklch(0.84 0.009 1.273);
--destructive: oklch(0.62 0.229 28.355);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.99 0.004 1.077);
--chart-1: oklch(0.99 0.004 1.077);
--chart-2: oklch(0.258 0.002 1.2);
--chart-3: oklch(0.314 0.012 2.025);
--chart-4: oklch(0.289 0.003 1.213);
--chart-5: oklch(0.99 0.004 1.082);
}