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.
Outside Orange Pospsicle is a shadcn/ui theme built around a vivid orange primary color (#f0a824) with vivid green accents (#d1f024). The light mode uses a neutral background (#fefdfb). Dark mode keeps the vivid orange primary (#f0a824) on a neutral background (#040301).
| Token | Light | Dark |
|---|---|---|
| Background | #fefdfbsnow | #040301black |
| Foreground | #110c03black | #ffffffwhite |
| Card | #fefdfbsnow | #040301black |
| Card foreground | #110c03black | #ffffffwhite |
| Popover | #fefdfbsnow | #040301black |
| Popover foreground | #110c03black | #ffffffwhite |
| Primary | #f0a824goldenrod | #f0a824goldenrod |
| Primary foreground | #432d05maroon | #432d05maroon |
| Secondary | #f04224orangered | #f04224orangered |
| Secondary foreground | #ffffffwhite | #ffffffwhite |
| Muted | #f4f1f0whitesmoke | #0f0b0bblack |
| Muted foreground | #4b4948darkslategray | #b7b4b4silver |
| Accent | #d1f024greenyellow | #d1f024greenyellow |
| Accent foreground | #394305darkolivegreen | #394305darkolivegreen |
| Destructive | #6b0f01maroon | #fe462atomato |
| Destructive foreground | #ffab9flightpink | #ffffffwhite |
| Border | #f2f0edwhitesmoke | #23201ablack |
| Input | #f2f0edwhitesmoke | #23201ablack |
| Ring | #f0a824goldenrod | #f0a824goldenrod |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 19.13:1 | AAA |
| Text on card | 19.13:1 | AAA |
| Primary button | 6.40:1 | AA |
| Secondary button | 3.81:1 | AA Large |
| Muted text | 7.96:1 | AAA |
| Accent | 8.17:1 | AAA |
| Destructive | 6.86:1 | AA |
| Text on background | 20.63:1 | AAA |
| Text on card | 20.63:1 | AAA |
| Primary button | 6.40:1 | AA |
| Secondary button | 3.81:1 | AA Large |
| Muted text | 9.49:1 | AAA |
| Accent | 8.17:1 | AAA |
| Destructive | 3.42:1 | AA Large |
Paste this into your globals.css to use Outside Orange Pospsicle in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.994 0.002 83.057);
--foreground: oklch(0.158 0.022 86.3);
--muted: oklch(0.96 0.004 29.481);
--muted-foreground: oklch(0.407 0.003 29.497);
--popover: oklch(0.994 0.002 83.057);
--popover-foreground: oklch(0.158 0.022 86.3);
--card: oklch(0.994 0.002 83.057);
--card-foreground: oklch(0.158 0.022 86.3);
--border: oklch(0.957 0.004 83.059);
--input: oklch(0.957 0.004 83.059);
--primary: oklch(0.782 0.156 76.325);
--primary-foreground: oklch(0.315 0.062 77.695);
--secondary: oklch(0.633 0.214 32.329);
--secondary-foreground: oklch(1 0 180);
--accent: oklch(0.901 0.205 118.838);
--accent-foreground: oklch(0.361 0.081 118.513);
--destructive: oklch(0.34 0.127 32.287);
--destructive-foreground: oklch(0.82 0.1 29.039);
--ring: oklch(0.782 0.156 76.325);
--chart-1: oklch(0.782 0.156 76.325);
--chart-2: oklch(0.633 0.214 32.329);
--chart-3: oklch(0.901 0.205 118.838);
--chart-4: oklch(0.648 0.203 32.374);
--chart-5: oklch(0.788 0.159 75.825);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.096 0.008 87.938);
--foreground: oklch(1 0 180);
--muted: oklch(0.155 0.006 29.658);
--muted-foreground: oklch(0.772 0.003 29.48);
--popover: oklch(0.096 0.008 87.938);
--popover-foreground: oklch(1 0 180);
--card: oklch(0.096 0.008 87.938);
--card-foreground: oklch(1 0 180);
--border: oklch(0.245 0.012 82.997);
--input: oklch(0.245 0.012 82.997);
--primary: oklch(0.782 0.156 76.325);
--primary-foreground: oklch(0.315 0.062 77.695);
--secondary: oklch(0.633 0.214 32.329);
--secondary-foreground: oklch(1 0 180);
--accent: oklch(0.901 0.205 118.838);
--accent-foreground: oklch(0.361 0.081 118.513);
--destructive: oklch(0.661 0.224 31.661);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.782 0.156 76.325);
--chart-1: oklch(0.782 0.156 76.325);
--chart-2: oklch(0.633 0.214 32.329);
--chart-3: oklch(0.901 0.205 118.838);
--chart-4: oklch(0.648 0.203 32.374);
--chart-5: oklch(0.788 0.159 75.825);
}