Color Palette

* - has hover color


Main Site Colors

Main site color
#1C7CD5 *
  • $color-primary ($blue-4)
  • Used for: primary buttons, outline button hover, navigation, icons
  • Use only with light text
  • Hover color: $color-primary-lightened ($blue-5 - #069CF9)
  • C: 80% M: 48% Y: 0 K: 0%
Secondary site color
#0F2940
  • $color-secondary ($blue-1)
  • Used for: main text color, Find a Derm Bar, navigation
  • Use only with light text
  • Hover color: TBD
  • C: 96% M: 78% Y: 48% K: 51%
Site accent color
#DEE3EC *
  • $color-accent
  • Used for: accent button
  • Use only with dark text
  • Hover color: $color-accent-darkened (#C9D1DF)
  • C: 11% M: 7% Y: 3% K: 0%
Site footer color
  • $color-footer
  • Used for: footer
  • Use only with light text
  • Hover color: TBD
  • C: 75% M: 61% Y: 42% K: 22%
Site main background color
#F3F6F9
  • $color-main-background
  • Used for: main background color of site
  • Use only with dark text
  • Hover color: TBD
  • C: 3% M: 1% Y: 1% K: 0%

Main Site Text Colors

Main text color
#0F2940
  • $color-text-primary ($blue-1)
  • Used for: h1, h2, h3, h4, h5, slideshow h1, slideshow h2, slideshow p
  • Use only with light background
  • Hover color: TBD
  • C: 96% M: 78% Y: 48% K: 51%
Secondary text color
#222222
  • $color-text-secondary ($text-2)
  • Used for: h6, lead, p desktop, caption - light, p small
  • Use only with light background
  • Hover color: TBD
  • C: 72% M: 66% Y: 64% K: 72%
Accent text color
#444444
  • $color-text-accent ($text-3)
  • Used for: quote, caption - strong
  • Use only with light background
  • Hover color: TBD
  • C: 67% M: 60% Y: 59% K: 44%
Card text color
#333333
  • $color-text-card
  • Used for: text on cards
  • Use only with light background
  • Hover color: TBD
  • C: 69% M: 63% Y: 62% K: 58%
White text color
#FFFFFF
  • $color-white
  • Used for: text on primary buttons, footer links
  • Use only with dark background
  • Hover color: TBD
Link text color light background
  • $color-link-light-bg ($blue-4)
  • Used for: links only, members nav dropdown title
  • Use only with light background
  • Hover color: $color-link-light-bg-lightened ($blue-5)
  • C: 80% M: 48% Y: 0% K: 0%
Link text color light background - regular text color
  • Inherit regular text color from parent element
  • Used for: links only, card titles
  • Use only with light background
  • Hover color: $color-link-light-bg-lightened ($blue-5)
Link text color dark background
  • $color-link-dark-bg
  • Used for: links only, public nav dropdown title
  • Use only with dark background
  • Hover color: $color-link-dark-bg-lightened (#A0CFFA)
  • C: 62% M: 27% Y: 0% K: 0%

Texts

Text 1
#000000
  • $text-1
  • Used for: TBD
  • Use only with light background
  • Hover color: TBD
  • C: 75% M: 68% Y: 67% K: 90%
Text 2
#222222
  • $text-2
  • Used for: TBD
  • Use only with light background
  • Hover color: TBD
  • C: 72% M: 66% Y: 64% K: 72%
Text 3
#444444
  • $text-3
  • Used for: TBD
  • Use only with light background
  • Hover color: TBD
  • C: 67% M: 60% Y: 59% K: 44%
Text 4
#B8B8B8
  • $text-4
  • Used for: TBD
  • Use only with dark background
  • Hover color: TBD
  • C: 28% M: 22% Y: 23% K: 0%

Reds

Red 1
#CC1D1D
  • $red-1
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
  • C: 13% M: 100% Y: 100% K: 0%
Red 2
#E63E2E
  • $red-2
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
  • C: 4% M: 91% Y: 92% K: 0%
Red 3
#F97878
  • $red-3
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 0% M: 67% Y: 42% K: 0%
Red 4
#FCDAD4
  • $red-4
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 0% M: 16% Y: 11% K: 0%

Oranges

Orange 0
#F8622B
  • $orange-0
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
  • C: 0% M: 76% Y: 91% K: 0%
Orange 1
#F77F08
  • $orange-1
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 0% M: 61% Y: 100% K: 0%
Orange 2
#F8972B
  • $orange-2
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 0% M: 48% Y: 93% K: 0%
Orange 3
#F9BA80
  • $orange-3
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 0% M: 31% Y: 54% K: 0%
Orange 4
#FCEACD
  • $orange-4
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 1% M: 7% Y: 20% K: 0%

Yellows

Yellow 0
#F9A716
  • $yellow-0
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 0% M: 39% Y: 100% K: 0%
Yellow 1
#F7BF3F
  • $yellow-1
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 3% M: 26% Y: 87% K: 0%
Yellow 2
#F7D131
  • $yellow-2
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 3% M: 26% Y: 87% K: 0%
Yellow 3
#F7E79F
  • $yellow-3
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 4% M: 6% Y: 46% K: 0%
Yellow 4
#FCF8EB
  • $yellow-4
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 1% M: 1% Y: 7% K: 0%

Greens

Green 1
#03821B *
  • $green-1
  • Used for: TBD
  • Use only with light text
  • Hover color: $green-2 - #429942
  • C: 87% M: 24% Y: 100% K: 0%
Green 2
#429942
  • $green-2
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
  • C: 77% M: 17% Y: 100% K: 3%
Green 3
#96C940
  • $green-3
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 46% M: 0% Y: 97% K: 0%
Green 4
#B8DD6F
  • $green-4
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C:31% M: 0% Y: 73% K: 0%
Green 5
#EDF7CD
  • $green-5
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 7% M: 0% Y: 24% K: 0%

Mints

Mint 1
#038389
  • $mint-1
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
  • C: 86% M: 31% Y: 44% K: 6%
Mint 2
#00ABA4
  • $mint-2
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 78% M: 8% Y: 42% K: 0%
Mint 3
#87E8DF
  • $mint-3
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 48% M: 0% Y: 19% K: 0%
Mint 4
#D2F7F1
  • $mint-4
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 15% M: 0% Y: 7% K: 0%

Purples

Purple 1
#720F48
  • $purple-1
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
  • C: 45% M: 100% Y: 44% K: 32%
Purple 2
#A51F67
  • $purple-2
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
  • C: 34% M: 100% Y: 33% K: 6%
Purple 3
#C14C8F
  • $purple-3
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
  • C: 24% M: 84% Y: 11% K: 0%
Purple 4
#F9E5F2
  • $purple-4
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 1% M: 11% Y: 0% K: 0%


Grays

Gray 0
#4A5669
  • $gray-0
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
  • C: 75% M: 61% Y: 42% K: 22%
Gray 1
#656F7F
  • $gray-1
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
  • C: 64% M: 51% Y: 38% K: 10%
Gray 2
#838EA1
  • $gray-2
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
  • C: 52% M: 39% Y: 27% K: 1%
Gray 3
#A6B1C5
  • $gray-3
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 35% M: 24% Y: 13% K: 100%
Gray 4
#C1CBDC
  • $gray-4
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 23% M: 15% Y: 6% K: 0%
Gray 5
#D8DFEA
  • $gray-5
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 14% M: 8% Y: 3% K: 0%
Gray 6
#E8ECF3
  • $gray-6
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 7% M: 4% Y: 2% K: 0%
Gray 7
#F3F6F9
  • $gray-7
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 3% M: 1% Y: 1% K: 0%

Blues

Blue 1
#0F2940
  • $blue-1
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
  • C: 96% M: 78% Y: 48% K: 51%
Blue 2
#054972
  • $blue-2
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
  • C: 100% M: 73% Y: 32% K: 17%
Blue 3
#0078BF
  • $blue-3
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
  • C: 86% M: 47% Y: 0% K: 0%
Blue 4
#1C7CD5
  • $blue-4
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
  • C: 80% M: 48% Y: 0 K: 0%
Blue 5
#069CF9
  • $blue-5
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
  • C: 70% M: 31% Y: 0% K: 0%
Blue 6
#9FD7F4
  • $blue-6
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 34% M: 2% Y: 0% K: 0%
Blue 7
#E8F5F9
  • $blue-7
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 7% M: 0% Y: 1% K: 0%

The colors below are not part of the current branding scheme and are not recommended for use except for data visualization

Pinks

Pink 1
#BA119A
  • $pink-1
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
  • C: 30% M: 97% Y: 0% K: 0%
Pink 2
#DB09AA
  • $pink-2
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
  • C: 19% M: 92% Y: 0% K: 0%
Pink 3
#F82ABD
  • $pink-3
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
  • C: 11% M: 86% Y: 0% K: 0%
Pink 4
#F97DDC
  • $pink-4
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 9% M: 59% Y: 0% K: 0%
Pink 5
#F9C7EF
  • $pink-5
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 3% M: 25% Y: 0% K: 0%

Violets

Violet 1
#482C96
  • $violet-1
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
  • C: 89% M: 98% Y: 0% K: 0%
Violet 2
#6B3DD1
  • $violet-2
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
  • C: 71% M: 79% Y: 0% K: 0%
Violet 3
#7F29FB
  • $violet-3
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
  • C: 68% M: 77% Y: 0% K: 0%
Violet 4
#9F77F7
  • $violet-4
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 49% M: 57% Y: 0% K: 0%
Violet 5
#D9D0F4
  • $violet-5
  • Used for: TBD
  • Use only with light text
  • Hover color: TBD
  • C: 13% M: 17% Y: 0% K: 0%

Aquas

Aqua 1
#44BCD8
  • $aqua-1
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 64% M: 4% Y: 12% K: 0%
Aqua 2
#90CFE9
  • $aqua-2
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 40% M: 4% Y: 4% K: 0%
Aqua 3
#A8E4F8
  • $aqua-3
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 31% M: 0% Y: 2% K: 0%
Aqua 4
#E1F0F4
  • $aqua-4
  • Used for: TBD
  • Use only with dark text
  • Hover color: TBD
  • C: 11% M: 1% Y: 3% K: 0%