Material Palette

Pick a color!

45
50
#b95d2a
hct(45, 50%, 50%)

Tone

Hex

HCT

HSL

20

#fff8f6

hct(45, 50%, 98)

hsl(13, 100%, 98%)

50

#ffede6

hct(45, 50%, 95)

hsl(17, 100%, 95%)

100

#ffdbcb

hct(45, 50%, 90)

hsl(18, 100%, 90%)

200

#ffb692

hct(45, 50%, 80)

hsl(20, 100%, 79%)

300

#fa8f57

hct(45, 50%, 70)

hsl(21, 94%, 66%)

400

#d97640

hct(45, 50%, 60)

hsl(21, 67%, 55%)

500

#b95d2a

hct(45, 50%, 50)

hsl(21, 63%, 45%)

600

#9a4613

hct(45, 50%, 40)

hsl(23, 78%, 34%)

700

#793000

hct(45, 50%, 30)

hsl(24, 100%, 24%)

800

#562000

hct(45, 50%, 20)

hsl(22, 100%, 17%)

900

#341100

hct(45, 50%, 10)

hsl(20, 100%, 10%)

:root.light { --lightness-bg: 100%; --lightness-cont: 0%; --color-primary: #b95d2a; --color-primary-bg: #ffffff; --color-primary-cont: #000000; --color-primary-20: #fff8f6; --color-primary-50: #ffede6; --color-primary-100: #ffdbcb; --color-primary-200: #ffb692; --color-primary-300: #fa8f57; --color-primary-400: #d97640; --color-primary-500: #b95d2a; --color-primary-600: #9a4613; --color-primary-700: #793000; --color-primary-800: #562000; --color-primary-900: #341100;}
:root.dark { --lightness-bg: 0%; --lightness-cont: 100%; --color-primary: #b95d2a; --color-primary-bg: #000000; --color-primary-cont: #ffffff; --color-primary-20: #140400; --color-primary-50: #230900; --color-primary-100: #341100; --color-primary-200: #562000; --color-primary-300: #793000; --color-primary-400: #9a4613; --color-primary-500: #b95d2a; --color-primary-600: #d97640; --color-primary-700: #fa8f57; --color-primary-800: #ffb692; --color-primary-900: #ffdbcb;}