Source: dist/css/cardiosmart_boot.css, line 11323
1.2.8 secondary: Color Variations
The Modified versions of the secondary 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/cardiosmart_boot.css, line 11323
The Modified versions of the secondary color from this theme
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #009db1;"
>
<div class="p_3 bg_secondary-n5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >secondary-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"
>#001012</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"
>0, 16, 18</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"
>187deg, 100%, 3%</span
>
</div>
</div>
</div>
<div class="p_3 bg_secondary-n4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >secondary-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"
>#002327</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"
>0, 35, 39</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"
>187deg, 100%, 8%</span
>
</div>
</div>
</div>
<div class="p_3 bg_secondary-n3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >secondary-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"
>#003f47</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"
>0, 63, 71</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"
>187deg, 100%, 14%</span
>
</div>
</div>
</div>
<div class="p_3 bg_secondary-n2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >secondary-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"
>#006370</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"
>0, 99, 112</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"
>187deg, 100%, 22%</span
>
</div>
</div>
</div>
<div class="p_3 bg_secondary-n1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >secondary-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"
>#008596</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"
>0, 133, 150</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"
>187deg, 100%, 30%</span
>
</div>
</div>
</div>
<div class="p_3 bg_secondary p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >secondary</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"
>#009db1</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"
>0, 157, 177</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"
>187deg, 100%, 35%</span
>
</div>
</div>
</div>
<div class="p_3 bg_secondary-1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >secondary-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"
>#00c9e3</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"
>0, 201, 227</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"
>187deg, 100%, 45%</span
>
</div>
</div>
</div>
<div class="p_3 bg_secondary-2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >secondary-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"
>#2de7ff</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"
>45, 231, 255</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"
>187deg, 100%, 59%</span
>
</div>
</div>
</div>
<div class="p_3 bg_secondary-3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >secondary-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"
>#7af0ff</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"
>122, 240, 255</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"
>187deg, 100%, 74%</span
>
</div>
</div>
</div>
<div class="p_3 bg_secondary-4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >secondary-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"
>#b6f7ff</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"
>182, 247, 255</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"
>187deg, 100%, 86%</span
>
</div>
</div>
</div>
<div class="p_3 bg_secondary-5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >secondary-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"
>#defbff</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"
>222, 251, 255</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"
>187deg, 100%, 93%</span
>
</div>
</div>
</div>
</div>