Branding Colors

Primary Color

Cover

Primary 10

var(--primary-10)
hsl(190, 100%, 10%)
rgb(0, 43, 51)
#002B33
Cover

Primary 20

var(--primary-20)
hsl(190, 100%, 20%)
rgb(0, 85, 102)
#005566
Cover

Primary 30

var(--primary-30)
hsl(190, 100%, 30%)
rgb(0, 128, 153)
#008099
Cover

Primary 40

var(--primary-40)
hsl(190, 100%, 40%)
rgb(0, 170, 204)
#00AACC
Cover

Primary 50

var(--primary-50)
== var(--primary)
hsl(190, 100%, 50%)
rgb(0, 213, 255)
#00D5FF
Cover

Primary 60

var(--primary-60)
hsl(190, 100%, 60%)
rgb(51, 221, 255)
#33DDFF
Cover

Primary 70

var(--primary-70)
hsl(190, 100%, 70%)
rgb(102, 230, 255)
#66E6FF
Cover

Primary 80

var(--primary-80)
hsl(190, 100%, 80%)
rgb(153, 238, 255)
#99EEFF
Cover

Primary 90

var(--primary-90)
hsl(190, 100%, 90%)
rgb(204, 247, 255)
#CCF7FF

Accent Color

Cover

Accent 10

var(--accent-10)
hsl(160, 100%, 10%)
rgb(0, 51, 34)
#003322
Cover

Accent 20

var(--accent-20)
hsl(160, 100%, 20%)
rgb(0, 102, 68)
#006644
Cover

Accent 30

var(--accent-30)
hsl(160, 100%, 30%)
rgb(0, 153, 102)
#009966
Cover

Accent 40

var(--accent-40)
hsl(160, 100%, 40%)
rgb(0, 204, 136)
#00CC88
Cover

Accent 50

var(--accent-50)
== var(--accent)
hsl(160, 100%, 50%)
rgb(0, 255, 170)
#00FFAA
Cover

Accent 60

var(--accent-60)
hsl(160, 100%, 60%)
rgb(51, 255, 187)
#33FFBBrgb(102,255,204)
Cover

Accent 70

var(--accent-70)
hsl(160, 100%, 70%)
rgb(102, 255, 204)
#66FFCC
Cover

Accent 80

var(--accent-80)
hsl(160, 100%, 80%)
rgb(153, 255, 221)
#99FFDD
Cover

Accent 90

var(--accent-90)
hsl(160, 100%, 90%)
rgb(204, 255, 238)
#CCFFEE

Last updated