Colour

<div class="grid-container-full sg-color-palettes"> <div class="grid-x sg-palette"> <div class="cell medium-2"> <h2>Primary</h2> </div> <div class="cell medium-10"> <div class="grid-x"> <div class="sg-color cell medium-3"> <div class="grid-x"> <div class="sg-color-chip" style="background-color: #0C6144"></div> </div> <div class="grid-x"> <div class="cell medium-6"> <div class="text--secondary color-name">Jewel</div> </div> <div class="cell medium-6"> <div class="text--secondary color-code">#0C6144</div> </div> </div> </div> <div class="sg-color cell medium-3"> <div class="grid-x"> <div class="sg-color-chip" style="background-color: #00875A"></div> </div> <div class="grid-x"> <div class="cell medium-6"> <div class="text--secondary color-name">Deep sea</div> </div> <div class="cell medium-6"> <div class="text--secondary color-code">#00875A</div> </div> </div> </div> <div class="sg-color cell medium-3"> <div class="grid-x"> <div class="sg-color-chip" style="background-color: #5FBD00"></div> </div> <div class="grid-x"> <div class="cell medium-6"> <div class="text--secondary color-name">Limeade</div> </div> <div class="cell medium-6"> <div class="text--secondary color-code">#5FBD00</div> </div> </div> </div> </div> </div> </div> <div class="grid-x sg-palette"> <div class="cell medium-2"> <h2>Secondary</h2> </div> <div class="cell medium-10"> <div class="grid-x"> <div class="sg-color cell medium-3"> <div class="grid-x"> <div class="sg-color-chip" style="background-color: #491D6E"></div> </div> <div class="grid-x"> <div class="cell medium-6"> <div class="text--secondary color-name">Honey flower</div> </div> <div class="cell medium-6"> <div class="text--secondary color-code">#491D6E</div> </div> </div> </div> </div> </div> </div> <div class="grid-x sg-palette"> <div class="cell medium-2"> <h2>Support</h2> </div> <div class="cell medium-10"> <div class="grid-x"> <div class="sg-color cell medium-3"> <div class="grid-x"> <div class="sg-color-chip" style="background-color: #111317"></div> </div> <div class="grid-x"> <div class="cell medium-6"> <div class="text--secondary color-name">Woodsmoke</div> </div> <div class="cell medium-6"> <div class="text--secondary color-code">#111317</div> </div> </div> </div> <div class="sg-color cell medium-3"> <div class="grid-x"> <div class="sg-color-chip" style="background-color: #767676"></div> </div> <div class="grid-x"> <div class="cell medium-6"> <div class="text--secondary color-name">Boulder</div> </div> <div class="cell medium-6"> <div class="text--secondary color-code">#767676</div> </div> </div> </div> <div class="sg-color cell medium-3"> <div class="grid-x"> <div class="sg-color-chip" style="background-color: #C9C9C9"></div> </div> <div class="grid-x"> <div class="cell medium-6"> <div class="text--secondary color-name">Silver</div> </div> <div class="cell medium-6"> <div class="text--secondary color-code">#C9C9C9</div> </div> </div> </div> <div class="sg-color cell medium-3"> <div class="grid-x"> <div class="sg-color-chip" style="background-color: #EBEBEB"></div> </div> <div class="grid-x"> <div class="cell medium-6"> <div class="text--secondary color-name">Gallery</div> </div> <div class="cell medium-6"> <div class="text--secondary color-code">#EBEBEB</div> </div> </div> </div> <div class="sg-color cell medium-3"> <div class="grid-x"> <div class="sg-color-chip" style="background-color: #F8F8F8"></div> </div> <div class="grid-x"> <div class="cell medium-6"> <div class="text--secondary color-name">Alabaster</div> </div> <div class="cell medium-6"> <div class="text--secondary color-code">#F8F8F8</div> </div> </div> </div> <div class="sg-color cell medium-3"> <div class="grid-x"> <div class="sg-color-chip" style="background-color: #FFFFFF"></div> </div> <div class="grid-x"> <div class="cell medium-6"> <div class="text--secondary color-name">White</div> </div> <div class="cell medium-6"> <div class="text--secondary color-code">#FFFFFF</div> </div> </div> </div> </div> </div> </div> <div class="grid-x sg-palette"> <div class="cell medium-2"> <h2>Information</h2> </div> <div class="cell medium-10"> <div class="grid-x"> <div class="sg-color cell medium-3"> <div class="grid-x"> <div class="sg-color-chip" style="background-color: #C8349E"></div> </div> <div class="grid-x"> <div class="cell medium-6"> <div class="text--secondary color-name">Medium Red Violet</div> </div> <div class="cell medium-6"> <div class="text--secondary color-code">#C8349E</div> </div> </div> </div> <div class="sg-color cell medium-3"> <div class="grid-x"> <div class="sg-color-chip" style="background-color: #FBED4F"></div> </div> <div class="grid-x"> <div class="cell medium-6"> <div class="text--secondary color-name">Gorse</div> </div> <div class="cell medium-6"> <div class="text--secondary color-code">#FBED4F</div> </div> </div> </div> </div> </div> </div> </div>
<div class="grid-container-full sg-color-palettes"> {{#each palettes}} <div class="grid-x sg-palette"> <div class="cell medium-2"> <h2>{{title}}</h2> </div> <div class="cell medium-10"> <div class="grid-x"> {{#each colours}} {{#each this}} <div class="sg-color cell medium-3"> <div class="grid-x"> <div class="sg-color-chip" style="background-color: {{this}}"></div> </div> <div class="grid-x"> <div class="cell medium-6"> <div class="text--secondary color-name">{{@key}}</div> </div> <div class="cell medium-6"> <div class="text--secondary color-code">{{this}}</div> </div> </div> </div> {{/each}} {{/each}} </div> </div> </div> {{/each}} </div>
{ "palettes": [ { "title": "Primary", "colours": [ { "Jewel": "#0C6144" }, { "Deep sea": "#00875A" }, { "Limeade": "#5FBD00" } ] }, { "title": "Secondary", "colours": [ { "Honey flower": "#491D6E" } ] }, { "title": "Support", "colours": [ { "Woodsmoke": "#111317" }, { "Boulder": "#767676" }, { "Silver": "#C9C9C9" }, { "Gallery": "#EBEBEB" }, { "Alabaster": "#F8F8F8" }, { "White": "#FFFFFF" } ] }, { "title": "Information", "colours": [ { "Medium Red Violet": "#C8349E" }, { "Gorse": "#FBED4F" } ] } ] }

There are no notes for this item.