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.
Mobile Version / Bitcoin is a shadcn/ui theme built around a vivid orange primary color (#f7931a) with light yellow accents (#f6ebc6). The light mode uses a neutral background (#fafafa). Dark mode keeps the vivid orange primary (#f7931a) on a neutral background (#040301).
| Token | Light | Dark |
|---|---|---|
| Background | #fafafasnow | #040301black |
| Foreground | #110e03black | #fbfbf8snow |
| Card | #ffffffwhite | #070603black |
| Card foreground | #0d0a03black | #fdfdfcwhite |
| Popover | #fcfcfcsnow | #070603black |
| Popover foreground | #0d0a03black | #fdfdfcwhite |
| Primary | #f7931adarkorange | #f7931adarkorange |
| Primary foreground | #2c2202black | #2c2202black |
| Secondary | #eae8e1beige | #20201dblack |
| Secondary foreground | #5a533fdarkolivegreen | #bcbab3silver |
| Muted | #ffffffwhite | #141310black |
| Muted foreground | #5b5543darkolivegreen | #bcb6a4darkgray |
| Accent | #f6ebc6blanchedalmond | #3e3a2edarkslategray |
| Accent foreground | #4a432bdarkolivegreen | #d6d2c7lightgrey |
| Destructive | #e22a1bcrimson | #f75002orangered |
| Destructive foreground | #ffffffwhite | #ffffffwhite |
| Border | #f2f2f2whitesmoke | #22201bblack |
| Input | #f4f3f1whitesmoke | #22201bblack |
| Ring | #f7931adarkorange | #f7931adarkorange |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 18.49:1 | AAA |
| Text on card | 19.77:1 | AAA |
| Primary button | 6.83:1 | AA |
| Secondary button | 6.23:1 | AA |
| Muted text | 7.43:1 | AAA |
| Accent | 8.26:1 | AAA |
| Destructive | 4.60:1 | AA |
| Text on background | 19.88:1 | AAA |
| Text on card | 19.88:1 | AAA |
| Primary button | 6.83:1 | AA |
| Secondary button | 8.43:1 | AAA |
| Muted text | 9.18:1 | AAA |
| Accent | 7.54:1 | AAA |
| Destructive | 3.43:1 | AA Large |
Paste this into your globals.css to use Mobile Version / Bitcoin in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.985 0 170.538);
--foreground: oklch(0.163 0.023 95.381);
--muted: oklch(1 0 180);
--muted-foreground: oklch(0.451 0.029 93.126);
--popover: oklch(0.992 0 161.565);
--popover-foreground: oklch(0.146 0.021 97.142);
--card: oklch(1 0 180);
--card-foreground: oklch(0.146 0.021 97.142);
--border: oklch(0.961 0 180);
--input: oklch(0.964 0.003 92.687);
--primary: oklch(0.752 0.166 62.587);
--primary-foreground: oklch(0.257 0.05 91.903);
--secondary: oklch(0.93 0.009 92.752);
--secondary-foreground: oklch(0.444 0.032 93.149);
--accent: oklch(0.939 0.05 93.075);
--accent-foreground: oklch(0.384 0.039 93.148);
--destructive: oklch(0.589 0.219 29.805);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.752 0.166 62.587);
--chart-1: oklch(0.752 0.166 62.587);
--chart-2: oklch(0.93 0.009 92.752);
--chart-3: oklch(0.939 0.05 93.075);
--chart-4: oklch(0.951 0.006 92.723);
--chart-5: oklch(0.757 0.17 61.958);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.098 0.009 96.316);
--foreground: oklch(0.987 0.003 92.689);
--muted: oklch(0.186 0.006 92.925);
--muted-foreground: oklch(0.777 0.026 92.95);
--popover: oklch(0.123 0.011 96.316);
--popover-foreground: oklch(0.994 0.002 92.673);
--card: oklch(0.123 0.011 96.316);
--card-foreground: oklch(0.994 0.002 92.673);
--border: oklch(0.245 0.01 92.995);
--input: oklch(0.245 0.01 92.995);
--primary: oklch(0.752 0.166 62.587);
--primary-foreground: oklch(0.257 0.05 91.903);
--secondary: oklch(0.242 0.005 92.863);
--secondary-foreground: oklch(0.788 0.009 92.772);
--accent: oklch(0.348 0.021 93.11);
--accent-foreground: oklch(0.865 0.016 92.826);
--destructive: oklch(0.658 0.214 38.132);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.752 0.166 62.587);
--chart-1: oklch(0.752 0.166 62.587);
--chart-2: oklch(0.242 0.005 92.863);
--chart-3: oklch(0.348 0.021 93.11);
--chart-4: oklch(0.275 0.007 92.875);
--chart-5: oklch(0.757 0.17 61.958);
}