Color System
Complete color palette for the Family Room theme.
Base Colors
Pink
$pink
#ccabd1
var(--pink-5)
Purple
$purple
#7a5a9b
var(--purple-5)
Green
$green
#71ac81
var(--green-5)
Slate
$slate
#D1D0D2
var(--slate-5)
Blue
$blue
#4d7ecb
var(--blue-5)
Red
$red
#d14d5e
var(--red-5)
Orange
$orange
#dd8650
var(--orange-5)
Yellow
$yellow
#efd47d
var(--yellow-5)
Magenta
$magenta
#943D69
var(--magenta-5)
Pink Scale
Pink-05
$pink-05
#ffffff
var(--pink-05)
bg-pink-05
Pink-1
$pink-1
#ffffff
var(--pink-1)
bg-pink-1
Pink-2
$pink-2
#f6f0f7
var(--pink-2)
bg-pink-2
Pink-3
$pink-3
#e8d9ea
var(--pink-3)
bg-pink-3
Pink-4
$pink-4
#dac2de
var(--pink-4)
bg-pink-4
Pink-5
$pink-5
#ccabd1
var(--pink-5)
bg-pink-5
Pink-6
$pink-6
#be94c5
var(--pink-6)
bg-pink-6
Pink-7
$pink-7
#b07cb8
var(--pink-7)
bg-pink-7
Pink-8
$pink-8
#a365ac
var(--pink-8)
bg-pink-8
Pink-9
$pink-9
#91539a
var(--pink-9)
bg-pink-9
Pink-10
$pink-10
#7b4683
var(--pink-10)
bg-pink-10
Purple Scale
Purple-05
$purple-05
#ddd4e6
var(--purple-05)
bg-purple-05
Purple-1
$purple-1
#c2b2d2
var(--purple-1)
bg-purple-1
Purple-2
$purple-2
#b09bc5
var(--purple-2)
bg-purple-2
Purple-3
$purple-3
#9e85b8
var(--purple-3)
bg-purple-3
Purple-4
$purple-4
#8c6eab
var(--purple-4)
bg-purple-4
Purple-5
$purple-5
#7a5a9b
var(--purple-5)
bg-purple-5
Purple-6
$purple-6
#684d85
var(--purple-6)
bg-purple-6
Purple-7
$purple-7
#563f6e
var(--purple-7)
bg-purple-7
Purple-8
$purple-8
#453258
var(--purple-8)
bg-purple-8
Purple-9
$purple-9
#332541
var(--purple-9)
bg-purple-9
Purple-10
$purple-10
#21182a
var(--purple-10)
bg-purple-10
Green Scale
Green-05
$green-05
#edf4ef
var(--green-05)
bg-green-05
Green-1
$green-1
#cbe1d1
var(--green-1)
bg-green-1
Green-2
$green-2
#b5d3bd
var(--green-2)
bg-green-2
Green-3
$green-3
#9ec6a9
var(--green-3)
bg-green-3
Green-4
$green-4
#88b995
var(--green-4)
bg-green-4
Green-5
$green-5
#71ac81
var(--green-5)
bg-green-5
Green-6
$green-6
#5c9e6e
var(--green-6)
bg-green-6
Green-7
$green-7
#4e875e
var(--green-7)
bg-green-7
Green-8
$green-8
#41714e
var(--green-8)
bg-green-8
Green-9
$green-9
#345a3e
var(--green-9)
bg-green-9
Green-10
$green-10
#27442f
var(--green-10)
bg-green-10
Slate Scale
Slate-05
$slate-05
#ffffff
var(--slate-05)
bg-slate-05
Slate-1
$slate-1
#ffffff
var(--slate-1)
bg-slate-1
Slate-2
$slate-2
#f7f7f7
var(--slate-2)
bg-slate-2
Slate-3
$slate-3
#ebeaeb
var(--slate-3)
bg-slate-3
Slate-4
$slate-4
#deddde
var(--slate-4)
bg-slate-4
Slate-5
$slate-5
#d1d0d2
var(--slate-5)
bg-slate-5
Slate-6
$slate-6
#aba9ad
var(--slate-6)
bg-slate-6
Slate-7
$slate-7
#858287
var(--slate-7)
bg-slate-7
Slate-8
$slate-8
#5e5c60
var(--slate-8)
bg-slate-8
Slate-9
$slate-9
#383739
var(--slate-9)
bg-slate-9
Slate-10
$slate-10
#121112
var(--slate-10)
bg-slate-10
Blue Scale
Blue-05
$blue-05
#e5ecf7
var(--blue-05)
bg-blue-05
Blue-1
$blue-1
#bcceeb
var(--blue-1)
bg-blue-1
Blue-2
$blue-2
#a0bae3
var(--blue-2)
bg-blue-2
Blue-3
$blue-3
#84a6db
var(--blue-3)
bg-blue-3
Blue-4
$blue-4
#6992d3
var(--blue-4)
bg-blue-4
Blue-5
$blue-5
#4d7ecb
var(--blue-5)
bg-blue-5
Blue-6
$blue-6
#376bbd
var(--blue-6)
bg-blue-6
Blue-7
$blue-7
#2f5ba2
var(--blue-7)
bg-blue-7
Blue-8
$blue-8
#264c86
var(--blue-8)
bg-blue-8
Blue-9
$blue-9
#1e3c6b
var(--blue-9)
bg-blue-9
Blue-10
$blue-10
#162c4f
var(--blue-10)
bg-blue-10
Red Scale
Red-05
$red-05
#f9e9eb
var(--red-05)
bg-red-05
Red-1
$red-1
#eebfc5
var(--red-1)
bg-red-1
Red-2
$red-2
#e7a2ab
var(--red-2)
bg-red-2
Red-3
$red-3
#e08691
var(--red-3)
bg-red-3
Red-4
$red-4
#d86978
var(--red-4)
bg-red-4
Red-5
$red-5
#d14d5e
var(--red-5)
bg-red-5
Red-6
$red-6
#c73346
var(--red-6)
bg-red-6
Red-7
$red-7
#ab2c3c
var(--red-7)
bg-red-7
Red-8
$red-8
#8f2432
var(--red-8)
bg-red-8
Red-9
$red-9
#731d28
var(--red-9)
bg-red-9
Red-10
$red-10
#56151e
var(--red-10)
bg-red-10
Orange Scale
Orange-05
$orange-05
#fdf8f4
var(--orange-05)
bg-orange-05
Orange-1
$orange-1
#f4d9c8
var(--orange-1)
bg-orange-1
Orange-2
$orange-2
#eec4aa
var(--orange-2)
bg-orange-2
Orange-3
$orange-3
#e9af8c
var(--orange-3)
bg-orange-3
Orange-4
$orange-4
#e39b6e
var(--orange-4)
bg-orange-4
Orange-5
$orange-5
#dd8650
var(--orange-5)
bg-orange-5
Orange-6
$orange-6
#d77132
var(--orange-6)
bg-orange-6
Orange-7
$orange-7
#c16125
var(--orange-7)
bg-orange-7
Orange-8
$orange-8
#a3511f
var(--orange-8)
bg-orange-8
Orange-9
$orange-9
#854219
var(--orange-9)
bg-orange-9
Orange-10
$orange-10
#673313
var(--orange-10)
bg-orange-10
Yellow Scale
Yellow-05
$yellow-05
#ffffff
var(--yellow-05)
bg-yellow-05
Yellow-1
$yellow-1
#fffefc
var(--yellow-1)
bg-yellow-1
Yellow-2
$yellow-2
#fbf4dc
var(--yellow-2)
bg-yellow-2
Yellow-3
$yellow-3
#f7e9bd
var(--yellow-3)
bg-yellow-3
Yellow-4
$yellow-4
#f3de9d
var(--yellow-4)
bg-yellow-4
Yellow-5
$yellow-5
#efd47d
var(--yellow-5)
bg-yellow-5
Yellow-6
$yellow-6
#ebca5d
var(--yellow-6)
bg-yellow-6
Yellow-7
$yellow-7
#e8bf3d
var(--yellow-7)
bg-yellow-7
Yellow-8
$yellow-8
#e4b51d
var(--yellow-8)
bg-yellow-8
Yellow-9
$yellow-9
#c69d17
var(--yellow-9)
bg-yellow-9
Yellow-10
$yellow-10
#a68313
var(--yellow-10)
bg-yellow-10
Magenta Scale
Magenta-05
$magenta-05
#e0b5cb
var(--magenta-05)
bg-magenta-05
Magenta-1
$magenta-1
#d18fb0
var(--magenta-1)
bg-magenta-1
Magenta-2
$magenta-2
#c6769f
var(--magenta-2)
bg-magenta-2
Magenta-3
$magenta-3
#bc5d8d
var(--magenta-3)
bg-magenta-3
Magenta-4
$magenta-4
#ad477b
var(--magenta-4)
bg-magenta-4
Magenta-5
$magenta-5
#943d69
var(--magenta-5)
bg-magenta-5
Magenta-6
$magenta-6
#7b3257
var(--magenta-6)
bg-magenta-6
Magenta-7
$magenta-7
#622845
var(--magenta-7)
bg-magenta-7
Magenta-8
$magenta-8
#491d33
var(--magenta-8)
bg-magenta-8
Magenta-9
$magenta-9
#2f1321
var(--magenta-9)
bg-magenta-9
Magenta-10
$magenta-10
#16090f
var(--magenta-10)
bg-magenta-10
Special Colors
White
$white
#fdf1e7
$white
bg-white
Background color
Divine white
$divine-white
#fffdfa
$divine-white
bg-divine-white
Divine white
Shadow white
$shadow-white
#fdecde
$shadow-white
bg-shadow-white
Shadow white
Black
$black
$slate-9
$black
bg-black
Text color
Family room bg
$family-room-bg
$white
var(--family-room-bg)
bg-bg
Main background
Family room text
$family-room-text
$black
var(--family-room-text)
bg-text
Main text
Body bg
$body-bg
$white
var(--bs-body-bg)
bg-bg
Body background
Body color
$body-color
$black
var(--bs-body-color)
bg-color
Body text