Theme

Common Colors

Common colors, like TailwindCSS colors, remain consistent regardless of the theme.

Usage

HeroUI
Open docs

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

HeroUI
Open docs

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