Source: dist/css/acc_boot.css, line 13160
1.2.5 info: Color Variations
The Modified versions of the info 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/acc_boot.css, line 13160
The Modified versions of the info color from this theme
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #a3988c;"
>
<div class="p_3 bg_info-n5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >info-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"
>#110f0d</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, 15, 13</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"
>31deg, 11%, 6%</span
>
</div>
</div>
</div>
<div class="p_3 bg_info-n4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >info-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"
>#25211e</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, 33, 30</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"
>31deg, 11%, 13%</span
>
</div>
</div>
</div>
<div class="p_3 bg_info-n3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >info-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"
>#433d36</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"
>67, 61, 54</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"
>31deg, 11%, 24%</span
>
</div>
</div>
</div>
<div class="p_3 bg_info-n2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >info-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"
>#6a6055</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"
>106, 96, 85</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"
>31deg, 11%, 37%</span
>
</div>
</div>
</div>
<div class="p_3 bg_info-n1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >info-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"
>#8f8173</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"
>143, 129, 115</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"
>31deg, 11%, 51%</span
>
</div>
</div>
</div>
<div class="p_3 bg_info p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >info</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"
>#a3988c</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"
>163, 152, 140</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"
>31deg, 11%, 59%</span
>
</div>
</div>
</div>
<div class="p_3 bg_info-1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >info-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"
>#b1a79d</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"
>177, 167, 157</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"
>31deg, 11%, 66%</span
>
</div>
</div>
</div>
<div class="p_3 bg_info-2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >info-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"
>#c5beb7</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"
>197, 190, 183</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"
>31deg, 11%, 74%</span
>
</div>
</div>
</div>
<div class="p_3 bg_info-3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >info-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"
>#dad6d1</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"
>218, 214, 209</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"
>31deg, 11%, 84%</span
>
</div>
</div>
</div>
<div class="p_3 bg_info-4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >info-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"
>#ebe8e6</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"
>235, 232, 230</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"
>31deg, 11%, 91%</span
>
</div>
</div>
</div>
<div class="p_3 bg_info-5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >info-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"
>#f6f5f4</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"
>246, 245, 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"
>31deg, 11%, 96%</span
>
</div>
</div>
</div>
</div>