Generate feedback colors (success, warning, error, and info) for shadcn/ui

Go to generator

10000+Themes for shadcn/ui

Used by 4k+ developers. Want me to build your product next? Let's work together.

Book a Call

Unusual for shadcn/ui

Unusual is a shadcn/ui theme built around a neutral gray primary color (#857986) with muted light purple accents (#d5b8d5). The light mode uses a neutral background (#fefbfe). Dark mode keeps the neutral gray primary (#857986) on a neutral background (#080208).

Color palette

TokenLightDark
Background
#fefbfewhite
#080208black
Foreground
#0c030dblack
#fdfcfdwhite
Card
#fefbfewhite
#080208black
Card foreground
#0c030dblack
#fdfcfdwhite
Popover
#fefbfewhite
#080208black
Popover foreground
#0c030dblack
#fdfcfdwhite
Primary
#857986gray
#857986gray
Primary foreground
#ffffffwhite
#ffffffwhite
Secondary
#ddcfdegainsboro
#372938darkslategray
Secondary foreground
#473248darkslategray
#d1c1d1thistle
Muted
#f3f1f3whitesmoke
#0e0c0eblack
Muted foreground
#564356darkslategray
#bca9bcsilver
Accent
#d5b8d5thistle
#543455darkslategray
Accent foreground
#39223adarkslategray
#e5d6e6gainsboro
Destructive
#90350esaddlebrown
#d14d15chocolate
Destructive foreground
#fbe1d5antiquewhite
#ffffffwhite
Border
#e5e7eblavender
#1f2937darkslategray
Input
#e5e7eblavender
#1f2937darkslategray
Ring
#857986gray
#857986gray

Contrast

WCAG 2 contrast ratios between each background and its foreground color.

Light mode
Text on background19.74:1AAA
Text on card19.74:1AAA
Primary button4.12:1AA Large
Secondary button7.72:1AAA
Muted text8.02:1AAA
Accent7.96:1AAA
Destructive6.23:1AA
Dark mode
Text on background20.05:1AAA
Text on card20.05:1AAA
Primary button4.12:1AA Large
Secondary button7.96:1AAA
Muted text8.87:1AAA
Accent7.51:1AAA
Destructive4.39:1AA Large

CSS variables

Paste this into your globals.css to use Unusual in your shadcn/ui project.

:root {
  --radius: 0.5rem;
  --background: oklch(0.991 0.005 324.651);
  --foreground: oklch(0.122 0.035 326.468);
  --muted: oklch(0.961 0.004 324.644);
  --muted-foreground: oklch(0.409 0.041 325.229);
  --popover: oklch(0.991 0.005 324.651);
  --popover-foreground: oklch(0.122 0.035 326.468);
  --card: oklch(0.991 0.005 324.651);
  --card-foreground: oklch(0.122 0.035 326.468);
  --border: oklch(0.928 0.006 264.531);
  --input: oklch(0.928 0.006 264.531);
  --primary: oklch(0.592 0.024 324.874);
  --primary-foreground: oklch(1 0 180);
  --secondary: oklch(0.87 0.025 324.801);
  --secondary-foreground: oklch(0.351 0.047 325.418);
  --accent: oklch(0.817 0.051 325.005);
  --accent-foreground: oklch(0.291 0.053 325.672);
  --destructive: oklch(0.454 0.132 40.269);
  --destructive-foreground: oklch(0.927 0.033 44.655);
  --ring: oklch(0.592 0.024 324.874);
  --chart-1: oklch(0.592 0.024 324.874);
  --chart-2: oklch(0.87 0.025 324.801);
  --chart-3: oklch(0.817 0.051 325.005);
  --chart-4: oklch(0.895 0.02 324.762);
  --chart-5: oklch(0.589 0.039 325.024);
}

.dark {
  --radius: 0.5rem;
  --background: oklch(0.108 0.025 326.218);
  --foreground: oklch(0.992 0.001 324.628);
  --muted: oklch(0.156 0.006 324.861);
  --muted-foreground: oklch(0.756 0.035 324.911);
  --popover: oklch(0.108 0.025 326.218);
  --popover-foreground: oklch(0.992 0.001 324.628);
  --card: oklch(0.108 0.025 326.218);
  --card-foreground: oklch(0.992 0.001 324.628);
  --border: oklch(0.278 0.03 256.848);
  --input: oklch(0.278 0.03 256.848);
  --primary: oklch(0.592 0.024 324.874);
  --primary-foreground: oklch(1 0 180);
  --secondary: oklch(0.304 0.032 325.263);
  --secondary-foreground: oklch(0.83 0.028 324.83);
  --accent: oklch(0.378 0.068 325.673);
  --accent-foreground: oklch(0.893 0.027 324.81);
  --destructive: oklch(0.593 0.178 39.727);
  --destructive-foreground: oklch(1 0 180);
  --ring: oklch(0.592 0.024 324.874);
  --chart-1: oklch(0.592 0.024 324.874);
  --chart-2: oklch(0.304 0.032 325.263);
  --chart-3: oklch(0.378 0.068 325.673);
  --chart-4: oklch(0.333 0.036 325.282);
  --chart-5: oklch(0.589 0.039 325.024);
}

More shadcn/ui themes

TermsPrivacy Policy