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

Calm for shadcn/ui

Calm is a shadcn/ui theme built around a muted deep indigo primary color (#393947) with neutral gray accents (#e4e4e7). The light mode uses a neutral background (#fafafa). Dark mode switches to a light indigo primary (#dedeed) on a neutral background (#18181b).

Color palette

TokenLightDark
Background
#fafafasnow
#18181bblack
Foreground
#27272adarkslategray
#fafafasnow
Card
#fcfcfcsnow
#18181bblack
Card foreground
#27272adarkslategray
#fafafasnow
Popover
#fcfcfcsnow
#18181bblack
Popover foreground
#27272adarkslategray
#dedee2gainsboro
Primary
#393947darkslategray
#dedeedgainsboro
Primary foreground
#fafafasnow
#242428darkslategray
Secondary
#cbcbdalightgrey
#2e2e37darkslategray
Secondary foreground
#242428darkslategray
#cccce0lightgrey
Muted
#e7e7e9lavender
#1f1f21black
Muted foreground
#71717adimgray
#8d8d91lightslategray
Accent
#e4e4e7gainsboro
#242428darkslategray
Accent foreground
#242428darkslategray
#fafafasnow
Destructive
#f55b5btomato
#f87171salmon
Destructive foreground
#ffffffwhite
#18181bblack
Border
#edededwhitesmoke
#242428darkslategray
Input
#edededwhitesmoke
#242428darkslategray
Ring
#4e4747darkslategray
#bbbbbfsilver

Contrast

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

Light mode
Text on background14.27:1AAA
Text on card14.51:1AAA
Primary button10.88:1AAA
Secondary button9.67:1AAA
Muted text3.92:1AA Large
Accent12.18:1AAA
Destructive3.20:1AA Large
Dark mode
Text on background16.97:1AAA
Text on card16.97:1AAA
Primary button11.59:1AAA
Secondary button8.55:1AAA
Muted text4.95:1AA
Accent14.81:1AAA
Destructive6.40:1AA

CSS variables

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

:root {
  --radius: 0.5rem;
  --background: oklch(0.985 0 170.538);
  --foreground: oklch(0.274 0.005 286.033);
  --muted: oklch(0.93 0.003 286.346);
  --muted-foreground: oklch(0.552 0.014 285.938);
  --popover: oklch(0.992 0 161.565);
  --popover-foreground: oklch(0.274 0.005 286.033);
  --card: oklch(0.991 0 180);
  --card-foreground: oklch(0.274 0.005 286.033);
  --border: oklch(0.947 0 158.199);
  --input: oklch(0.946 0 174.289);
  --primary: oklch(0.35 0.024 285.119);
  --primary-foreground: oklch(0.985 0 170.538);
  --secondary: oklch(0.848 0.02 285.971);
  --secondary-foreground: oklch(0.262 0.007 285.878);
  --accent: oklch(0.92 0.004 286.32);
  --accent-foreground: oklch(0.262 0.007 285.878);
  --destructive: oklch(0.675 0.189 23.659);
  --destructive-foreground: oklch(1 0 180);
  --ring: oklch(0.404 0.011 17.604);
  --chart-1: oklch(0.35 0.024 285.119);
  --chart-2: oklch(0.848 0.02 285.971);
  --chart-3: oklch(0.92 0.004 286.32);
  --chart-4: oklch(0.874 0.016 286.06);
  --chart-5: oklch(0.344 0.03 284.696);
}

.dark {
  --radius: 0.5rem;
  --background: oklch(0.21 0.006 285.885);
  --foreground: oklch(0.985 0 170.538);
  --muted: oklch(0.242 0.004 286.13);
  --muted-foreground: oklch(0.646 0.006 286.241);
  --popover: oklch(0.21 0.006 285.885);
  --popover-foreground: oklch(0.902 0.005 278.182);
  --card: oklch(0.21 0.006 285.885);
  --card-foreground: oklch(0.985 0 170.538);
  --border: oklch(0.262 0.007 285.878);
  --input: oklch(0.262 0.007 285.878);
  --primary: oklch(0.904 0.021 285.969);
  --primary-foreground: oklch(0.262 0.007 285.878);
  --secondary: oklch(0.303 0.017 285.354);
  --secondary-foreground: oklch(0.851 0.027 285.812);
  --accent: oklch(0.262 0.007 285.878);
  --accent-foreground: oklch(0.985 0 170.538);
  --destructive: oklch(0.711 0.166 22.217);
  --destructive-foreground: oklch(0.21 0.006 285.885);
  --ring: oklch(0.793 0.006 286.272);
  --chart-1: oklch(0.904 0.021 285.969);
  --chart-2: oklch(0.303 0.017 285.354);
  --chart-3: oklch(0.262 0.007 285.878);
  --chart-4: oklch(0.331 0.019 285.319);
  --chart-5: oklch(0.903 0.023 285.925);
}

More shadcn/ui themes

TermsPrivacy Policy