Source: dist/css/virtual_boot.css, line 17406
1.2.6 navigation: Color Variations
The Modified versions of the navigation color from this theme
This is currently being depreciated. Please visited the new location for the styleguide at https://assets.acc.org/Arches/Latest/docs/
Source: dist/css/virtual_boot.css, line 17406
The Modified versions of the navigation color from this theme
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #2b58c0;"
>
<div class="p_3 bg_navigation-n5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >navigation-n5</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#040913</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>4, 9, 19</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>222deg, 63%, 5%</span
>
</div>
</div>
</div>
<div class="p_3 bg_navigation-n4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >navigation-n4</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#09132a</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>9, 19, 42</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>222deg, 63%, 10%</span
>
</div>
</div>
</div>
<div class="p_3 bg_navigation-n3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >navigation-n3</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#11234d</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>17, 35, 77</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>222deg, 63%, 18%</span
>
</div>
</div>
</div>
<div class="p_3 bg_navigation-n2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >navigation-n2</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#1b3779</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>27, 55, 121</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>222deg, 63%, 29%</span
>
</div>
</div>
</div>
<div class="p_3 bg_navigation-n1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >navigation-n1</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#254ba3</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>37, 75, 163</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>222deg, 63%, 39%</span
>
</div>
</div>
</div>
<div class="p_3 bg_navigation p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >navigation</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#2b58c0</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>43, 88, 192</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>222deg, 63%, 46%</span
>
</div>
</div>
</div>
<div class="p_3 bg_navigation-1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >navigation-1</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#406dd4</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>64, 109, 212</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>222deg, 63%, 54%</span
>
</div>
</div>
</div>
<div class="p_3 bg_navigation-2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >navigation-2</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#7193df</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>113, 147, 223</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>222deg, 63%, 66%</span
>
</div>
</div>
</div>
<div class="p_3 bg_navigation-3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >navigation-3</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#a5baeb</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>165, 186, 235</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>222deg, 63%, 78%</span
>
</div>
</div>
</div>
<div class="p_3 bg_navigation-4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >navigation-4</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#ced9f4</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>206, 217, 244</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>222deg, 63%, 88%</span
>
</div>
</div>
</div>
<div class="p_3 bg_navigation-5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >navigation-5</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HEX:</span
>
<span class="user-select_all font_accent lowercase"
>#e9eefa</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>233, 238, 250</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>222deg, 63%, 95%</span
>
</div>
</div>
</div>
</div>