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.
portfolio is a shadcn/ui theme built around a vivid blue primary color (#3d61ff) with muted light blue accents (#ced2e3). The light mode uses a neutral background (#ffffff). Dark mode keeps the vivid blue primary (#3d61ff) on a blue-tinted background (#06080e).
| Token | Light | Dark |
|---|---|---|
| Background | #ffffffwhite | #06080eblack |
| Foreground | #040611black | #fcfcfdwhite |
| Card | #fcfcfcsnow | #080912black |
| Card foreground | #03050cblack | #ffffffwhite |
| Popover | #fcfcfcsnow | #080912black |
| Popover foreground | #03050cblack | #ffffffwhite |
| Primary | #3d61ffroyalblue | #3d61ffroyalblue |
| Primary foreground | #ffffffwhite | #ffffffwhite |
| Secondary | #e0e2ebgainsboro | #121317black |
| Secondary foreground | #3d435cdarkslategray | #a2a6b9darkgray |
| Muted | #d7d9e0gainsboro | #1f2128black |
| Muted foreground | #555868dimgray | #979baadarkgray |
| Accent | #ced2e3lightgrey | #212535darkslategray |
| Accent foreground | #2e3452darkslategray | #b7bcd2lightsteelblue |
| Destructive | #ff0d00red | #f22c21crimson |
| Destructive foreground | #ffffffwhite | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #3d61ffroyalblue | #3d61ffroyalblue |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 20.20:1 | AAA |
| Text on card | 19.93:1 | AAA |
| Primary button | 4.83:1 | AA |
| Secondary button | 7.55:1 | AAA |
| Muted text | 4.97:1 | AA |
| Accent | 8.07:1 | AAA |
| Destructive | 3.95:1 | AA Large |
| Text on background | 19.56:1 | AAA |
| Text on card | 19.82:1 | AAA |
| Primary button | 4.83:1 | AA |
| Secondary button | 7.70:1 | AAA |
| Muted text | 5.80:1 | AA |
| Accent | 8.05:1 | AAA |
| Destructive | 4.07:1 | AA Large |
Paste this into your globals.css to use portfolio in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(1 0 180);
--foreground: oklch(0.126 0.026 268.939);
--muted: oklch(0.885 0.01 276.021);
--muted-foreground: oklch(0.464 0.025 275.387);
--popover: oklch(0.992 0 161.565);
--popover-foreground: oklch(0.114 0.022 268.251);
--card: oklch(0.992 0 161.565);
--card-foreground: oklch(0.114 0.022 268.251);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.567 0.237 267.896);
--primary-foreground: oklch(1 0 180);
--secondary: oklch(0.915 0.011 276);
--secondary-foreground: oklch(0.388 0.043 274.435);
--accent: oklch(0.866 0.024 275.781);
--accent-foreground: oklch(0.335 0.052 273.604);
--destructive: oklch(0.63 0.256 29.629);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.567 0.237 267.896);
--chart-1: oklch(0.567 0.237 267.896);
--chart-2: oklch(0.915 0.011 276);
--chart-3: oklch(0.866 0.024 275.781);
--chart-4: oklch(0.94 0.008 276.055);
--chart-5: oklch(0.565 0.244 267.612);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.134 0.016 272.261);
--foreground: oklch(0.991 0.001 276.148);
--muted: oklch(0.249 0.013 275.396);
--muted-foreground: oklch(0.691 0.023 275.711);
--popover: oklch(0.144 0.019 273.129);
--popover-foreground: oklch(1 0 180);
--card: oklch(0.144 0.019 273.129);
--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.567 0.237 267.896);
--primary-foreground: oklch(1 0 180);
--secondary: oklch(0.186 0.01 275.429);
--secondary-foreground: oklch(0.728 0.027 275.646);
--accent: oklch(0.269 0.031 274.373);
--accent-foreground: oklch(0.798 0.032 275.616);
--destructive: oklch(0.62 0.232 29.041);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.567 0.237 267.896);
--chart-1: oklch(0.567 0.237 267.896);
--chart-2: oklch(0.186 0.01 275.429);
--chart-3: oklch(0.269 0.031 274.373);
--chart-4: oklch(0.217 0.013 275.322);
--chart-5: oklch(0.565 0.244 267.612);
}