<div class="c-color">
<div class="c-color__swatch dark-blue"></div>
<h1 class="c-color__name">$color-dark-blue</h1>
<p class="c-color__description">For chrome, top navigation and text.</p>
<p class="c-color__rgba">rgba(28, 49, 58, 1)</p>
</div>
<div class="c-color">
<div class="c-color__swatch blue"></div>
<h1 class="c-color__name">$color-blue</h1>
<p class="c-color__description">For sub nav, toolbars.</p>
<p class="c-color__rgba">rgba(69, 90, 100, 1)</p>
</div>
<div class="c-color">
<div class="c-color__swatch bright-blue"></div>
<h1 class="c-color__name">$color-bright-blue</h1>
<p class="c-color__description">For selection and 'on' states.</p>
<p class="c-color__rgba">rgba(53, 163, 206, 1)</p>
</div>
<div class="c-color">
<div class="c-color__swatch pink"></div>
<h1 class="c-color__name">$color-pink</h1>
<p class="c-color__description">For drawing attention, error messages, notifications and alerts.</p>
<p class="c-color__rgba">rgba(197, 17, 98, 1)</p>
</div>
<div class="c-color">
<div class="c-color__swatch light-pink"></div>
<h1 class="c-color__name">$color-light-pink</h1>
<p class="c-color__description">Opaque background color to be used in form field error states.</p>
<p class="c-color__rgba">rgba(254,231,236,1)</p>
</div>
<div class="c-color">
<div class="c-color__swatch yellow"></div>
<h1 class="c-color__name">$color-yellow</h1>
<p class="c-color__description">Highlight color meant for primary actions.</p>
<p class="c-color__rgba">rgba(249, 220, 92, 1)</p>
</div>
<div class="c-color">
<div class="c-color__swatch off-white"></div>
<h1 class="c-color__name">$color-off-white</h1>
<p class="c-color__description">Slightly tinted white instead of pure white.</p>
<p class="c-color__rgba">rgba(250, 253, 255, 1)</p>
</div>
<div class="c-color">
<div class="c-color__swatch black"></div>
<h1 class="c-color__name">$color-black</h1>
<p class="c-color__description">...</p>
<p class="c-color__rgba">rgba(0, 0, 0, 1)</p>
</div>
<div class="c-color">
<div class="c-color__swatch middle-blue"></div>
<h1 class="c-color__name">$color-middle-blue</h1>
<p class="c-color__description">Middle blue for text use</p>
<p class="c-color__rgba">rgba(48, 110, 158, 1)</p>
</div>
<div class="c-color">
<div class="c-color__swatch light-blue"></div>
<h1 class="c-color__name">$color-light-blue</h1>
<p class="c-color__description">Pale blue for hover states.</p>
<p class="c-color__rgba">rgba(224, 236, 244, 1)</p>
</div>
<div class="c-color">
<div class="c-color__swatch light-gray"></div>
<h1 class="c-color__name">$color-light-gray</h1>
<p class="c-color__description">Background for text fields, new</p>
<p class="c-color__rgba">rgba(232, 234, 235, 1)</p>
</div>
<div class="c-color">
<div class="c-color__swatch blue-bg"></div>
<h1 class="c-color__name">$color-blue-bg</h1>
<p class="c-color__description">For background color of form fields.</p>
<p class="c-color__rgba">rgba(228, 233, 236, 1)</p>
</div>
<div class="c-color">
<div class="c-color__swatch blue-bg-hover"></div>
<h1 class="c-color__name">$color-blue-bg-hover-active</h1>
<p class="c-color__description">The hover and active states for $color-blue-bg.</p>
<p class="c-color__rgba">rgba(204, 209, 212, 1)</p>
</div>
<div class="c-color">
<div class="c-color__swatch blue-grey"></div>
<h1 class="c-color__name">$color-blue-grey</h1>
<p class="c-color__description">Used for the track in switches.</p>
<p class="c-color__rgba">rgba(187, 193, 196, 1)</p>
</div>