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.
Rutabaga is a shadcn/ui theme built around a muted light purple primary color (#f3ebf4) with muted light purple accents (#e1d4e2). The light mode uses a neutral background (#fcf7fd). Dark mode keeps the muted light purple primary (#f3ebf4) on a purple-tinted background (#0e060e).
| Token | Light | Dark |
|---|---|---|
| Background | #fcf7fdghostwhite | #0e060eblack |
| Foreground | #100311black | #faf5faghostwhite |
| Card | #fcf7fdghostwhite | #0e060eblack |
| Card foreground | #100311black | #faf5faghostwhite |
| Popover | #fcf7fdghostwhite | #0e060eblack |
| Popover foreground | #100311black | #faf5faghostwhite |
| Primary | #f3ebf4whitesmoke | #f3ebf4whitesmoke |
| Primary foreground | #6c3e70rebeccapurple | #6c3e70rebeccapurple |
| Secondary | #ece8edlavender | #151415black |
| Secondary foreground | #59495bdimgray | #aeadaedarkgray |
| Muted | #f3f1f4whitesmoke | #0e0b0eblack |
| Muted foreground | #5a585adimgray | #a6a5a7darkgray |
| Accent | #e1d4e2gainsboro | #312a32darkslategray |
| Accent foreground | #4d3550darkslategray | #cbc2cbsilver |
| Destructive | #b44913sienna | #d95717chocolate |
| Destructive foreground | #ffffffwhite | #ffffffwhite |
| Border | #e5e7eblavender | #1f2937darkslategray |
| Input | #e5e7eblavender | #1f2937darkslategray |
| Ring | #f3ebf4whitesmoke | #f3ebf4whitesmoke |
WCAG 2 contrast ratios between each background and its foreground color.
| Text on background | 19.03:1 | AAA |
| Text on card | 19.03:1 | AAA |
| Primary button | 7.04:1 | AAA |
| Secondary button | 6.87:1 | AA |
| Muted text | 6.27:1 | AA |
| Accent | 7.59:1 | AAA |
| Destructive | 5.39:1 | AA |
| Text on background | 18.55:1 | AAA |
| Text on card | 18.55:1 | AAA |
| Primary button | 7.04:1 | AAA |
| Secondary button | 8.21:1 | AAA |
| Muted text | 7.96:1 | AAA |
| Accent | 8.02:1 | AAA |
| Destructive | 3.93:1 | AA Large |
Paste this into your globals.css to use Rutabaga in your shadcn/ui project.
:root {
--radius: 0.5rem;
--background: oklch(0.982 0.01 323.182);
--foreground: oklch(0.136 0.039 324.644);
--muted: oklch(0.96 0.005 323.156);
--muted-foreground: oklch(0.464 0.004 323.169);
--popover: oklch(0.982 0.01 323.182);
--popover-foreground: oklch(0.136 0.039 324.644);
--card: oklch(0.982 0.01 323.182);
--card-foreground: oklch(0.136 0.039 324.644);
--border: oklch(0.928 0.006 264.531);
--input: oklch(0.928 0.006 264.531);
--primary: oklch(0.95 0.015 323.205);
--primary-foreground: oklch(0.438 0.097 324.022);
--secondary: oklch(0.937 0.007 323.171);
--secondary-foreground: oklch(0.428 0.036 323.508);
--accent: oklch(0.885 0.024 323.258);
--accent-foreground: oklch(0.368 0.055 323.767);
--destructive: oklch(0.54 0.152 42.42);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.95 0.015 323.205);
--chart-1: oklch(0.95 0.015 323.205);
--chart-2: oklch(0.937 0.007 323.171);
--chart-3: oklch(0.885 0.024 323.258);
--chart-4: oklch(0.96 0.005 323.156);
--chart-5: oklch(0.949 0.016 323.212);
}
.dark {
--radius: 0.5rem;
--background: oklch(0.14 0.022 323.993);
--foreground: oklch(0.974 0.009 323.178);
--muted: oklch(0.156 0.007 323.345);
--muted-foreground: oklch(0.723 0.003 323.154);
--popover: oklch(0.14 0.022 323.993);
--popover-foreground: oklch(0.974 0.009 323.178);
--card: oklch(0.14 0.022 323.993);
--card-foreground: oklch(0.974 0.009 323.178);
--border: oklch(0.278 0.03 256.848);
--input: oklch(0.278 0.03 256.848);
--primary: oklch(0.95 0.015 323.205);
--primary-foreground: oklch(0.438 0.097 324.022);
--secondary: oklch(0.193 0.001 323.158);
--secondary-foreground: oklch(0.748 0.003 323.152);
--accent: oklch(0.296 0.016 323.381);
--accent-foreground: oklch(0.825 0.015 323.22);
--destructive: oklch(0.619 0.177 42.14);
--destructive-foreground: oklch(1 0 180);
--ring: oklch(0.95 0.015 323.205);
--chart-1: oklch(0.95 0.015 323.205);
--chart-2: oklch(0.193 0.001 323.158);
--chart-3: oklch(0.296 0.016 323.381);
--chart-4: oklch(0.226 0.001 323.161);
--chart-5: oklch(0.949 0.016 323.212);
}