Palette

An extensive set of color variables are set up inside of config. Color names are generally semantic and simple, making them very easy to remember. Color variables are references like any other Sass variable:

.element-to-style{
  color: $gray;
}

There is also a dark theme which you can import using:

@import "calcite-web-dark";

Grayscale

Calcite Web mostly deals with large-field layouts and a broader range of visual communication, including small interfaces and long format reading. With this in mind, Calcite Web's grayscale differs from that of Calcite Desktop.

Calcite web provides a short list of simple color variables, while supporting the complete set of official calcite colors.

white

#fff

off-white

#f8f8f8

lightest-gray

#efefef

lighter-gray

#ccc

light-gray

#a9a9a9

gray

#959595

dark-gray

#828282

darker-gray

#6e6e6e

darkest-gray

#595959

off-black

#4c4c4c

transparent-black

rgba(0,0,0,0.75)

black

#323232

UI Colors

Calcite web exposes a set of Sass variables for the UI palette. Each color has three values: light, regular, and dark. The complete set of calcite colors is also supported. .

lightest-blue

#d2e9f9

lighter-blue

#bcdaed

light-blue

#56a5d8

blue

#0079c1

dark-blue

#005e95

light-green

#9bc19c

green

#5a9359

dark-green

#338033

light-red

#e4a793

red

#de2900

dark-red

#ab3c16

light-orange

#e8912e

orange

#d17e21

dark-orange

#ad6511

light-yellow

#efe397

yellow

#e4d154

dark-yellow

#d9bf2b

light-purple

#c4bcdc

purple

#9081bc

dark-purple

#7461a8

light-brown

#d2b38f

brown

#a57946

dark-brown

#8c5e2a

Type Colors

Three basic colors are set for color in typography. It's not recommended to change these values, but they are provided for your reference.

$type-color: $off-black;
$link-color: $blue;
$link-hover: $light-blue;

In writing Sass it's often easier to remember $type-color is the color of type than it is to remember the specific grayscale value that is the default for type.