aione framework has its own color palette based on the base colors. Each of these colors is defined with a base color class and an optional lighten or darken class that give beautiful shade to your color
Text Color
Copy Code
Text Color
red lighten-5
red lighten-4
red lighten-3
red lighten-2
red lighten-1
red
red darken-1
red darken-2
red darken-3
red darken-4
red accent-1
red accent-2
red accent-3
red accent-4
pink lighten-5
pink lighten-4
pink lighten-3
pink lighten-2
pink lighten-1
pink
pink darken-1
pink darken-2
pink darken-3
pink darken-4
pink accent-1
pink accent-2
pink accent-3
pink accent-4
purple lighten-5
purple lighten-4
purple lighten-3
purple lighten-2
purple lighten-1
purple
purple darken-1
purple darken-2
purple darken-3
purple darken-4
purple accent-1
purple accent-2
purple accent-3
purple accent-4
deep-purple lighten-5
deep-purple lighten-4
deep-purple lighten-3
deep-purple lighten-2
deep-purple lighten-1
deep-purple
deep-purple darken-1
deep-purple darken-2
deep-purple darken-3
deep-purple darken-4
deep-purple accent-1
deep-purple accent-2
deep-purple accent-3
deep-purple accent-4
indigo lighten-5
indigolighten-4
indigo lighten-3
indigo lighten-2
indigo lighten-1
indigo
indigo darken-1
indigo darken-2
indigo darken-3
indigo darken-4
indigo accent-1
indigo accent-2
indigo accent-3
indigo accent-4
blue lighten-5
blue lighten-4
blue lighten-3
blue lighten-2
blue lighten-1
blue
blue darken-1
blue darken-2
blue darken-3
blue darken-4
blue accent-1
blue accent-2
blue accent-3
blue accent-4
light-blue lighten-5
light-blue lighten-4
light-blue lighten-3
light-blue lighten-2
light-blue lighten-1
light-blue
light-blue darken-1
light-blue darken-2
light-blue darken-3
light-blue darken-4
light-blue accent-1
light-blue accent-2
light-blue accent-3
light-blue accent-4
cyan lighten-5
cyan lighten-4
cyan lighten-3
cyan lighten-2
cyan lighten-1
cyan
cyan darken-1
cyan darken-2
cyan darken-3
cyan darken-4
cyan accent-1
cyan accent-2
cyan accent-3
cyan accent-4
teal lighten-5
teal lighten-4
teal lighten-3
teal lighten-2
teal lighten-1
teal
teal darken-1
teal darken-2
teal darken-3
teal darken-4
teal accent-1
teal accent-2
teal accent-3
teal accent-4
green lighten-5
green lighten-4
green lighten-3
green lighten-2
green lighten-1
green
green darken-1
green darken-2
green darken-3
green darken-4
green accent-1
green accent-2
green accent-3
green accent-4
light-green lighten-5
light-green lighten-4
light-green lighten-3
light-green lighten-2
green lighten-1
light-green
light-green darken-1
light-green darken-2
light-green darken-3
light-green darken-4
light-green accent-1
light-green accent-2
light-green accent-3
light-green accent-4
lime lighten-5
lime lighten-4
lime lighten-3
lime lighten-2
lime lighten-1
lime
lime darken-1
lime darken-2
lime darken-3
lime darken-4
lime accent-1
lime accent-2
lime accent-3
lime accent-4
yellow lighten-5
yellow lighten-4
yellow lighten-3
yellow lighten-2
yellow lighten-1
yellow
yellow darken-1
yellow darken-2
yellow darken-3
yellow darken-4
yellow accent-1
yellow accent-2
yellow accent-3
yellow accent-4
amber lighten-5
amber lighten-4
amber lighten-3
amber lighten-2
amber lighten-1
amber
amber darken-1
amber darken-2
amber darken-3
amber darken-4
amber accent-1
amber accent-2
amber accent-3
amber accent-4
orange lighten-5
orange lighten-4
orange lighten-3
orange lighten-2
orange lighten-1
orange
orange darken-1
orange darken-2
orange darken-3
orange darken-4
orange accent-1
orange accent-2
orange accent-3
orange accent-4
deep-orange lighten-5
deep-orange lighten-4
deep-orange lighten-3
deep-orange lighten-2
deep-orange lighten-1
deep-orange
deep-orange darken-1
deep-orange darken-2
deep-orange darken-3
deep-orange darken-4
deep-orange accent-1
deep-orange accent-2
deep-orange accent-3
deep-orange accent-4
brown lighten-5
brown lighten-4
brown lighten-3
brown lighten-2
brown lighten-1
brown
brown darken-1
brown darken-2
brown darken-3
brown darken-4
brown accent-1
brown accent-2
brown accent-3
brown accent-4
grey lighten-5
grey lighten-4
grey lighten-3
grey lighten-2
grey lighten-1
grey
grey darken-1
grey darken-2
grey darken-3
grey darken-4
grey accent-1
grey accent-2
grey accent-3
grey accent-4
blue-grey lighten-5
blue-grey lighten-4
blue-grey lighten-3
blue-grey lighten-2
blue-grey lighten-1
blue-grey
blue-grey darken-1
blue-grey darken-2
blue-grey darken-3
blue-grey darken-4
blue-grey accent-1
blue-grey accent-2
blue-grey accent-3
blue-grey accent-4
black
white
Background Color
bg-red bg-lighten-5
bg-red bg-lighten-4
bg-red bg-lighten-3
bg-red bg-lighten-2
bg-red bg-lighten-1
bg-red
bg-red bg-darken-1
bg-red bg-darken-2
bg-red bg-darken-3
bg-red bg-darken-4
bg-red bg-accent-1
bg-red bg-accent-2
bg-red bg-accent-3
bg-red bg-accent-4
bg-pink bg-lighten-5
bg-pink bg-lighten-4
bg-pink bg-lighten-3
bg-pink bg-lighten-2
bg-pink bg-lighten-1
bg-pink
bg-pink bg-darken-1
bg-pink bg-darken-2
bg-pink bg-darken-3
bg-pink bg-darken-4
bg-pink bg-accent-1
bg-pink bg-accent-2
bg-pink bg-accent-3
bg-pink bg-accent-4
bg-purple bg-lighten-5
bg-purple bg-lighten-4
bg-purple bg-lighten-3
bg-purple bg-lighten-2
bg-purple bg-lighten-1
bg-purple
bg-purple bg-darken-1
bg-purple bg-darken-2
bg-purple bg-darken-3
bg-purple bg-darken-4
bg-purple bg-accent-1
bg-purple bg-accent-2
bg-purple bg-accent-3
bg-purple bg-accent-4
bg-deep-purple bg-lighten-5
bg-deep-purple bg-lighten-4
bg-deep-purple bg-lighten-3
bg-deep-purple bg-lighten-2
bg-deep-purple bg-lighten-1
bg-deep-purple
bg-deep-purple bg-darken-1
bg-deep-purple bg-darken-2
bg-deep-purple bg-darken-3
bg-deep-purple bg-darken-4
bg-deep-purple bg-accent-1
bg-deep-purple bg-accent-2
bg-deep-purple bg-accent-3
bg-deep-purple bg-accent-4
bg-indigo bg-lighten-5
bg-indigo bg-lighten-4
bg-indigo bg-lighten-3
bg-indigo bg-lighten-2
bg-indigo bg-lighten-1
bg-indigo
bg-indigo bg-darken-1
bg-indigo bg-darken-2
bg-indigo bg-darken-3
bg-indigo bg-darken-4
bg-indigo bg-accent-1
bg-indigo bg-accent-2
bg-indigo bg-accent-3
bg-indigo bg-accent-4
bg-blue bg-lighten-5
bg-blue bg-lighten-4
bg-blue bg-lighten-3
bg-blue bg-lighten-2
bg-blue bg-lighten-1
bg-blue
bg-blue bg-darken-1
bg-blue bg-darken-2
bg-blue bg-darken-3
bg-blue bg-darken-4
bg-blue bg-accent-1
bg-blue bg-accent-2
bg-blue bg-accent-
bg-blue bg-accent-
bg-light-blue bg-lighten-5
bg-light-blue bg-lighten-4
bg-light-blue bg-lighten-3
bg-light-blue bg-lighten-2
bg-light-blue bg-lighten-1
bg-light-blue
bg-light-blue bg-darken-1
bg-light-blue bg-darken-2
bg-light-blue bg-darken-
bg-light-blue bg-darken-4
bg-light-blue bg-accent-1
bg-light-blue bg-accent-2
bg-light-blue bg-accent-3
bg-light-blue bg-accent-4
bg-cyan bg-lighten-5
bg-cyan bg-lighten-4
bg-cyan bg-lighten-3
bg-cyan bg-lighten-2
bg-cyan bg-lighten-1
bg-cyan
bg-cyan bg-darken-1
bg-cyan bg-darken-2
bg-cyan bg-darken-3
bg-cyan bg-darken-4
bg-cyan bg-accent-1
bg-cyan bg-accent-2
bg-cyan bg-accent-3
bg-cyan bg-accent-4
bg-teal bg-lighten-5
bg-teal bg-lighten-4
bg-teal bg-lighten-3
bg-teal bg-lighten-2
bg-teal bg-lighten-1
bg-teal
bg-teal bg-darken-1
bg-teal bg-darken-2
bg-teal bg-darken-3
bg-teal bg-darken-4
bg-teal bg-accent-1
bg-teal bg-accent-2
bg-teal bg-accent-3
bg-teal bg-accent-4
bg-green bg-lighten-5
bg-green bg-lighten-4
bg-green bg-lighten-3
bg-green bg-lighten-2
bg-green bg-lighten-1
bg-green
bg-green bg-darken-1
bg-green bg-darken-2
bg-green bg-darken-3
bg-green bg-darken-4
bg-green bg-accent-1
bg-green bg-accent-2
bg-green bg-accent-3
bg-green bg-accent-4
bg-light-green bg-lighten-5
bg-light-green bg-lighten-4
bg-light-green bg-lighten-3
bg-light-green bg-lighten-2
bg-light-green bg-lighten-1
bg-light-green
bg-light-green bg-darken-1
bg-light-green bg-darken-2
bg-light-green bg-darken-3
bg-light-green bg-darken-4
bg-light-green bg-accent-1
bg-light-green bg-accent-2
bg-light-green bg-accent-3
bg-light-green bg-accent-4
bg-lime bg-lighten-5
bg-lime bg-lighten-4
bg-lime bg-lighten-3
bg-lime bg-lighten-2
bg-lime bg-lighten-1
bg-lime
bg-lime bg-darken-1
bg-lime bg-darken-2
bg-lime bg-darken-3
bg-lime bg-darken-4
bg-lime bg-accent-1
bg-lime bg-accent-2
bg-lime bg-accent-3
bg-lime bg-accent-4
bg-yellow bg-lighten-5
bg-yellow bg-lighten-4
bg-yellow bg-lighten-3
bg-yellow bg-lighten-2
bg-yellow bg-lighten-1
bg-yellow
bg-yellow bg-darken-1
bg-yellow bg-darken-2
bg-yellow bg-darken-3
bg-yellow bg-darken-4
bg-yellow bg-accent-1
bg-yellow bg-accent-2
bg-yellow bg-accent-3
bg-yellow bg-accent-4
bg-amber bg-lighten-5
bg-amber bg-lighten-4
bg-amber bg-lighten-3
bg-amber bg-lighten-2
bg-amber bg-lighten-1
bg-amber
bg-amber bg-darken-1
bg-amber bg-darken-2
bg-amber bg-darken-3
bg-amber bg-darken-4
bg-amber bg-accent-1
bg-amber bg-accent-2
bg-amber bg-accent-3
bg-amber bg-accent-4
bg-orange bg-lighten-5
bg-orange bg-lighten-4
bg-orange bg-lighten-3
bg-orange bg-lighten-2
bg-orange bg-lighten-1
bg-orange
bg-orange bg-darken-1
bg-orange bg-darken-2
bg-orange bg-darken-3
bg-orange bg-darken-4
bg-orange bg-accent-1
bg-orange bg-accent-2
bg-orange bg-accent-3
bg-orange bg-accent-4
bg-deep-orange bg-lighten-5
bg-deep-orange bg-lighten-4
bg-deep-orange bg-lighten-3
bg-deep-orange bg-lighten-2
bg-deep-orange bg-lighten-1
bg-deep-orange
bg-deep-orange bg-darken-1
bg-deep-orange bg-darken-2
bg-deep-orange bg-darken-3
bg-deep-orange bg-darken-4
bg-deep-orange bg-accent-1
bg-deep-orange bg-accent-2
bg-deep-orange bg-accent-3
bg-deep-orange bg-accent-4
bg-brown bg-lighten-5
bg-brown bg-lighten-4
bg-brown bg-lighten-3
bg-brown bg-lighten-2
bg-brown bg-lighten-1
bg-brown
bg-brown bg-darken-1
bg-brown bg-darken-2
bg-brown bg-darken-3
bg-brown bg-darken-4
bg-grey bg-lighten-5
bg-grey bg-lighten-4
bg-grey bg-lighten-3
bg-grey bg-lighten-2
bg-grey bg-lighten-1
bg-grey
bg-grey bg-darken-1
bg-grey bg-darken-2
bg-grey bg-darken-3
bg-grey bg-darken-4
bg-blue-grey bg-lighten-5
bg-blue-grey bg-lighten-4
bg-blue-grey bg-lighten-3
bg-blue-grey bg-lighten-2
bg-blue-grey bg-lighten-1
bg-blue-grey
bg-blue-grey bg-darken-1
bg-blue-grey bg-darken-2
bg-blue-grey bg-darken-3
bg-blue-grey bg-darken-4
black
white
Border Color
border-red border-lighten-5
border-red border-lighten-4
border-red border-lighten-3
border-red border-lighten-2
border-red border-lighten-1
border-red
border-red border-darken-1
border-red border-darken-2
border-red border-darken-3
border-red border-darken-4
border-red border-accent-1
border-red border-accent-2
border-red border-accent-3
border-red border-accent-4
border-pink border-lighten-5
border-pink border-lighten-4
border-pink border-lighten-3
border-pink border-lighten-2
border-pink border-lighten-1
border-pink
border-pink border-darken-1
border-pink border-darken-2
border-pink border-darken-3
border-pink border-darken-4
border-pink border-accent-1
bg-pink border-accent-2
border-pink border-accent-3
border-pink border-accent-4
border-purple border-lighten-5
border-purple border-lighten-4
border-purple border-lighten-3
border-purple border-lighten-2
border-purple border-lighten-1
border-purple
border-purple border-darken-1
border-purple border-darken-2
border-purple border-darken-3
border-purple border-darken-3
border-purple border-accent-1
border-purple border-accent-2
border-purple border-accent-3
border-purple border-accent-4
border-deep-purple border-lighten-5
border-deep-purple border-lighten-4
border-deep-purple border-lighten-3
border-deep-purple border-lighten-2
border-deep-purple border-lighten-1
border-deep-purple
border-deep-purple border-darken-1
border-deep-purple border-darken-2
border-deep-purple border-darken-3
border-deep-purple border-darken-4
border-deep-purple border-accent-1
border-deep-purple border-accent-2
border-deep-purple border-accent-3
border-deep-purple border-accent-4
border-indigo border-lighten-5
border-indigo border-lighten-4
border-indigo border-lighten-3
border-indigo border-lighten-2
border-indigo border-lighten-1
border-indigo
border-indigo border-darken-1
border-indigo border-darken-2
border-indigo border-darken-3
border-indigo border-darken-4
border-indigo border-accent-1
border-indigo border-accent-2
border-indigo border-accent-3
border-indigo border-accent-4
border-blue border-lighten-5
border-blue border-lighten-4
border-blue border-lighten-3
border-blue border-lighten-2
border-blue border-lighten-1
border-blue
border-blue border-darken-1
border-blue border-darken-2
border-blue border-darken-3
border-blue border-darken-4
border-blue border-accent-1
border-blue border-accent-2
border-blue border-accent-3
border-blue border-accent-4
border-light-blue border-lighten-5
border-light-blue border-lighten-4
border-light-blue border-lighten-3
border-light-blue border-lighten-2
border-light-blue border-lighten-1
border-light-blue
border-light-blue border-darken-1
border-light-blue border-darken-2
border-light-blue border-darken-
border-light-blue border-darken-4
border-light-blue border-accent-1
border-light-blue border-accent-2
border-light-blue border-accent-3
border-light-blue border-accent-4
border-cyan border-lighten-5
border-cyan border-lighten-4
border-cyan border-lighten-3
border-cyan border-lighten-2
border-cyan border-lighten-1
border-cyan
border-cyan border-darken-1
border-cyan border-darken-2
border-cyan border-darken-3
border-cyan border-darken-4
border-cyan border-accent-1
border-cyan border-accent-2
border-cyan border-accent-3
border-cyan border-accent-4
border-teal border-lighten-5
border-teal border-lighten-4
border-teal border-lighten-3
border-teal border-lighten-2
border-teal border-lighten-1
border-teal
border-teal border-darken-1
border-teal border-darken-2
border-teal border-darken-3
border-teal border-darken-4
border-teal border-accent-1
border-teal border-accent-2
border-teal border-accent-3
border-teal border-accent-4
border-green border-lighten-5
border-green border-lighten-4
border-green border-lighten-3
border-green border-lighten-2
border-green border-lighten-1
border-green
border-green border-darken-1
border-green border-darken-2
border-green border-darken-3
border-green border-darken-4
border-green border-accent-1
border-green border-accent-2
border-green border-accent-3
border-green border-accent-4
border-light-green border-lighten-5
border-light-green border-lighten-4
border-light-green border-lighten-3
border-light-green border-lighten-2
border-light-green border-lighten-1
border-light-green
border-light-green border-darken-1
border-light-green border-darken-2
border-light-green border-darken-
border-light-green border-darken-4
border-light-green border-accent-1
border-light-green border-accent-2
border-light-green border-accent-3
border-light-green border-accent-4
border-lime border-lighten-5
border-lime border-lighten-4
border-lime border-lighten-3
border-lime border-lighten-2
border-lime border-lighten-1
border-lime
border-lime border-darken-1
border-lime border-darken-2
border-lime border-darken-3
border-lime border-darken-4
border-lime border-accent-1
border-lime border-accent-2
border-lime border-accent-3
border-lime border-accent-4
border-yellow border-lighten-5
border-yellow border-lighten-4
border-yellow border-lighten-3
border-yellow border-lighten-2
border-yellow border-lighten-1
border-yellow
border-yellow border-darken-1
border-yellow border-darken-2
border-yellow border-darken-3
border-yellow border-darken-4
border-yellow border-accent-1
border-yellow border-accent-2
border-yellow border-accent-3
border-yellow border-accent-4
border-amber border-lighten-5
border-amber border-lighten-4
border-amber border-lighten-3
border-amber border-lighten-2
border-amber border-lighten-1
border-amber
border-amber border-darken-1
border-amber border-darken-2
border-amber border-darken-3
border-amber border-darken-4
border-amber border-accent-1
border-amber border-accent-2
border-amber border-accent-3
border-amber border-accent-4
border-orange border-lighten-5
border-orange border-lighten-4
border-orange border-lighten-3
border-orange border-lighten-2
border-orange border-lighten-1
border-orange
border-orange border-darken-1
border-orange border-darken-2
border-orange border-darken-3
border-orange border-darken-4
border-orange border-accent-1
border-orange border-accent-2
border-orange border-accent-3
border-orange border-accent-4
border-deep-orange border-lighten-5
border-deep-orange border-lighten-4
border-deep-orange border-lighten-3
border-deep-orange border-lighten-2
border-deep-orange border-lighten-1
border-deep-orange
border-deep-orange border-darken-1
border-deep-orange border-darken-2
border-deep-orange border-darken-3
border-deep-orange border-darken-4
border-deep-orange border-accent-1
border-deep-orange border-accent-2
border-deep-orange border-accent-3
border-deep-orange border-accent-4
border-brown border-lighten-5
border-brown border-lighten-4
border-brown border-lighten-3
border-brown border-lighten-2
border-brown border-lighten-1
border-brown
border-brown border-darken-1
border-brown border-darken-2
border-brown border-darken-3
border-brown border-darken-4
border-grey border-lighten-5
border-grey border-lighten-4
border-grey border-lighten-3
border-grey border-lighten-2
border-grey border-lighten-1
border-grey
border-grey border-darken-1
border-grey border-darken-2
border-grey border-darken-3
border-grey border-darken-4
border-blue-grey border-lighten-5
border-blue-grey border-lighten-4
border-blue-grey border-lighten-3
border-blue-grey border-lighten-2
border-blue-grey border-lighten-1
border-blue-grey
border-blue-grey border-darken-1
border-blue-grey border-darken-2
border-blue-grey border-darken-3
border-blue-grey border-darken-4
border-black
border-white