Colors

How to use daisyUI colors?

Introduction

daisyUI is fully themeable and colorable, So instead of using constant color utility classes like:
  • bg-green-500
  • bg-orange-600
  • bg-blue-700
  • etc.
It's suggested to use semantic color utility classes like:
  • bg-primary
  • bg-secondary
  • bg-accent
  • etc.
Each color name contains CSS variables and each daisyUI theme applies color values to the utility classes when it is applied.

Benefits

Semantic color names make more sense because when we design interfaces, we don't just use any random color. We define a specific color palette with names like primary, secondary, etc. and we only use those specific colors in our interfaces. Also, using semantic color names makes theming easier. You wouldn't have to define dark-mode colors for every single element and you wouldn't be limited to only light/dark themes. you can have multiple themes available and each theme is just a few lines of CSS variables.

List of all daisyUI color names

You can use these color names in your theme or in utility classes.
Color name + description Required or optional for themes Example use
primary
Primary color
required Class name: bg-primary
CSS variable: hsl(var(--p))
primary-focus
Primary color when focused
optional
Will be a darker tone of primary if not specified
Class name: bg-primary-focus
CSS variable: hsl(var(--pf))
primary-content
Foreground content color to use on primary color
optional
Will be a readable tone of primary if not specified
Class name: bg-primary-content
CSS variable: hsl(var(--pc))
secondary
Secondary color
required Class name: bg-secondary
CSS variable: hsl(var(--s))
secondary-focus
Secondary color when focused
optional
Will be a darker tone of secondary if not specified
Class name: bg-secondary-focus
CSS variable: hsl(var(--sf))
secondary-content
Foreground content color to use on secondary color
optional
Will be a readable tone of secondary if not specified
Class name: bg-secondary-content
CSS variable: hsl(var(--sc))
accent
Accent color
required Class name: bg-accent
CSS variable: hsl(var(--a))
accent-focus
Accent color when focused
optional
Will be a darker tone of accent if not specified
Class name: bg-accent-focus
CSS variable: hsl(var(--af))
accent-content
Foreground content color to use on accent color
optional
Will be a readable tone of accent if not specified
Class name: bg-accent-content
CSS variable: hsl(var(--ac))
neutral
Neutral color
required Class name: bg-neutral
CSS variable: hsl(var(--n))
neutral-focus
Neutral color when focused
optional
Will be a darker tone of neutral if not specified
Class name: bg-neutral-focus
CSS variable: hsl(var(--nf))
neutral-content
Foreground content color to use on neutral color
optional
Will be a readable tone of neutral if not specified
Class name: bg-neutral-content
CSS variable: hsl(var(--nc))
base-100
Base color of page, used for blank backgrounds
required Class name: bg-base-100
CSS variable: hsl(var(--b1))
base-200
Base color, a little darker
optional
Will be a darker tone of base-100 if not specified
Class name: bg-base-200
CSS variable: hsl(var(--b2))
base-300
Base color, even more darker
optional
Will be a darker tone of base-200 if not specified
Class name: bg-base-300
CSS variable: hsl(var(--b3))
base-content
Foreground content color to use on base color
optional
Will be a readable tone of base-100 if not specified
Class name: bg-base-content
CSS variable: hsl(var(--bc))
info
Info color
optional
Will be a default blue color if not specified
Class name: bg-info
CSS variable: hsl(var(--in))
info-content
Foreground content color to use on info color
optional
Will be a readable tone of info if not specified
Class name: bg-info-content
CSS variable: hsl(var(--inc))
success
Success color
optional
Will be a default green color if not specified
Class name: bg-success
CSS variable: hsl(var(--su))
success-content
Foreground content color to use on success color
optional
Will be a readable tone of success if not specified
Class name: bg-success-content
CSS variable: hsl(var(--suc))
warning
Warning color
optional
Will be a default orange color if not specified
Class name: bg-warning
CSS variable: hsl(var(--wa))
warning-content
Foreground content color to use on warning color
optional
Will be a readable tone of warning if not specified
Class name: bg-warning-content
CSS variable: hsl(var(--wac))
error
Error color
optional
Will be a default red color if not specified
Class name: bg-error
CSS variable: hsl(var(--er))
error-content
Foreground content color to use on error color
optional
Will be a readable tone of error if not specified
Class name: bg-error-content
CSS variable: hsl(var(--erc))

How to use

Some daisyUI components come with modifier class names and that modifier class name will apply a color. For example:
<button class="btn btn-primary">Button</button>
Or:
<input type="checkbox" class="checkbox checkbox-secondary" />
You can also use color names in utility classes just like Tailwind's original color names. These are utility classes that can be used with a color name:
bg-{COLOR_NAME}
to-{COLOR_NAME}
via-{COLOR_NAME}
from-{COLOR_NAME}
text-{COLOR_NAME}
ring-{COLOR_NAME}
fill-{COLOR_NAME}
caret-{COLOR_NAME}
stroke-{COLOR_NAME}
border-{COLOR_NAME}
divide-{COLOR_NAME}
accent-{COLOR_NAME}
shadow-{COLOR_NAME}
outline-{COLOR_NAME}
decoration-{COLOR_NAME}
placeholder-{COLOR_NAME}
ring-offset-{COLOR_NAME}
So you can use bg-primary, border-secondary, etc.