Color Palette - Bluprnt

Primary Colors

The Bluebeam primary blue palette should be the most prominently used accent color in our web properties. The primary color #0083DB is our Bluebeam blue, and should be used to call special attention to our logo, UI elements, icons, titles, callouts, subtitles, etc. The lighter and darker blues can be used as supporting colors—for backgrounds, illustrations, labels, etc.

To use these colors in your HTML, see the Color Utility Classes.

$color-primary
#0083DB

$color-primaryLight
#3CABF7

$color-primaryDark
#0F4896

$color-blue1
#F7F9FC

$color-blue2
#DBF2FF

$color-blue3
#B0E2FF

$color-blue4
#89D3FD

$color-blue5
#61C3FA

$color-blue6
#3CABF7

$color-blue7
#0083DB

$color-blue8
#135FBA

$color-blue9
#0F4896

$color-blue10
#0B316A

$color-blue11
#041E44

Secondary Colors

The Bluebeam secondary green palette should be the second most-common used accent color. It can be used to provide contrast and depth, especially when paired with our primary blue palette. The color #53A42E is the primary green and should be the green used for main call-to-actions buttons. Hover states should be #7AC458 and press states should be #349528. The rest of the greens are available to use sparingly when needed.

To use these colors in your HTML, see the Color Utility Classes.

$color-secondary
#53A42E

$color-secondaryLight
#7AC458

$color-secondaryDark
#349528

$color-forest1
#E3F7D7

$color-forest2
#CDF0BA

$color-forest3
#ACE092

$color-forest4
#91D672

$color-forest5
#7AC458

$color-forest6
#53A42E

$color-forest7
#349528

$color-forest8
#29831E

$color-forest9
#206C16

Grayscale Colors

These are used to style backgrounds, borders, and text.

To use these colors in your HTML, see the Color Utility Classes.

$color-white
#fff

$color-black
#000

$color-caviar1
#F7F7F7

$color-caviar2
#F0F0F0

$color-caviar3
#E6E6E8

$color-caviar4
#CDCDD0

$color-caviar5
#B4B4B9

$color-caviar6
#96969B

$color-caviar7
#7D7D82

$color-caviar8
#646469

$color-caviar9
#4B4B50

$color-caviar10
#323237

$color-caviar11
#19191E

Grayscale Colors

These variables are in the process of being removed in favor of the new Caviar pallette. Please use those instead. In the meantime, the values have been adjusted to use colors from the Caviar pallette.

$color-grayLightest
#F7F7F7

$color-grayLighter
#F0F0F0

$color-grayLight
#E6E6E8

$color-gray
#B4B4B9

$color-grayDark
#96969B

$color-grayDarker
#646469

$color-grayDarkest
#323237

$color-blackish
#19191E

Accent Colors

To use these colors in your HTML, see the Color Utility Classes.

$color-sunset1
#FFF9E3

$color-sunset2
#FFF3C9

$color-sunset3
#FFEDA0

$color-sunset4
#FFE471

$color-sunset5
#FFD933

$color-sunset6
#FFB91A

$color-sunset7
#FF9800

$color-sunset8
#E86F00

$color-sunset9
#D04D03

$color-mulberry1
#FFEFFA

$color-mulberry2
#FFE2F6

$color-mulberry3
#FABEE8

$color-mulberry4
#F29ED9

$color-mulberry5
#E17FC3

$color-mulberry6
#BF529E

$color-mulberry7
#A23581

$color-mulberry8
#881465

$color-mulberry9
#650046

Status Colors

$color-success
#58ce8a

$color-error
#ed4337