University of Adelaide Style guide

Colors

The below colors are to display what is available within the style guide theme. The style guide theme and components should be used wherever possible.

If you have a third party application that you’re unable to use the style guide components on in certain places, then you can either use the hexadecimal value below, or alternatively, if you’re familiar with SCSS you can create variables for the colors you wish to use using Chroma and then reference those variables within your SCSS.

default

Descriptive color names for use in "functional" color names below.

color(brand-blue) uses the color: #005a9c

color(brand-red) uses the color: #d40000

color(brand-gold) uses the color: #b38808

color(brand-grey) uses the color: #666

color(brand-blue-light) uses the color: #dde5ee

color(brand-black) uses the color: #231f20

color(color-white) uses the color: #fff

color(color-black) uses the color: #000

color(color-green) uses the color: #428600

color(grey-light) uses the color: #eee

color(grey-dark) uses the color: #333

color(blue-light) uses the color: #4391ca

color(blue-mid) uses the color: #0679ca

color(blue-dark) uses the color: #013f73

color(cornflower-blue) uses the color: #66aeeb

color(orange-light) uses the color: #f4edda

color(orange-lighter) uses the color: #fbf8ee

color(orange-mid) uses the color: #e1cfa0

color(orange-dark) uses the color: #d4cbb3

color(orange-darker) uses the color: #876300

design

Colors used by functional parts of the design.

color(primary) uses the color: #005a9c

color(secondary) uses the color: #d40000

color(tertiary) uses the color: #b38808

color(quaternary) uses the color: #dde5ee

color(quinary) uses the color: #666

color(quaternary-light) uses the color: #eef2f7

color(quaternary-dark) uses the color: #bbcbdd

color(secondary-dark) uses the color: #a10000

color(quinary-light) uses the color: #dfdfdf

color(warning) uses the color: #876300

color(error) uses the color: #d40000

color(success) uses the color: #428600

color(info) uses the color: #0679ca

color(inverse) uses the color: #eee

color(muted) uses the color: #999999

color(dark) uses the color: #231f20

color(primary-light) uses the color: #4391ca

color(primary-dark) uses the color: #013f73

color(heading-grey) uses the color: #333

color(heading-orange) uses the color: #b38808

color(body) uses the color: #666

color(body-inverse) uses the color: #eee

color(link) uses the color: #005a9c

color(link-focus) uses the color: #d40000

color(list-dark) uses the color: #876300

color(cell-primary-light) uses the color: #0679ca

color(cell-tertiary) uses the color: #876300

color(cell-tertiary-light) uses the color: #f4edda

color(menu-link-border-color) uses the color: #0069b6

color(menu-link-border-color-quarternary-dark) uses the color: #a0b6cf

color(sitenav-border) uses the color: #e1cfa0

color(sitenav-current) uses the color: #d4cbb3

color(sitenav-nib) uses the color: #876300

color(sitenav-active) uses the color: #876300

color(sitenav-active-focus) uses the color: #5e4500

color(sitenav-second) uses the color: #f4edda

color(sitenav-third) uses the color: #fbf8ee

color(widget-light) uses the color: #66aeeb

color(widget-primary) uses the color: #005a9c

color(widget-dark) uses the color: #231f20

color(lcl-foot-bg) uses the color: #f4edda

color(lcl-foot-bord) uses the color: #e1cfa0

color(tab-default-background) uses the color: #e1cfa0

color(tab-link-background) uses the color: #fbf8ee

<!-- This markup is auto-generated from Sass with chroma-kss-markup(). Do not modify. --><div class="kss-style"><h3 class="chroma-kss__title">default</h3><p class="chroma-kss__description">Descriptive color names for use in "functional" color names below.</p><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #005a9c"></span><code class="chroma-kss__variable">color(brand-blue)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#005a9c</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #d40000"></span><code class="chroma-kss__variable">color(brand-red)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#d40000</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #b38808"></span><code class="chroma-kss__variable">color(brand-gold)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#b38808</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666"></span><code class="chroma-kss__variable">color(brand-grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #dde5ee"></span><code class="chroma-kss__variable">color(brand-blue-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#dde5ee</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #231f20"></span><code class="chroma-kss__variable">color(brand-black)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#231f20</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fff"></span><code class="chroma-kss__variable">color(color-white)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fff</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #000"></span><code class="chroma-kss__variable">color(color-black)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#000</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #428600"></span><code class="chroma-kss__variable">color(color-green)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#428600</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eee"></span><code class="chroma-kss__variable">color(grey-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#eee</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333"></span><code class="chroma-kss__variable">color(grey-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #4391ca"></span><code class="chroma-kss__variable">color(blue-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#4391ca</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0679ca"></span><code class="chroma-kss__variable">color(blue-mid)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0679ca</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #013f73"></span><code class="chroma-kss__variable">color(blue-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#013f73</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #66aeeb"></span><code class="chroma-kss__variable">color(cornflower-blue)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#66aeeb</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f4edda"></span><code class="chroma-kss__variable">color(orange-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f4edda</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fbf8ee"></span><code class="chroma-kss__variable">color(orange-lighter)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fbf8ee</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #e1cfa0"></span><code class="chroma-kss__variable">color(orange-mid)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#e1cfa0</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #d4cbb3"></span><code class="chroma-kss__variable">color(orange-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#d4cbb3</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #876300"></span><code class="chroma-kss__variable">color(orange-darker)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#876300</code></span></div><h3 class="chroma-kss__title">design</h3><p class="chroma-kss__description">Colors used by functional parts of the design.</p><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #005a9c"></span><code class="chroma-kss__variable">color(primary)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#005a9c</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #d40000"></span><code class="chroma-kss__variable">color(secondary)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#d40000</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #b38808"></span><code class="chroma-kss__variable">color(tertiary)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#b38808</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #dde5ee"></span><code class="chroma-kss__variable">color(quaternary)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#dde5ee</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666"></span><code class="chroma-kss__variable">color(quinary)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eef2f7"></span><code class="chroma-kss__variable">color(quaternary-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#eef2f7</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #bbcbdd"></span><code class="chroma-kss__variable">color(quaternary-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#bbcbdd</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #a10000"></span><code class="chroma-kss__variable">color(secondary-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#a10000</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #dfdfdf"></span><code class="chroma-kss__variable">color(quinary-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#dfdfdf</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #876300"></span><code class="chroma-kss__variable">color(warning)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#876300</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #d40000"></span><code class="chroma-kss__variable">color(error)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#d40000</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #428600"></span><code class="chroma-kss__variable">color(success)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#428600</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0679ca"></span><code class="chroma-kss__variable">color(info)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0679ca</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eee"></span><code class="chroma-kss__variable">color(inverse)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#eee</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #999999"></span><code class="chroma-kss__variable">color(muted)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#999999</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #231f20"></span><code class="chroma-kss__variable">color(dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#231f20</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #4391ca"></span><code class="chroma-kss__variable">color(primary-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#4391ca</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #013f73"></span><code class="chroma-kss__variable">color(primary-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#013f73</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #333"></span><code class="chroma-kss__variable">color(heading-grey)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#333</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #b38808"></span><code class="chroma-kss__variable">color(heading-orange)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#b38808</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #666"></span><code class="chroma-kss__variable">color(body)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#666</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #eee"></span><code class="chroma-kss__variable">color(body-inverse)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#eee</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #005a9c"></span><code class="chroma-kss__variable">color(link)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#005a9c</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #d40000"></span><code class="chroma-kss__variable">color(link-focus)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#d40000</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #876300"></span><code class="chroma-kss__variable">color(list-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#876300</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0679ca"></span><code class="chroma-kss__variable">color(cell-primary-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0679ca</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #876300"></span><code class="chroma-kss__variable">color(cell-tertiary)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#876300</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f4edda"></span><code class="chroma-kss__variable">color(cell-tertiary-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f4edda</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #0069b6"></span><code class="chroma-kss__variable">color(menu-link-border-color)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#0069b6</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #a0b6cf"></span><code class="chroma-kss__variable">color(menu-link-border-color-quarternary-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#a0b6cf</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #e1cfa0"></span><code class="chroma-kss__variable">color(sitenav-border)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#e1cfa0</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #d4cbb3"></span><code class="chroma-kss__variable">color(sitenav-current)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#d4cbb3</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #876300"></span><code class="chroma-kss__variable">color(sitenav-nib)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#876300</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #876300"></span><code class="chroma-kss__variable">color(sitenav-active)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#876300</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #5e4500"></span><code class="chroma-kss__variable">color(sitenav-active-focus)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#5e4500</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f4edda"></span><code class="chroma-kss__variable">color(sitenav-second)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f4edda</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fbf8ee"></span><code class="chroma-kss__variable">color(sitenav-third)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fbf8ee</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #66aeeb"></span><code class="chroma-kss__variable">color(widget-light)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#66aeeb</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #005a9c"></span><code class="chroma-kss__variable">color(widget-primary)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#005a9c</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #231f20"></span><code class="chroma-kss__variable">color(widget-dark)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#231f20</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #f4edda"></span><code class="chroma-kss__variable">color(lcl-foot-bg)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#f4edda</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #e1cfa0"></span><code class="chroma-kss__variable">color(lcl-foot-bord)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#e1cfa0</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #e1cfa0"></span><code class="chroma-kss__variable">color(tab-default-background)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#e1cfa0</code></span></div><div class="chroma-kss"><span class="chroma-kss__swatch" style="background-color: #fbf8ee"></span><code class="chroma-kss__variable">color(tab-link-background)</code> <span class="chroma-kss__alt-text">uses the color:</span> <span class="chroma-kss__value"><code>#fbf8ee</code></span></div></div>