Colors
Fusion CSS expertly-crafted default color palette out-of-the-box that is a great starting point if you dont have your own specific branding in mind.
You just need to add a class for the
background-color
like
bg-{color}-{shade}
for example.
I have a class bg-emerald-300
I have a class bg-orange-500
I have a class bg-cyan-400
I have a class bg-purple-700
You just need to add a class for
color as well
text-{color}-{shade}
for example.
I have a class bg-red-100 and text-red-500
I have a class bg-purple-900 and text-white
I have a class bg-cyan-400 and text-pink-500
I have a class bg-teal-700 and text-yellow-300
We also have the same patten for
hover color classes
like
bg-hover-{color}-{shade}
and
text-hover-{color}-{shade}
for example.
I have a class bg-rose-500 and bg-hover-purple-500
I have a class bg-fuchsia-500 and bg-hover-yellow-500
I have a class bg-cyan-400 and text-hover-red-500
I have a class bg-teal-700 and text-hover-orange-300
Color Palette
Grey
50
100
200
300
400
500
600
700
800
900
Slate
50
100
200
300
400
500
600
700
800
900
Stone
50
100
200
300
400
500
600
700
800
900
Red
50
100
200
300
400
500
600
700
800
900
Orange
50
100
200
300
400
500
600
700
800
900
Amber
50
100
200
300
400
500
600
700
800
900
Yellow
50
100
200
300
400
500
600
700
800
900
Lime
50
100
200
300
400
500
600
700
800
900
Green
50
100
200
300
400
500
600
700
800
900
Emerald
50
100
200
300
400
500
600
700
800
900
Teal
50
100
200
300
400
500
600
700
800
900
Cyan
50
100
200
300
400
500
600
700
800
900
Sky
50
100
200
300
400
500
600
700
800
900
Blue
50
100
200
300
400
500
600
700
800
900
Indigo
50
100
200
300
400
500
600
700
800
900
Violet
50
100
200
300
400
500
600
700
800
900
Purple
50
100
200
300
400
500
600
700
800
900
Fuchsia
50
100
200
300
400
500
600
700
800
900
Rose
50
100
200
300
400
500
600
700
800
900
Pink
50
100
200
300
400
500
600
700
800
900