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

Caramel for shadcn/ui

Caramel is a shadcn/ui theme built around a deep teal primary color (#1a4233) with muted light teal accents (#ced9d5). The light mode uses a neutral background (#f8fbfa). Dark mode keeps the deep teal primary (#1a4233) on a teal-tinted background (#040b09).

Color palette

TokenLightDark
Background
#f8fbfamintcream
#040b09black
Foreground
#010403black
#ffffffwhite
Card
#f8fbfamintcream
#040b09black
Card foreground
#010403black
#ffffffwhite
Popover
#f8fbfamintcream
#040b09black
Popover foreground
#010403black
#ffffffwhite
Primary
#1a4233darkslategray
#1a4233darkslategray
Primary foreground
#afdfcdpowderblue
#afdfcdpowderblue
Secondary
#ced9d5lightgrey
#293d36darkslategray
Secondary foreground
#33423ddarkslategray
#c2d6cflightgrey
Muted
#e5f1eclavender
#0e1a16black
Muted foreground
#46534edarkslategray
#acb9b4darkgray
Accent
#ced9d5lightgrey
#293d36darkslategray
Accent foreground
#33423ddarkslategray
#c2d6cflightgrey
Destructive
#81160emaroon
#ea4a3etomato
Destructive foreground
#f9cbc8pink
#ffffffwhite
Border
#e5e7eblavender
#1f2937darkslategray
Input
#e5e7eblavender
#1f2937darkslategray
Ring
#1a4233darkslategray
#1a4233darkslategray

Contrast

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

Light mode
Text on background19.85:1AAA
Text on card19.85:1AAA
Primary button7.65:1AAA
Secondary button7.31:1AAA
Muted text6.92:1AA
Accent7.31:1AAA
Destructive7.03:1AAA
Dark mode
Text on background19.84:1AAA
Text on card19.84:1AAA
Primary button7.65:1AAA
Secondary button7.63:1AAA
Muted text8.76:1AAA
Accent7.63:1AAA
Destructive3.80:1AA Large

CSS variables

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

:root {
  --radius: 0.5rem;
  --background: oklch(0.987 0.004 172.467);
  --foreground: oklch(0.099 0.012 172.845);
  --muted: oklch(0.947 0.014 172.147);
  --muted-foreground: oklch(0.43 0.019 171.214);
  --popover: oklch(0.987 0.004 172.467);
  --popover-foreground: oklch(0.099 0.012 172.845);
  --card: oklch(0.987 0.004 172.467);
  --card-foreground: oklch(0.099 0.012 172.845);
  --border: oklch(0.928 0.006 264.531);
  --input: oklch(0.928 0.006 264.531);
  --primary: oklch(0.344 0.052 166.758);
  --primary-foreground: oklch(0.865 0.056 170.552);
  --secondary: oklch(0.876 0.013 172.126);
  --secondary-foreground: oklch(0.365 0.022 170.701);
  --accent: oklch(0.876 0.013 172.126);
  --accent-foreground: oklch(0.365 0.022 170.701);
  --destructive: oklch(0.391 0.142 29.38);
  --destructive-foreground: oklch(0.881 0.052 22.969);
  --ring: oklch(0.344 0.052 166.758);
  --chart-1: oklch(0.344 0.052 166.758);
  --chart-2: oklch(0.876 0.013 172.126);
  --chart-3: oklch(0.876 0.013 172.126);
  --chart-4: oklch(0.898 0.011 172.218);
  --chart-5: oklch(0.348 0.055 166.361);
}

.dark {
  --radius: 0.5rem;
  --background: oklch(0.141 0.015 172.567);
  --foreground: oklch(1 0 180);
  --muted: oklch(0.206 0.019 169.516);
  --muted-foreground: oklch(0.775 0.017 171.933);
  --popover: oklch(0.141 0.015 172.567);
  --popover-foreground: oklch(1 0 180);
  --card: oklch(0.141 0.015 172.567);
  --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.344 0.052 166.758);
  --primary-foreground: oklch(0.865 0.056 170.552);
  --secondary: oklch(0.34 0.028 169.919);
  --secondary-foreground: oklch(0.859 0.023 171.778);
  --accent: oklch(0.34 0.028 169.919);
  --accent-foreground: oklch(0.859 0.023 171.778);
  --destructive: oklch(0.633 0.198 28.193);
  --destructive-foreground: oklch(1 0 180);
  --ring: oklch(0.344 0.052 166.758);
  --chart-1: oklch(0.344 0.052 166.758);
  --chart-2: oklch(0.34 0.028 169.919);
  --chart-3: oklch(0.34 0.028 169.919);
  --chart-4: oklch(0.372 0.031 169.843);
  --chart-5: oklch(0.348 0.055 166.361);
}

More shadcn/ui themes

TermsPrivacy Policy