DAHLIA Pattern Library

Color 

<div class="row">
    <div class="medium-4 columns">
        <div class="color-chip bg-dust">
            <div class="color-chip__name">dust</div>
            <div class="color-chip__hex">#f5f8f9</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-snow">
            <div class="color-chip__name">snow</div>
            <div class="color-chip__hex">#f9f9f9</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-mist">
            <div class="color-chip__name">mist</div>
            <div class="color-chip__hex">#f7f7f7</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-vapor">
            <div class="color-chip__name">vapor</div>
            <div class="color-chip__hex">#f6f6f6</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-wash">
            <div class="color-chip__name">wash</div>
            <div class="color-chip__hex">#efefef</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-smoke">
            <div class="color-chip__name">smoke</div>
            <div class="color-chip__hex">#dedee0</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-iron">
            <div class="color-chip__name">iron</div>
            <div class="color-chip__hex">#ccc</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-base">
            <div class="color-chip__name">base</div>
            <div class="color-chip__hex">#aaa</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-aluminum">
            <div class="color-chip__name">aluminum</div>
            <div class="color-chip__hex">#999</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-steel">
            <div class="color-chip__name">steel</div>
            <div class="color-chip__hex">#767676</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-charcoal">
            <div class="color-chip__name">charcoal</div>
            <div class="color-chip__hex">#555</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-tuatara">
            <div class="color-chip__name">tuatara</div>
            <div class="color-chip__hex">#30383a</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-oil">
            <div class="color-chip__name">oil</div>
            <div class="color-chip__hex">#333</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-ebony">
            <div class="color-chip__name">ebony</div>
            <div class="color-chip__hex">#242c2e</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-jet">
            <div class="color-chip__name">jet</div>
            <div class="color-chip__hex">#222</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-primary">
            <div class="color-chip__name">primary</div>
            <div class="color-chip__hex">#0177DA</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-deep">
            <div class="color-chip__name">deep</div>
            <div class="color-chip__hex">#0067be</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-dark">
            <div class="color-chip__name">dark</div>
            <div class="color-chip__hex">#0d4b80</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-primary-tint">
            <div class="color-chip__name">primary-tint</div>
            <div class="color-chip__hex">#daeeff</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-attention">
            <div class="color-chip__name">attention</div>
            <div class="color-chip__hex">#00bed5</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-attention-tint">
            <div class="color-chip__name">attention-tint</div>
            <div class="color-chip__hex">#c8f1ff</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-royal">
            <div class="color-chip__name">royal</div>
            <div class="color-chip__hex">#b85ed5</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-royal-tint">
            <div class="color-chip__name">royal-tint</div>
            <div class="color-chip__hex">#eed7f5</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-splash">
            <div class="color-chip__name">splash</div>
            <div class="color-chip__hex">#ff6627</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-splash-tint">
            <div class="color-chip__name">splash-tint</div>
            <div class="color-chip__hex">#ffd2c0</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-lush">
            <div class="color-chip__name">lush</div>
            <div class="color-chip__hex">#99cd00</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-lush-tint">
            <div class="color-chip__name">lush-tint</div>
            <div class="color-chip__hex">#f2ffcd</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-alert">
            <div class="color-chip__name">alert</div>
            <div class="color-chip__hex">#e31c3d</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-alert-tint">
            <div class="color-chip__name">alert-tint</div>
            <div class="color-chip__hex">#f9d2d8</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-success">
            <div class="color-chip__name">success</div>
            <div class="color-chip__hex">#2e8540</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-success-tint">
            <div class="color-chip__name">success-tint</div>
            <div class="color-chip__hex">#b4e5be</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-warn">
            <div class="color-chip__name">warn</div>
            <div class="color-chip__hex">#fdb81e</div>
        </div>
    </div>
    <div class="medium-4 columns">
        <div class="color-chip bg-warn-tint">
            <div class="color-chip__name">warn-tint</div>
            <div class="color-chip__hex">#fee8b6</div>
        </div>
    </div>
</div>
 
<div class="row">
  {{#each colors }}
  <div class="medium-4 columns">
    <div class="color-chip bg-{{this.name}}">
      <div class="color-chip__name">{{this.name}}</div>
      <div class="color-chip__hex">{{this.hex}}</div>
    </div>
  </div>
  {{/each}}
</div>
 
{
  "colors": [
    {
      "name": "dust",
      "hex": "#f5f8f9"
    },
    {
      "name": "snow",
      "hex": "#f9f9f9"
    },
    {
      "name": "mist",
      "hex": "#f7f7f7"
    },
    {
      "name": "vapor",
      "hex": "#f6f6f6"
    },
    {
      "name": "wash",
      "hex": "#efefef"
    },
    {
      "name": "smoke",
      "hex": "#dedee0"
    },
    {
      "name": "iron",
      "hex": "#ccc"
    },
    {
      "name": "base",
      "hex": "#aaa"
    },
    {
      "name": "aluminum",
      "hex": "#999"
    },
    {
      "name": "steel",
      "hex": "#767676"
    },
    {
      "name": "charcoal",
      "hex": "#555"
    },
    {
      "name": "tuatara",
      "hex": "#30383a"
    },
    {
      "name": "oil",
      "hex": "#333"
    },
    {
      "name": "ebony",
      "hex": "#242c2e"
    },
    {
      "name": "jet",
      "hex": "#222"
    },
    {
      "name": "primary",
      "hex": "#0177DA"
    },
    {
      "name": "deep",
      "hex": "#0067be"
    },
    {
      "name": "dark",
      "hex": "#0d4b80"
    },
    {
      "name": "primary-tint",
      "hex": "#daeeff"
    },
    {
      "name": "attention",
      "hex": "#00bed5"
    },
    {
      "name": "attention-tint",
      "hex": "#c8f1ff"
    },
    {
      "name": "royal",
      "hex": "#b85ed5"
    },
    {
      "name": "royal-tint",
      "hex": "#eed7f5"
    },
    {
      "name": "splash",
      "hex": "#ff6627"
    },
    {
      "name": "splash-tint",
      "hex": "#ffd2c0"
    },
    {
      "name": "lush",
      "hex": "#99cd00"
    },
    {
      "name": "lush-tint",
      "hex": "#f2ffcd"
    },
    {
      "name": "alert",
      "hex": "#e31c3d"
    },
    {
      "name": "alert-tint",
      "hex": "#f9d2d8"
    },
    {
      "name": "success",
      "hex": "#2e8540"
    },
    {
      "name": "success-tint",
      "hex": "#b4e5be"
    },
    {
      "name": "warn",
      "hex": "#fdb81e"
    },
    {
      "name": "warn-tint",
      "hex": "#fee8b6"
    }
  ]
}

This palette is designed to support a range of distinct visual styles that continue to feel connected. The intent of the palette is to convey a warm and open spirit, with bright saturated tints of blue and red, grounded in sophisticated deeper shades of cool blues and grays.

These brand colors are used globally across all parts of the site for things like links, buttons and background colors.

You can find all the color styles in _variables.scss