Colors

Colors are prefixed with c-, and can be used directly in Sass with their variable names. In HTML, add bg- for backgrounds or t- for text color.

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

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
    😃

Sky Blue
Sass $c-b300
Hex #2BADE9
rgb(43,173,233)

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

Midnight
Sass $c-b700
Hex #071C26
rgb(7,28,38)

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

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

Secondary Palette

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

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

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

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

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

Orange
Sass $c-o300
Hex #FFA700
rgb(255,167,0)

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

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

Backgrounds

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

Midnight
Sass $c-b700
Hex #071C26
rgb(7,28,38)

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

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

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

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

Grayscale

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

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

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

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

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

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

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

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

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

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


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.

Default

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

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

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

Sky Blue
Sass $c-b300
Hex #2BADE9
rgb(43,173,233)

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

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

Transactional

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

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

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

Orange
Sass $c-o300
Hex #FFA700
rgb(255,167,0)

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

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

Positive

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

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

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

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

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

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

Neutral

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

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

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

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

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

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

Negative

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

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

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

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

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

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


Brand Palette

This is the full brand palette used at DreamHost.

$lightest-blue
$lighter-blue
$light-blue
$blue
$dark-blue
$darker-blue
$darkest-blue
$lighter-teal
$light-teal
$teal
$dark-teal
$darker-teal
$lighter-green
$light-green
$green
$dark-green
$darker-green
$lighter-salmon
$light-salmon
$salmon
$dark-salmon
$darker-salmon
$lighter-orange
$light-orange
$teal
$dark-orange
$darker-orange
$lighter-yellow
$light-yellow
$yellow
$dark-yellow
$darker-yellow
$lighter-red
$light-red
$red
$dark-red
$darker-red
$lighter-grey
$light-grey
$grey
$dark-grey
$darker-grey
$black
<div class="bg-blue">Blue background</div>
<div class="t-blue">Blue text</div>