Common Colors
Common colors, like TailwindCSS colors, remain consistent regardless of the theme.
Usage Examples
HeroUI
Blue
Blue 50
Blue 100
Blue 200
Blue 300
Blue 400
Blue 500
Blue 600
Blue 700
Blue 800
Blue 900
Purple
Purple 50
Purple 100
Purple 200
Purple 300
Purple 400
Purple 500
Purple 600
Purple 700
Purple 800
Purple 900
Green
Green 50
Green 100
Green 200
Green 300
Green 400
Green 500
Green 600
Green 700
Green 800
Green 900
Red
Red 50
Red 100
Red 200
Red 300
Red 400
Red 500
Red 600
Red 700
Red 800
Red 900
Pink
Pink 50
Pink 100
Pink 200
Pink 300
Pink 400
Pink 500
Pink 600
Pink 700
Pink 800
Pink 900
Yellow
Yellow 50
Yellow 100
Yellow 200
Yellow 300
Yellow 400
Yellow 500
Yellow 600
Yellow 700
Yellow 800
Yellow 900
Cyan
Cyan 50
Cyan 100
Cyan 200
Cyan 300
Cyan 400
Cyan 500
Cyan 600
Cyan 700
Cyan 800
Cyan 900
Zinc
Zinc 50
Zinc 100
Zinc 200
Zinc 300
Zinc 400
Zinc 500
Zinc 600
Zinc 700
Zinc 800
Zinc 900
Semantic Colors
Semantic colors adapt with the theme, delivering meaning and reinforcing your brand identity.
Usage Examples
HeroUI
Layout
Background
Foreground
Divider
Focus
Content
Content 1
Content 2
Content 3
Content 4
Base
Default
Primary
Secondary
Success
Warning
Danger
Default
Default 50
Default 100
Default 200
Default 300
Default 400
Default 500
Default 600
Default 700
Default 800
Default 900
Primary
Primary 50
Primary 100
Primary 200
Primary 300
Primary 400
Primary 500
Primary 600
Primary 700
Primary 800
Primary 900
Secondary
Secondary 50
Secondary 100
Secondary 200
Secondary 300
Secondary 400
Secondary 500
Secondary 600
Secondary 700
Secondary 800
Secondary 900
Success
Success 50
Success 100
Success 200
Success 300
Success 400
Success 500
Success 600
Success 700
Success 800
Success 900
Warning
Warning 50
Warning 100
Warning 200
Warning 300
Warning 400
Warning 500
Warning 600
Warning 700
Warning 800
Warning 900
Danger
Danger 50
Danger 100
Danger 200
Danger 300
Danger 400
Danger 500
Danger 600
Danger 700
Danger 800
Danger 900