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)
<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).