2.1Color values

Service Year has two main colors: Red and Orange. There is also a set of supporting colors: navy, black, and white for neutrals and blue for accents such as button links.

Brand and UI Colors

Red
#D24719
RGB

Medium Red
#E57854
RGB

Light Red
#EA835D
RGB

Orange
#FFA02F
RGB

Medium Orange
#FFC677
RGB

Light Orange
#FFDDAA
RGB

Dark Navy
#243649
RGB

Navy
#33475C
RGB

Deep Medium Navy
#58799C
RGB

Medium Navy
#7D97B2
RGB

Light Navy
#B1C9E1
RGB

Green
#4BB368
RGB (75, 179, 104)

Medium Green
#65DD87
RGB

Light Green
#8CF4A9
RGB

Blue
#1678B6
RGB (22, 120, 182)

Medium Blue
#34A2E6
RGB

Light Blue
#77CBFF
RGB

Grey Colors

Black
#333333
RGB

Smoke
#E0E6F0
RGB

Snow
#F6F9FC
RGB

White
#FFFFFF
RGB (256, 256, 256)

Show Markup

<div class="kss-primary">
    <h3>Brand and UI Colors</h3>

    <div class="color-row">
        <div class="kss-color-box kss-red">
            <p>Red <br> #D24719 <br> RGB </p>
        </div>
        <div class="kss-color-box kss-med-red">
            <p>Medium Red <br> #E57854 <br> RGB</p>
        </div>
        <div class="kss-color-box kss-light-red">
            <p>Light Red <br> #EA835D <br> RGB </p>
        </div>
    </div>

    <div class="color-row">
        <div class="kss-color-box kss-orange">
            <p>Orange <br> #FFA02F <br> RGB </p>
        </div>
        <div class="kss-color-box kss-med-orange">
            <p>Medium Orange <br> #FFC677 <br> RGB </p>
        </div>
        <div class="kss-color-box kss-light-orange">
            <p>Light Orange <br> #FFDDAA <br> RGB </p>
        </div>
    </div>

    <div class="color-row">
        <div class="kss-color-box kss-dark-navy">
            <p>Dark Navy <br> #243649 <br> RGB </p>
        </div>
        <div class="kss-color-box kss-navy">
            <p>Navy <br> #33475C <br> RGB </p>
        </div>
        <div class="kss-color-box kss-new-navy">
            <p>Deep Medium Navy <br> #58799C <br> RGB </p>
        </div>
        <div class="kss-color-box kss-med-navy">
            <p>Medium Navy <br> #7D97B2 <br> RGB </p>
        </div>
        <div class="kss-color-box kss-light-navy">
            <p>Light Navy <br> #B1C9E1 <br> RGB</p>
        </div>
    </div>

    <div class="color-row">
        <div class="kss-color-box kss-green">
            <p>Green <br> #4BB368 <br> RGB (75, 179, 104)</p>
        </div>
        <div class="kss-color-box kss-med-green">
            <p>Medium Green <br> #65DD87 <br> RGB </p>
        </div>
        <div class="kss-color-box kss-light-green">
            <p>Light Green<br> #8CF4A9 <br> RGB </p>
        </div>
    </div>

    <div class="color-row">
        <div class="kss-color-box kss-blue">
            <p>Blue <br> #1678B6 <br> RGB (22, 120, 182)</p>
        </div>
        <div class="kss-color-box kss-med-blue">
            <p>Medium Blue <br> #34A2E6 <br> RGB </p>
        </div>
        <div class="kss-color-box kss-light-blue">
            <p>Light Blue <br> #77CBFF <br> RGB </p>
        </div>
    </div>
</div>

<div class="kss-primary">
    <h3>Grey Colors</h3>
    <div class="color-row">
        <div class="kss-color-box kss-black">
            <p>Black <br> #333333 <br> RGB </p>
        </div>
        <div class="kss-color-box kss-smoke">
            <p style="color: #666;">Smoke <br> #E0E6F0 <br> RGB </p>
        </div>
        <div class="kss-color-box kss-snow">
            <p style="color: #666;">Snow <br> #F6F9FC <br> RGB </p>
        </div>
        <div class="kss-color-box kss-white">
            <p style="color: #666;">White <br> #FFFFFF <br> RGB (256, 256, 256)</p>
        </div>
    </div>
</div>


2.2Accessibility

  • Color is not used as the only visual means of conveying information, indicating an action, prompting a response, or distinguishing a visual element.
  • The visual presentation of text and images of text has a contrast ratio of at least 4.5:1, except for the following:
    • Large-scale text and images of large-scale text have a contrast ratio of at least 3:1 (18 point text or 14 point bold text is judged to be large enough to require a lower contrast ratio.)
    • Text or images of text that are part of an inactive user interface component, that are pure decoration, that are not visible to anyone, or that are part of a picture that contains significant other visual content, have no contrast requirement.
    • Text that is part of a logo or brand name has no contrast requirement.
    • All non-text elements have a contrast ratio of at least 3:1 (except for inactive elements).