There are no notes for this item.
- Handle: @color
- Variants (2): Springfield , West Plains
- Preview:
- Filesystem Path: src\components\03-utilities\color\color.hbs
- References (1): @rich-text
<article class="ContentBlock RichText swatch Page">
<p>A color's successful contrast against black and white is based on the <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">AA standard</a> for normal-size text set forth by the W3C.</p>
<h2>Primary palette</h2>
<table>
<thead>
<tr>
<th>Swatch</th>
<th>Name</th>
<th>Hex</th>
<th>RGB</th>
<th>Sass variable</th>
<th>Black contrast</th>
<th>White contrast</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="color" style="background-color:#5e0009;" role="presentation"></div>
</td>
<td>Maroon</td>
<td>#5e0009</td>
<td>94, 0, 9</td>
<td>$color-sgf-maroon</td>
<td>Fail</td>
<td>Pass</td>
</tr>
<tr>
<td>
<div class="color" style="background-color:#000000;" role="presentation"></div>
</td>
<td>Black</td>
<td>#000000</td>
<td>0, 0, 0</td>
<td>$color-black</td>
<td>Fail</td>
<td>Pass</td>
</tr>
<tr>
<td>
<div class="color" style="background-color:#ffffff;" role="presentation"></div>
</td>
<td>White</td>
<td>#ffffff</td>
<td>255, 255, 255</td>
<td>$color-white</td>
<td>Pass</td>
<td>Fail</td>
</tr>
</tbody>
</table>
<h2>Secondary palette</h2>
<table>
<thead>
<tr>
<th>Swatch</th>
<th>Name</th>
<th>Hex</th>
<th>RGB</th>
<th>Sass variable</th>
<th>Black contrast</th>
<th>White contrast</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="color" style="background-color:#eb002b;" role="presentation"></div>
</td>
<td>Brick City Red</td>
<td>#eb002b</td>
<td>235, 0, 43</td>
<td>$color-sgf-brick-city</td>
<td>Pass</td>
<td>Pass</td>
</tr>
<tr>
<td>
<div class="color" style="background-color:#0093b2;" role="presentation"></div>
</td>
<td>Boomer Sky</td>
<td>#0093b2</td>
<td>0, 147, 178</td>
<td>$color-sgf-boomer-sky</td>
<td>Pass</td>
<td>Fail</td>
</tr>
<tr>
<td>
<div class="color" style="background-color:#cfb500;" role="presentation"></div>
</td>
<td>Pride Band Brass</td>
<td>#cfb500</td>
<td>207, 181, 0</td>
<td>$color-sgf-pride-band-brass</td>
<td>Pass</td>
<td>Fail</td>
</tr>
</tbody>
</table>
<h2>Tertiary palette</h2>
<table>
<thead>
<tr>
<th>Swatch</th>
<th>Name</th>
<th>Hex</th>
<th>RGB</th>
<th>Sass variable</th>
<th>Black contrast</th>
<th>White contrast</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="color" style="background-color:#af1685;" role="presentation"></div>
</td>
<td>Bear Hug</td>
<td>#af1685</td>
<td>175, 22, 133</td>
<td>$color-sgf-bear-hug</td>
<td>Fail</td>
<td>Pass</td>
</tr>
<tr>
<td>
<div class="color" style="background-color:#e35205;" role="presentation"></div>
</td>
<td>Tent Theatre</td>
<td>#e35205</td>
<td>227, 82, 5</td>
<td>$color-sgf-tent-theatre</td>
<td>Pass</td>
<td>Fail</td>
</tr>
<tr>
<td>
<div class="color" style="background-color:#a4d65e;" role="presentation"></div>
</td>
<td>May Day</td>
<td>#a4d65e</td>
<td>164, 214, 94</td>
<td>$color-sgf-may-day</td>
<td>Pass</td>
<td>Fail</td>
</tr>
</tbody>
</table>
<h2>Neutral palette</h2>
<table>
<thead>
<tr>
<th>Swatch</th>
<th>Name</th>
<th>Hex</th>
<th>RGB</th>
<th>Sass variable</th>
<th>Black contrast</th>
<th>White contrast</th>
</tr>
</thead>
<tbody>
<tr>
<td>
<div class="color" style="background-color:#425563;" role="presentation"></div>
</td>
<td>Midnight Oil</td>
<td>#425563</td>
<td>66, 85, 99</td>
<td>$color-sgf-midnight-oil</td>
<td>Fail</td>
<td>Pass</td>
</tr>
<tr>
<td>
<div class="color" style="background-color:#6ba4b8;" role="presentation"></div>
</td>
<td>Hammons Fountain</td>
<td>#6ba4b8</td>
<td>107, 164, 184</td>
<td>$color-sgf-hammons-fountain</td>
<td>Pass</td>
<td>Fail</td>
</tr>
<tr>
<td>
<div class="color" style="background-color:#bfced6;" role="presentation"></div>
</td>
<td>Carrington</td>
<td>#bfced6</td>
<td>191, 206, 214</td>
<td>$color-sgf-carrington</td>
<td>Pass</td>
<td>Fail</td>
</tr>
</tbody>
</table>
</article>
{{#> @rich-text pageClass="swatch"}}
{{#*inline 'freeformContent'}}
<p>A color's successful contrast against black and white is based on the <a href="https://www.w3.org/TR/UNDERSTANDING-WCAG20/visual-audio-contrast-contrast.html">AA standard</a> for normal-size text set forth by the W3C.</p>
{{#each palette}}
<h2>{{name}}</h2>
<table>
<thead>
<tr>
<th>Swatch</th>
<th>Name</th>
<th>Hex</th>
<th>RGB</th>
<th>Sass variable</th>
<th>Black contrast</th>
<th>White contrast</th>
</tr>
</thead>
<tbody>
{{#each item}}
<tr>
<td>
<div class="color" style="background-color:{{hex}};" role="presentation"></div>
</td>
<td>{{name}}</td>
<td>{{hex}}</td>
<td>{{rgb}}</td>
<td>{{variable}}</td>
<td>{{contrast.black}}</td>
<td>{{contrast.white}}</td>
</tr>
{{/each}}
</tbody>
</table>
{{/each}}
{{/inline}}
{{/@rich-text}}
/* No context defined for this component. */