Missouri State University Pattern Library

Color: Springfield

There are no notes for this item.

<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}}
 
{
  "palette": [
    {
      "name": "Primary palette",
      "item": [
        {
          "name": "Maroon",
          "hex": "#5e0009",
          "rgb": "94, 0, 9",
          "variable": "$color-sgf-maroon",
          "contrast": {
            "black": "Fail",
            "white": "Pass"
          }
        },
        {
          "name": "Black",
          "hex": "#000000",
          "rgb": "0, 0, 0",
          "variable": "$color-black",
          "contrast": {
            "black": "Fail",
            "white": "Pass"
          }
        },
        {
          "name": "White",
          "hex": "#ffffff",
          "rgb": "255, 255, 255",
          "variable": "$color-white",
          "contrast": {
            "black": "Pass",
            "white": "Fail"
          }
        }
      ]
    },
    {
      "name": "Secondary palette",
      "item": [
        {
          "name": "Brick City Red",
          "hex": "#eb002b",
          "rgb": "235, 0, 43",
          "variable": "$color-sgf-brick-city",
          "contrast": {
            "black": "Pass",
            "white": "Pass"
          }
        },
        {
          "name": "Boomer Sky",
          "hex": "#0093b2",
          "rgb": "0, 147, 178",
          "variable": "$color-sgf-boomer-sky",
          "contrast": {
            "black": "Pass",
            "white": "Fail"
          }
        },
        {
          "name": "Pride Band Brass",
          "hex": "#cfb500",
          "rgb": "207, 181, 0",
          "variable": "$color-sgf-pride-band-brass",
          "contrast": {
            "black": "Pass",
            "white": "Fail"
          }
        }
      ]
    },
    {
      "name": "Tertiary palette",
      "item": [
        {
          "name": "Bear Hug",
          "hex": "#af1685",
          "rgb": "175, 22, 133",
          "variable": "$color-sgf-bear-hug",
          "contrast": {
            "black": "Fail",
            "white": "Pass"
          }
        },
        {
          "name": "Tent Theatre",
          "hex": "#e35205",
          "rgb": "227, 82, 5",
          "variable": "$color-sgf-tent-theatre",
          "contrast": {
            "black": "Pass",
            "white": "Fail"
          }
        },
        {
          "name": "May Day",
          "hex": "#a4d65e",
          "rgb": "164, 214, 94",
          "variable": "$color-sgf-may-day",
          "contrast": {
            "black": "Pass",
            "white": "Fail"
          }
        }
      ]
    },
    {
      "name": "Neutral palette",
      "item": [
        {
          "name": "Midnight Oil",
          "hex": "#425563",
          "rgb": "66, 85, 99",
          "variable": "$color-sgf-midnight-oil",
          "contrast": {
            "black": "Fail",
            "white": "Pass"
          }
        },
        {
          "name": "Hammons Fountain",
          "hex": "#6ba4b8",
          "rgb": "107, 164, 184",
          "variable": "$color-sgf-hammons-fountain",
          "contrast": {
            "black": "Pass",
            "white": "Fail"
          }
        },
        {
          "name": "Carrington",
          "hex": "#bfced6",
          "rgb": "191, 206, 214",
          "variable": "$color-sgf-carrington",
          "contrast": {
            "black": "Pass",
            "white": "Fail"
          }
        }
      ]
    }
  ]
}