Missouri State University Pattern Library

Color: West Plains

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:#0054a4;" role="presentation"></div>
                </td>
                <td>Reflex Blue</td>
                <td>#0054a4</td>
                <td>0, 84, 164</td>
                <td>$color-wp-reflex-blue</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:#50c8e8;" role="presentation"></div>
                </td>
                <td>Cyan</td>
                <td>#50c8e8</td>
                <td>80, 200, 232</td>
                <td>$color-wp-cyan</td>
                <td>Pass</td>
                <td>Fail</td>
            </tr>
            <tr>
                <td>
                    <div class="color" style="background-color:#d31245;" role="presentation"></div>
                </td>
                <td>Red</td>
                <td>#d31245</td>
                <td>211, 18, 69</td>
                <td>$color-wp-red</td>
                <td>Fail</td>
                <td>Pass</td>
            </tr>
            <tr>
                <td>
                    <div class="color" style="background-color:#b0bc22;" role="presentation"></div>
                </td>
                <td>Yellow-Green</td>
                <td>#b0bc22</td>
                <td>176, 188, 34</td>
                <td>$color-wp-yellow-green</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:#54075b;" role="presentation"></div>
                </td>
                <td>Purple</td>
                <td>#54075b</td>
                <td>84, 7, 91</td>
                <td>$color-wp-purple</td>
                <td>Fail</td>
                <td>Pass</td>
            </tr>
            <tr>
                <td>
                    <div class="color" style="background-color:#e36f1e;" role="presentation"></div>
                </td>
                <td>Orange</td>
                <td>#e36f1e</td>
                <td>227, 111, 30</td>
                <td>$color-wp-orange</td>
                <td>Fail</td>
                <td>Fail</td>
            </tr>
            <tr>
                <td>
                    <div class="color" style="background-color:#a0cf67;" role="presentation"></div>
                </td>
                <td>Green</td>
                <td>#a0cf67</td>
                <td>160, 207, 103</td>
                <td>$color-wp-green</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:#003f5f;" role="presentation"></div>
                </td>
                <td>Dark Blue</td>
                <td>#003f5f</td>
                <td>0, 63, 95</td>
                <td>$color-wp-dark-blue</td>
                <td>Fail</td>
                <td>Pass</td>
            </tr>
            <tr>
                <td>
                    <div class="color" style="background-color:#5d87a1;" role="presentation"></div>
                </td>
                <td>Medium Blue</td>
                <td>#5d87a1</td>
                <td>93, 135, 161</td>
                <td>$color-wp-medium-blue</td>
                <td>Pass</td>
                <td>Fail</td>
            </tr>
            <tr>
                <td>
                    <div class="color" style="background-color:#a7a9ac;" role="presentation"></div>
                </td>
                <td>Gray</td>
                <td>#a7a9ac</td>
                <td>167, 169, 172</td>
                <td>$color-wp-gray</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": "Reflex Blue",
          "hex": "#0054a4",
          "rgb": "0, 84, 164",
          "variable": "$color-wp-reflex-blue",
          "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": "Cyan",
          "hex": "#50c8e8",
          "rgb": "80, 200, 232",
          "variable": "$color-wp-cyan",
          "contrast": {
            "black": "Pass",
            "white": "Fail"
          }
        },
        {
          "name": "Red",
          "hex": "#d31245",
          "rgb": "211, 18, 69",
          "variable": "$color-wp-red",
          "contrast": {
            "black": "Fail",
            "white": "Pass"
          }
        },
        {
          "name": "Yellow-Green",
          "hex": "#b0bc22",
          "rgb": "176, 188, 34",
          "variable": "$color-wp-yellow-green",
          "contrast": {
            "black": "Pass",
            "white": "Fail"
          }
        }
      ]
    },
    {
      "name": "Tertiary palette",
      "item": [
        {
          "name": "Purple",
          "hex": "#54075b",
          "rgb": "84, 7, 91",
          "variable": "$color-wp-purple",
          "contrast": {
            "black": "Fail",
            "white": "Pass"
          }
        },
        {
          "name": "Orange",
          "hex": "#e36f1e",
          "rgb": "227, 111, 30",
          "variable": "$color-wp-orange",
          "contrast": {
            "black": "Fail",
            "white": "Fail"
          }
        },
        {
          "name": "Green",
          "hex": "#a0cf67",
          "rgb": "160, 207, 103",
          "variable": "$color-wp-green",
          "contrast": {
            "black": "Pass",
            "white": "Fail"
          }
        }
      ]
    },
    {
      "name": "Neutral palette",
      "item": [
        {
          "name": "Dark Blue",
          "hex": "#003f5f",
          "rgb": "0, 63, 95",
          "variable": "$color-wp-dark-blue",
          "contrast": {
            "black": "Fail",
            "white": "Pass"
          }
        },
        {
          "name": "Medium Blue",
          "hex": "#5d87a1",
          "rgb": "93, 135, 161",
          "variable": "$color-wp-medium-blue",
          "contrast": {
            "black": "Pass",
            "white": "Fail"
          }
        },
        {
          "name": "Gray",
          "hex": "#a7a9ac",
          "rgb": "167, 169, 172",
          "variable": "$color-wp-gray",
          "contrast": {
            "black": "Pass",
            "white": "Fail"
          }
        }
      ]
    }
  ]
}