Colors

Colors are prefixed with c- (eg $c-w100), and can be used directly in Sass with their variable names. In HTML, add bg-c- for backgrounds, t-c- for text color & border-c- for border color (currently limited to greyscale & Azure blue).

Heads up!

DreamHost is committed to the WCAG AA standard for contrast ratios, which improves usability for users with low vision. When choosing color combinations, make sure they have at least 4.5:1 contrast ratio. This handy contrast checker can help.

Web Application Palette

The DreamHost palette is primarily derived from blue and white. The secondary palette consists of red, green, orange, and yellow. These colors are used across all web apps at DreamHost. Also included are dedicated background and grayscale classes which are derived from blue.

Primary Palette

  • A
    😃
  • A
    😃
  • A
    😭
  • A
    😭

Midnight
Hex #071C26
rgb(0,115,236)
Sass $c-b700

  • A
    😃
  • A
    😃
  • A
    😃
  • A
    😃

Azure
Hex #0073EC
rgb(0,175,239)
Sass $c-b300

  • A
    😃
  • A
    😃
  • A
    😃
  • A
    😃

Prince
Hex #A644E5
rgb(166,68,229)
Sass $c-p300

  • A
    😭
  • A
    😭
  • A
    😃
  • A
    😃

White
Hex #FFFFFF
rgb(255,255,255)
Sass $c-w100

Secondary Palette

  • A
    😭
  • A
    😭
  • A
    😃
  • A
    😃

Turtle
Hex #00CAAA
rgb(0,202,170)
Sass $c-t300

  • A
    😃
  • A
    😭
  • A
    😃
  • A
    😃

Coral
Hex #FF4A48
rgb(255,74,72)
Sass $c-r300

  • A
    😭
  • A
    😭
  • A
    😃
  • A
    😃

Tangerine
Hex #F59D00
rgb(206,21,47)
Sass $c-o300

  • A
    😭
  • A
    😭
  • A
    😃
  • A
    😃

Sunflower
Hex #FFDA00
rgb(255,218,0)
Sass $c-y300

Grayscale

  • A
    😃
  • A
    😃
  • A
    😭
  • A
    😭

Metal
Hex #434F58
rgb(67,79,88)
Sass $c-g500

  • A
    😃
  • A
    😃
  • A
    😃
  • A
    😃

Galactic
Hex #677983
rgb(103,121,131)
Sass $c-g400

  • A
    😭
  • A
    😭
  • A
    😃
  • A
    😃

Cloudy
Hex #AFBFC9
rgb(175,191,201)
Sass $c-g300

  • A
    😭
  • A
    😭
  • A
    😃
  • A
    😃

Smoke
Hex #E0E4E8
rgb(224,228,232)
Sass $c-g200

  • A
    😭
  • A
    😭
  • A
    😃
  • A
    😃

Off White
Hex #F4F6F9
rgb(244,246,249)
Sass $c-g100

Extended Palette

Our extended palette consists of a light and dark shade for each primary color. For convenience, different shades are numbered similarly to font weights, with 100 being lightest. Usage is also indicated by the headings below.

  • A
    😃
  • A
    😃
  • A
    😃
  • A
    😭

Royal Blue
Hex #1176A5
rgb(17,118,165)
Sass $c-b500

  • A
    😭
  • A
    😭
  • A
    😃
  • A
    😃

Baby Blue
Hex #CCEFFF
rgb(204,239,255)
Sass $c-b100

  • A
    😃
  • A
    😃
  • A
    😃
  • A
    😃

Marina
Hex #0D8288
rgb(13,130,136)
Sass $c-t500

  • A
    😭
  • A
    😭
  • A
    😃
  • A
    😃

Ice
Hex #E5FEFF
rgb(229,254,255)
Sass $c-t100

  • A
    😃
  • A
    😃
  • A
    😭
  • A
    😭

Autumn
Hex #664200
rgb(102,66,0)
Sass $c-o500

  • A
    😭
  • A
    😭
  • A
    😃
  • A
    😃

Peach
Hex #FFE0A6
rgb(255,224,166)
Sass $c-o100

  • A
    😃
  • A
    😃
  • A
    😃
  • A
    😭

Leather
Hex #6F5F1B
rgb(111,95,27)
Sass $c-y500

  • A
    😃
  • A
    😃
  • A
    😃
  • A
    😭

Magnolia
Hex #FFF4B6
rgb(255,244,182)
Sass $c-y100

  • A
    😃
  • A
    😃
  • A
    😃
  • A
    😭

Rust
Hex #4F0703
rgb(79,7,3)
Sass $c-r500

  • A
    😃
  • A
    😃
  • A
    😃
  • A
    😭

Rose
Hex #FFCCCE
rgb(255,204,206)
Sass $c-r100

Usage example

<div class="bg-c-b300">Azure background</div>
<div class="t-c-b300">Azure text</div>