---
title: Colours
---

- Use Sass variables in case colour values need to be updated.
- `gulp sbc-colours` will regenerate these swatches based on sass variables in `base/_colours.scss`

<div class="swatches">
{% for scss, hex in colors %}
  <div class="swatch-wrapper">
    <div class="swatch" style="background-color:{{ hex }};">
    </div>
    <b class="swatch-hex">
      <code>{{ hex }}</code>
    </b>
    <p class="swatch-scss">
      <code>{{ scss }}</code>
    </p>
  </div>
{% endfor %}
</div>