Source: dist/css/cardiosmart_boot.css, line 10650
1 Design Base
Arches is design inspired by a pad of paper in the hand. Subtle Textures and Layer shadows keep the readablity very high.
Source: dist/css/cardiosmart_boot.css, line 10814
1.1 Theme Colors
Colors are based off of the ACC Scrub Colors.
-
#015697; primary
map-get($theme-palette, primary) -
#009db1; secondary
map-get($theme-palette, secondary) -
#898989; shade
map-get($theme-palette, shade) -
#e17009; accent
map-get($theme-palette, accent) -
#a3988c; info
map-get($theme-palette, info) -
#f5ca4f; highlight
map-get($theme-palette, highlight)
Source: dist/css/cardiosmart_boot.css, line 10806
1.1.1 ACC's Blue
-
#004176; acc
$acc-blue
Source: dist/css/cardiosmart_boot.css, line 10831
1.1.2 Action Colors
Actionable colors used to respond to user inputs and messaging.
-
#953b39; alert
map-get($theme-palette, alert) -
#c67605; warning
map-get($theme-palette, warning) -
#468847; success
map-get($theme-palette, success) -
#2b58c0; navigation
map-get($theme-palette, navigation)
Source: dist/css/cardiosmart_boot.css, line 10844
1.1.3 Color Coding
Color Coding is used in specific products and concepts to illustrate cohesion and collections. All of these color codes are used universally through out the college and have an assoicated meaning. All of these colors are just used for reference and have no associated decorator classes. You must include the the associated color-code_x.css have access to utlity classes that will color using the bellow colors.
Source: dist/css/cardiosmart_boot.css, line 10913
1.1.3.1 Clinical Pathway Colors
Each of the clinical pathways has a distinctive color. These colors are used to give a distinct theme to our clinical apps, marketing, pdf's and tools.
-
#009974; Acute Coronary Syndromes
$pathway-acute-coronary-syndromes -
#005b37; arrhythmias and Clinical EP
$pathway-arrhythmias-EP -
#fdb918; Congenital Heart Disease
$pathway-congenital-heart-disease -
#d9691f; Standard ECG, Stress Test
$pathway-ecg-stress-test -
#410d49; Heart Failure and Cardiomyopathies
$pathway-heart-failure -
#c8b02f; Invasive Cardiology Angiography and Intervention
$pathway-invasive-cardiology -
#947b33; Noninvasive Cardiology
$pathway-noninvasive-cardiology -
#8e2582; Pandemic "Covid"
$pathway-pandemic -
#0079ad; pericardial Disease
$pathway-pericardial -
#a01d51; Prevention
$pathway-prevention -
#d60e7e; Pulmonary Hypertension and Venous Thromboembolic Disease
$pathway-pulmonary-hypertension -
#00b6f1; Special
$pathway-special -
#0f3e65; Stable ischemic Heart Disease
$pathway-stable-ischemic-heart-disease -
#4f4190; Valvular Heart Disease
$pathway-valvular-heart-disease -
#ae171c; Vascular Medicine
$pathway-vascular-medicine
Source: dist/css/cardiosmart_boot.css, line 10886
1.1.3.2 Credit Type Color Coding
Credit Types in the ACC have a specific color coding.
-
#e8c536; AAPA: American Academy of Physician Assistants (AAPA) Category 1 CME Credit
$credit-AAPA -
#007a5b; ABP-MOC: American Board of Pediatrics
$credit-ABP -
#0b6d4c; ABP-MOC 2: American Board of Pediatrics MOC 2
$credit-ABPMOCII -
#105a3b; ABP-MOC 4: American Board of Pediatrics MOC 4
$credit-ABPMOCIV -
#775744; ATCEU: Athletic Trainer Continuing Education Unit
$credit-ATCEU -
#a8a8a8; CE: Continuing CCA\Tech Education
$credit-CE -
#00a15b; CME: AMA PRA Category 1TM Credit(s)
$credit-CME -
#198dae; CNE: Continuing Nurse Education
$credit-CNE -
#52549e; CNErx: Continuing Nursing Education Pharmaceutical
$credit-CNErx -
#775891; COP: Certificate of Participation
$credit-COP -
#992e2e; CPE: Continuing Pharmacy Education
$credit-CPE -
#d16528; ECME: European Board for Accreditation in Cardiology (EBAC) External CME Credit
$credit-ECME -
#6c36b3; IPCE: Interprofessional Continuing Education Credit
$credit-IPCE -
#9a1267; MOC II: ABIM MOC Part II
$credit-MOCII -
#d3248d; MOC IV: ABIM MOC Part IV
$credit-MOCIV
Source: dist/css/cardiosmart_boot.css, line 10853
1.1.3.3 COR Colors
(COR) Class of Recomendation is a color collect used in Guideline recomendations.
-
#6fc284; I
$cor-green -
#ffd44f; IIA
$cor-yellow -
#faa74b; IIA
$cor-yellow-orange -
#f15d4c;III and III-NoHarm
$cor-orange -
#ed1c00; III-harm
$cor-red
Source: dist/css/cardiosmart_boot.css, line 10870
1.1.3.4 LOE Colors
(LOE) level of Evedence is a color collect used in Guideline recomendations.
-
#3e6fb7;LOE A
$loe-dark-blue -
#659cd3;LOE B-R
$loe-mid-blue -
#a1c1e6;LOE B-NR
$loe-light-blue -
#b5d5e5; LOE C
$loe-pale-blue
Source: dist/css/cardiosmart_boot.css, line 10966
1.1.3.5 Social Network Colors
Each of the social networks has a distinctive color. These colors are used to give a distinct theme to the social nav that is in different locations.
-
#00aced; twitter
$twitter -
#3b5998; facebook
$facebook -
#007bb6; linkedin
$linkedin -
#ea4cc0; apple-store
$apple-store -
#689f38; google-play
$google-play -
#bb0000; youtube
$youtube
Source: dist/css/cardiosmart_boot.css, line 10940
1.1.3.6 Registry CC
Credit Type Color codes in the ACC have a specific color coding.
-
#f22418; Chest Pain MI Registry
$registry-cpmi -
#ffb300; AFib Ablation Registry
$registry-afib -
#0086d5; CathPCI Registry
$registry-cathpci -
#80b800; ICD Registry
$registry-icd -
#4e1f73; IMPACT Registry
$registry-impact -
#0e4f1b; PINNACLE Registry (Primary)
$registry-pinnacle-primary -
#b3c4c4; PINNACLE Registry (Accent)
$registry-pinnacle-accent -
#d6560d; Patient Navigator Focus MI
$registry-focus -
#c0268e; Reducing Risk PCI Bleeding
$registry-pcibleeding -
#00667a; LAAO Registry
$registry-laao -
#00947f; PVI Registry
$registry-pvi -
#04adad; Auxiliar Data Collection
$registry-auxdata -
#a20062; STS ACC TVT Registry
$registry-ststvt -
#7893b8; Diabetes Collaborative
$registry-diabetes
Source: dist/css/cardiosmart_boot.css, line 14523
1.2 Crayon Box
This is all of the colors of the theme broken out with its modifications written in hex code.
Source: dist/css/cardiosmart_boot.css, line 14203
1.2.1 acc: Color Variations
The Modified versions of the acc color from this theme
Example
acc-n5
HEX:
#00070c
RGB:0, 7, 12
HSL:207deg, 100%, 2%
acc-n4
HEX:
#000e1a
RGB:0, 14, 26
HSL:207deg, 100%, 5%
acc-n3
HEX:
#001a2f
RGB:0, 26, 47
HSL:207deg, 100%, 9%
acc-n2
HEX:
#00294a
RGB:0, 41, 74
HSL:207deg, 100%, 15%
acc-n1
HEX:
#003764
RGB:0, 55, 100
HSL:207deg, 100%, 20%
acc
HEX:
#004176
RGB:0, 65, 118
HSL:207deg, 100%, 23%
acc-1
HEX:
#0061b1
RGB:0, 97, 177
HSL:207deg, 100%, 35%
acc-2
HEX:
#0890ff
RGB:8, 144, 255
HSL:207deg, 100%, 52%
acc-3
HEX:
#62b9ff
RGB:98, 185, 255
HSL:207deg, 100%, 69%
acc-4
HEX:
#a9d8ff
RGB:169, 216, 255
HSL:207deg, 100%, 83%
acc-5
HEX:
#d8edff
RGB:216, 237, 255
HSL:207deg, 100%, 92%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #004176;"
>
<div class="p_3 bg_acc-n5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >acc-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"
>#00070c</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, 7, 12</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"
>207deg, 100%, 2%</span
>
</div>
</div>
</div>
<div class="p_3 bg_acc-n4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >acc-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"
>#000e1a</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, 14, 26</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"
>207deg, 100%, 5%</span
>
</div>
</div>
</div>
<div class="p_3 bg_acc-n3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >acc-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"
>#001a2f</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, 26, 47</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"
>207deg, 100%, 9%</span
>
</div>
</div>
</div>
<div class="p_3 bg_acc-n2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >acc-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"
>#00294a</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, 41, 74</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"
>207deg, 100%, 15%</span
>
</div>
</div>
</div>
<div class="p_3 bg_acc-n1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >acc-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"
>#003764</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, 55, 100</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"
>207deg, 100%, 20%</span
>
</div>
</div>
</div>
<div class="p_3 bg_acc p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >acc</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"
>#004176</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, 65, 118</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"
>207deg, 100%, 23%</span
>
</div>
</div>
</div>
<div class="p_3 bg_acc-1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >acc-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"
>#0061b1</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, 97, 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"
>207deg, 100%, 35%</span
>
</div>
</div>
</div>
<div class="p_3 bg_acc-2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >acc-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"
>#0890ff</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"
>8, 144, 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"
>207deg, 100%, 52%</span
>
</div>
</div>
</div>
<div class="p_3 bg_acc-3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >acc-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"
>#62b9ff</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"
>98, 185, 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"
>207deg, 100%, 69%</span
>
</div>
</div>
</div>
<div class="p_3 bg_acc-4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >acc-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"
>#a9d8ff</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"
>169, 216, 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"
>207deg, 100%, 83%</span
>
</div>
</div>
</div>
<div class="p_3 bg_acc-5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >acc-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"
>#d8edff</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"
>216, 237, 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"
>207deg, 100%, 92%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 13243
1.2.2 accent: Color Variations
The Modified versions of the accent color from this theme
Example
accent-n5
HEX:
#170b01
RGB:23, 11, 1
HSL:29deg, 92%, 5%
accent-n4
HEX:
#321902
RGB:50, 25, 2
HSL:29deg, 92%, 10%
accent-n3
HEX:
#5a2d04
RGB:90, 45, 4
HSL:29deg, 92%, 18%
accent-n2
HEX:
#8e4706
RGB:142, 71, 6
HSL:29deg, 92%, 29%
accent-n1
HEX:
#bf5f08
RGB:191, 95, 8
HSL:29deg, 92%, 39%
accent
HEX:
#e17009
RGB:225, 112, 9
HSL:29deg, 92%, 46%
accent-1
HEX:
#f6851d
RGB:246, 133, 29
HSL:29deg, 92%, 54%
accent-2
HEX:
#f8a458
RGB:248, 164, 88
HSL:29deg, 92%, 66%
accent-3
HEX:
#fbc595
RGB:251, 197, 149
HSL:29deg, 92%, 78%
accent-4
HEX:
#fddfc5
RGB:253, 223, 197
HSL:29deg, 92%, 88%
accent-5
HEX:
#fef1e4
RGB:254, 241, 228
HSL:29deg, 92%, 95%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #e17009;"
>
<div class="p_3 bg_accent-n5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >accent-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"
>#170b01</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"
>23, 11, 1</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"
>29deg, 92%, 5%</span
>
</div>
</div>
</div>
<div class="p_3 bg_accent-n4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >accent-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"
>#321902</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"
>50, 25, 2</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"
>29deg, 92%, 10%</span
>
</div>
</div>
</div>
<div class="p_3 bg_accent-n3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >accent-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"
>#5a2d04</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"
>90, 45, 4</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"
>29deg, 92%, 18%</span
>
</div>
</div>
</div>
<div class="p_3 bg_accent-n2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >accent-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"
>#8e4706</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"
>142, 71, 6</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"
>29deg, 92%, 29%</span
>
</div>
</div>
</div>
<div class="p_3 bg_accent-n1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >accent-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"
>#bf5f08</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"
>191, 95, 8</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"
>29deg, 92%, 39%</span
>
</div>
</div>
</div>
<div class="p_3 bg_accent p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >accent</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"
>#e17009</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"
>225, 112, 9</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"
>29deg, 92%, 46%</span
>
</div>
</div>
</div>
<div class="p_3 bg_accent-1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >accent-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"
>#f6851d</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, 133, 29</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"
>29deg, 92%, 54%</span
>
</div>
</div>
</div>
<div class="p_3 bg_accent-2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >accent-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"
>#f8a458</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"
>248, 164, 88</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"
>29deg, 92%, 66%</span
>
</div>
</div>
</div>
<div class="p_3 bg_accent-3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >accent-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"
>#fbc595</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"
>251, 197, 149</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"
>29deg, 92%, 78%</span
>
</div>
</div>
</div>
<div class="p_3 bg_accent-4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >accent-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"
>#fddfc5</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"
>253, 223, 197</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"
>29deg, 92%, 88%</span
>
</div>
</div>
</div>
<div class="p_3 bg_accent-5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >accent-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"
>#fef1e4</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"
>254, 241, 228</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"
>29deg, 92%, 95%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 12603
1.2.3 alert: Color Variations
The Modified versions of the alert color from this theme
Example
alert-n5
HEX:
#0f0606
RGB:15, 6, 6
HSL:1deg, 45%, 4%
alert-n4
HEX:
#210d0d
RGB:33, 13, 13
HSL:1deg, 45%, 9%
alert-n3
HEX:
#3c1817
RGB:60, 24, 23
HSL:1deg, 45%, 16%
alert-n2
HEX:
#5e2524
RGB:94, 37, 36
HSL:1deg, 45%, 25%
alert-n1
HEX:
#7f3230
RGB:127, 50, 48
HSL:1deg, 45%, 34%
alert
HEX:
#953b39
RGB:149, 59, 57
HSL:1deg, 45%, 40%
alert-1
HEX:
#b64846
RGB:182, 72, 70
HSL:1deg, 45%, 49%
alert-2
HEX:
#ca7674
RGB:202, 118, 116
HSL:1deg, 45%, 62%
alert-3
HEX:
#dda8a7
RGB:221, 168, 167
HSL:1deg, 45%, 76%
alert-4
HEX:
#eccfcf
RGB:236, 207, 207
HSL:1deg, 45%, 87%
alert-5
HEX:
#f7e9e9
RGB:247, 233, 233
HSL:1deg, 45%, 94%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #953b39;"
>
<div class="p_3 bg_alert-n5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >alert-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"
>#0f0606</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"
>15, 6, 6</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"
>1deg, 45%, 4%</span
>
</div>
</div>
</div>
<div class="p_3 bg_alert-n4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >alert-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"
>#210d0d</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"
>33, 13, 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"
>1deg, 45%, 9%</span
>
</div>
</div>
</div>
<div class="p_3 bg_alert-n3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >alert-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"
>#3c1817</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"
>60, 24, 23</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"
>1deg, 45%, 16%</span
>
</div>
</div>
</div>
<div class="p_3 bg_alert-n2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >alert-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"
>#5e2524</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"
>94, 37, 36</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"
>1deg, 45%, 25%</span
>
</div>
</div>
</div>
<div class="p_3 bg_alert-n1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >alert-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"
>#7f3230</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"
>127, 50, 48</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"
>1deg, 45%, 34%</span
>
</div>
</div>
</div>
<div class="p_3 bg_alert p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >alert</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"
>#953b39</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"
>149, 59, 57</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"
>1deg, 45%, 40%</span
>
</div>
</div>
</div>
<div class="p_3 bg_alert-1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >alert-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"
>#b64846</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, 72, 70</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"
>1deg, 45%, 49%</span
>
</div>
</div>
</div>
<div class="p_3 bg_alert-2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >alert-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"
>#ca7674</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"
>202, 118, 116</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"
>1deg, 45%, 62%</span
>
</div>
</div>
</div>
<div class="p_3 bg_alert-3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >alert-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"
>#dda8a7</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"
>221, 168, 167</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"
>1deg, 45%, 76%</span
>
</div>
</div>
</div>
<div class="p_3 bg_alert-4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >alert-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"
>#eccfcf</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"
>236, 207, 207</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"
>1deg, 45%, 87%</span
>
</div>
</div>
</div>
<div class="p_3 bg_alert-5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >alert-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"
>#f7e9e9</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"
>247, 233, 233</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"
>1deg, 45%, 94%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 13883
1.2.4 highlight: Color Variations
The Modified versions of the highlight color from this theme
Example
highlight-n5
HEX:
#1f1702
RGB:31, 23, 2
HSL:44deg, 89%, 6%
highlight-n4
HEX:
#433304
RGB:67, 51, 4
HSL:44deg, 89%, 14%
highlight-n3
HEX:
#7b5d07
RGB:123, 93, 7
HSL:44deg, 89%, 25%
highlight-n2
HEX:
#c1920b
RGB:193, 146, 11
HSL:44deg, 89%, 40%
highlight-n1
HEX:
#f2bc21
RGB:242, 188, 33
HSL:44deg, 89%, 54%
highlight
HEX:
#f5ca4f
RGB:245, 202, 79
HSL:44deg, 89%, 64%
highlight-1
HEX:
#f7d269
RGB:247, 210, 105
HSL:44deg, 89%, 69%
highlight-2
HEX:
#f9de90
RGB:249, 222, 144
HSL:44deg, 89%, 77%
highlight-3
HEX:
#fbeab9
RGB:251, 234, 185
HSL:44deg, 89%, 85%
highlight-4
HEX:
#fdf3d8
RGB:253, 243, 216
HSL:44deg, 89%, 92%
highlight-5
HEX:
#fefaed
RGB:254, 250, 237
HSL:44deg, 89%, 96%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #f5ca4f;"
>
<div class="p_3 bg_highlight-n5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >highlight-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"
>#1f1702</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"
>31, 23, 2</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"
>44deg, 89%, 6%</span
>
</div>
</div>
</div>
<div class="p_3 bg_highlight-n4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >highlight-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"
>#433304</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, 51, 4</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"
>44deg, 89%, 14%</span
>
</div>
</div>
</div>
<div class="p_3 bg_highlight-n3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >highlight-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"
>#7b5d07</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"
>123, 93, 7</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"
>44deg, 89%, 25%</span
>
</div>
</div>
</div>
<div class="p_3 bg_highlight-n2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >highlight-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"
>#c1920b</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"
>193, 146, 11</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"
>44deg, 89%, 40%</span
>
</div>
</div>
</div>
<div class="p_3 bg_highlight-n1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >highlight-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"
>#f2bc21</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"
>242, 188, 33</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"
>44deg, 89%, 54%</span
>
</div>
</div>
</div>
<div class="p_3 bg_highlight p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >highlight</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"
>#f5ca4f</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"
>245, 202, 79</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"
>44deg, 89%, 64%</span
>
</div>
</div>
</div>
<div class="p_3 bg_highlight-1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >highlight-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"
>#f7d269</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"
>247, 210, 105</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"
>44deg, 89%, 69%</span
>
</div>
</div>
</div>
<div class="p_3 bg_highlight-2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >highlight-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"
>#f9de90</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"
>249, 222, 144</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"
>44deg, 89%, 77%</span
>
</div>
</div>
</div>
<div class="p_3 bg_highlight-3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >highlight-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"
>#fbeab9</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"
>251, 234, 185</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"
>44deg, 89%, 85%</span
>
</div>
</div>
</div>
<div class="p_3 bg_highlight-4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >highlight-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"
>#fdf3d8</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"
>253, 243, 216</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"
>44deg, 89%, 92%</span
>
</div>
</div>
</div>
<div class="p_3 bg_highlight-5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >highlight-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"
>#fefaed</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"
>254, 250, 237</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"
>44deg, 89%, 96%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 13563
1.2.5 info: Color Variations
The Modified versions of the info color from this theme
Example
info-n5
HEX:
#110f0d
RGB:17, 15, 13
HSL:31deg, 11%, 6%
info-n4
HEX:
#25211e
RGB:37, 33, 30
HSL:31deg, 11%, 13%
info-n3
HEX:
#433d36
RGB:67, 61, 54
HSL:31deg, 11%, 24%
info-n2
HEX:
#6a6055
RGB:106, 96, 85
HSL:31deg, 11%, 37%
info-n1
HEX:
#8f8173
RGB:143, 129, 115
HSL:31deg, 11%, 51%
info
HEX:
#a3988c
RGB:163, 152, 140
HSL:31deg, 11%, 59%
info-1
HEX:
#b1a79d
RGB:177, 167, 157
HSL:31deg, 11%, 66%
info-2
HEX:
#c5beb7
RGB:197, 190, 183
HSL:31deg, 11%, 74%
info-3
HEX:
#dad6d1
RGB:218, 214, 209
HSL:31deg, 11%, 84%
info-4
HEX:
#ebe8e6
RGB:235, 232, 230
HSL:31deg, 11%, 91%
info-5
HEX:
#f6f5f4
RGB:246, 245, 244
HSL:31deg, 11%, 96%
<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>Code Sample
Source: dist/css/cardiosmart_boot.css, line 11003
1.2.7 primary: Color Variations
The Modified versions of the primary color from this theme
Example
primary-n5
HEX:
#00090f
RGB:0, 9, 15
HSL:206deg, 99%, 3%
primary-n4
HEX:
#001321
RGB:0, 19, 33
HSL:206deg, 99%, 7%
primary-n3
HEX:
#00223c
RGB:0, 34, 60
HSL:206deg, 99%, 12%
primary-n2
HEX:
#01365f
RGB:1, 54, 95
HSL:206deg, 99%, 19%
primary-n1
HEX:
#014980
RGB:1, 73, 128
HSL:206deg, 99%, 25%
primary
HEX:
#015697
RGB:1, 86, 151
HSL:206deg, 99%, 30%
primary-1
HEX:
#0174cc
RGB:1, 116, 204
HSL:206deg, 99%, 40%
primary-2
HEX:
#1f9dfe
RGB:31, 157, 254
HSL:206deg, 99%, 56%
primary-3
HEX:
#71c1fe
RGB:113, 193, 254
HSL:206deg, 99%, 72%
primary-4
HEX:
#b1ddfe
RGB:177, 221, 254
HSL:206deg, 99%, 85%
primary-5
HEX:
#dbefff
RGB:219, 239, 255
HSL:206deg, 99%, 93%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #015697;"
>
<div class="p_3 bg_primary-n5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >primary-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"
>#00090f</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, 9, 15</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"
>206deg, 99%, 3%</span
>
</div>
</div>
</div>
<div class="p_3 bg_primary-n4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >primary-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"
>#001321</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, 19, 33</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"
>206deg, 99%, 7%</span
>
</div>
</div>
</div>
<div class="p_3 bg_primary-n3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >primary-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"
>#00223c</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, 34, 60</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"
>206deg, 99%, 12%</span
>
</div>
</div>
</div>
<div class="p_3 bg_primary-n2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >primary-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"
>#01365f</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"
>1, 54, 95</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"
>206deg, 99%, 19%</span
>
</div>
</div>
</div>
<div class="p_3 bg_primary-n1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >primary-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"
>#014980</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"
>1, 73, 128</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"
>206deg, 99%, 25%</span
>
</div>
</div>
</div>
<div class="p_3 bg_primary p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >primary</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"
>#015697</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"
>1, 86, 151</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"
>206deg, 99%, 30%</span
>
</div>
</div>
</div>
<div class="p_3 bg_primary-1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >primary-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"
>#0174cc</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"
>1, 116, 204</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"
>206deg, 99%, 40%</span
>
</div>
</div>
</div>
<div class="p_3 bg_primary-2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >primary-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"
>#1f9dfe</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"
>31, 157, 254</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"
>206deg, 99%, 56%</span
>
</div>
</div>
</div>
<div class="p_3 bg_primary-3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >primary-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"
>#71c1fe</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, 193, 254</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"
>206deg, 99%, 72%</span
>
</div>
</div>
</div>
<div class="p_3 bg_primary-4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >primary-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"
>#b1ddfe</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, 221, 254</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"
>206deg, 99%, 85%</span
>
</div>
</div>
</div>
<div class="p_3 bg_primary-5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >primary-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"
>#dbefff</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"
>219, 239, 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"
>206deg, 99%, 93%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 11323
1.2.8 secondary: Color Variations
The Modified versions of the secondary color from this theme
Example
secondary-n5
HEX:
#001012
RGB:0, 16, 18
HSL:187deg, 100%, 3%
secondary-n4
HEX:
#002327
RGB:0, 35, 39
HSL:187deg, 100%, 8%
secondary-n3
HEX:
#003f47
RGB:0, 63, 71
HSL:187deg, 100%, 14%
secondary-n2
HEX:
#006370
RGB:0, 99, 112
HSL:187deg, 100%, 22%
secondary-n1
HEX:
#008596
RGB:0, 133, 150
HSL:187deg, 100%, 30%
secondary
HEX:
#009db1
RGB:0, 157, 177
HSL:187deg, 100%, 35%
secondary-1
HEX:
#00c9e3
RGB:0, 201, 227
HSL:187deg, 100%, 45%
secondary-2
HEX:
#2de7ff
RGB:45, 231, 255
HSL:187deg, 100%, 59%
secondary-3
HEX:
#7af0ff
RGB:122, 240, 255
HSL:187deg, 100%, 74%
secondary-4
HEX:
#b6f7ff
RGB:182, 247, 255
HSL:187deg, 100%, 86%
secondary-5
HEX:
#defbff
RGB:222, 251, 255
HSL:187deg, 100%, 93%
<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>Code Sample
Source: dist/css/cardiosmart_boot.css, line 11963
1.2.9 shade: Color Variations
The Modified versions of the shade color from this theme
Example
shade-n5
HEX:
#0e0e0e
RGB:14, 14, 14
HSL:0deg, 0%, 5%
shade-n4
HEX:
#1e1e1e
RGB:30, 30, 30
HSL:0deg, 0%, 12%
shade-n3
HEX:
#373737
RGB:55, 55, 55
HSL:0deg, 0%, 21%
shade-n2
HEX:
#565656
RGB:86, 86, 86
HSL:0deg, 0%, 34%
shade-n1
HEX:
#747474
RGB:116, 116, 116
HSL:0deg, 0%, 46%
shade
HEX:
#898989
RGB:137, 137, 137
HSL:0deg, 0%, 54%
shade-1
HEX:
#9b9b9b
RGB:155, 155, 155
HSL:0deg, 0%, 61%
shade-2
HEX:
#b5b5b5
RGB:181, 181, 181
HSL:0deg, 0%, 71%
shade-3
HEX:
#d0d0d0
RGB:208, 208, 208
HSL:0deg, 0%, 81%
shade-4
HEX:
#e5e5e5
RGB:229, 229, 229
HSL:0deg, 0%, 90%
shade-5
HEX:
#f3f3f3
RGB:243, 243, 243
HSL:0deg, 0%, 95%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #898989;"
>
<div class="p_3 bg_shade-n5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >shade-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"
>#0e0e0e</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"
>14, 14, 14</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"
>0deg, 0%, 5%</span
>
</div>
</div>
</div>
<div class="p_3 bg_shade-n4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >shade-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"
>#1e1e1e</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"
>30, 30, 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"
>0deg, 0%, 12%</span
>
</div>
</div>
</div>
<div class="p_3 bg_shade-n3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >shade-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"
>#373737</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"
>55, 55, 55</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"
>0deg, 0%, 21%</span
>
</div>
</div>
</div>
<div class="p_3 bg_shade-n2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >shade-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"
>#565656</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"
>86, 86, 86</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"
>0deg, 0%, 34%</span
>
</div>
</div>
</div>
<div class="p_3 bg_shade-n1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >shade-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"
>#747474</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"
>116, 116, 116</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"
>0deg, 0%, 46%</span
>
</div>
</div>
</div>
<div class="p_3 bg_shade p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >shade</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"
>#898989</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"
>137, 137, 137</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"
>0deg, 0%, 54%</span
>
</div>
</div>
</div>
<div class="p_3 bg_shade-1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >shade-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"
>#9b9b9b</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"
>155, 155, 155</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"
>0deg, 0%, 61%</span
>
</div>
</div>
</div>
<div class="p_3 bg_shade-2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >shade-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"
>#b5b5b5</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"
>181, 181, 181</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"
>0deg, 0%, 71%</span
>
</div>
</div>
</div>
<div class="p_3 bg_shade-3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >shade-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"
>#d0d0d0</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"
>208, 208, 208</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"
>0deg, 0%, 81%</span
>
</div>
</div>
</div>
<div class="p_3 bg_shade-4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >shade-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"
>#e5e5e5</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"
>229, 229, 229</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"
>0deg, 0%, 90%</span
>
</div>
</div>
</div>
<div class="p_3 bg_shade-5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >shade-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"
>#f3f3f3</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"
>243, 243, 243</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"
>0deg, 0%, 95%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 11643
1.2.10 success: Color Variations
The Modified versions of the success color from this theme
Example
success-n5
HEX:
#070e07
RGB:7, 14, 7
HSL:121deg, 32%, 4%
success-n4
HEX:
#0f1e10
RGB:15, 30, 16
HSL:121deg, 32%, 9%
success-n3
HEX:
#1c361c
RGB:28, 54, 28
HSL:121deg, 32%, 16%
success-n2
HEX:
#2c562d
RGB:44, 86, 45
HSL:121deg, 32%, 25%
success-n1
HEX:
#3c743c
RGB:60, 116, 60
HSL:121deg, 32%, 34%
success
HEX:
#468847
RGB:70, 136, 71
HSL:121deg, 32%, 40%
success-1
HEX:
#55a657
RGB:85, 166, 87
HSL:121deg, 32%, 49%
success-2
HEX:
#81be81
RGB:129, 190, 129
HSL:121deg, 32%, 62%
success-3
HEX:
#afd6af
RGB:175, 214, 175
HSL:121deg, 32%, 76%
success-4
HEX:
#d3e8d3
RGB:211, 232, 211
HSL:121deg, 32%, 87%
success-5
HEX:
#ebf5eb
RGB:235, 245, 235
HSL:121deg, 32%, 94%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #468847;"
>
<div class="p_3 bg_success-n5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >success-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"
>#070e07</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"
>7, 14, 7</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"
>121deg, 32%, 4%</span
>
</div>
</div>
</div>
<div class="p_3 bg_success-n4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >success-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"
>#0f1e10</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"
>15, 30, 16</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"
>121deg, 32%, 9%</span
>
</div>
</div>
</div>
<div class="p_3 bg_success-n3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >success-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"
>#1c361c</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"
>28, 54, 28</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"
>121deg, 32%, 16%</span
>
</div>
</div>
</div>
<div class="p_3 bg_success-n2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >success-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"
>#2c562d</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"
>44, 86, 45</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"
>121deg, 32%, 25%</span
>
</div>
</div>
</div>
<div class="p_3 bg_success-n1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >success-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"
>#3c743c</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"
>60, 116, 60</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"
>121deg, 32%, 34%</span
>
</div>
</div>
</div>
<div class="p_3 bg_success p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >success</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"
>#468847</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"
>70, 136, 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"
>121deg, 32%, 40%</span
>
</div>
</div>
</div>
<div class="p_3 bg_success-1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >success-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"
>#55a657</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"
>85, 166, 87</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"
>121deg, 32%, 49%</span
>
</div>
</div>
</div>
<div class="p_3 bg_success-2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >success-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"
>#81be81</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"
>129, 190, 129</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"
>121deg, 32%, 62%</span
>
</div>
</div>
</div>
<div class="p_3 bg_success-3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >success-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"
>#afd6af</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"
>175, 214, 175</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"
>121deg, 32%, 76%</span
>
</div>
</div>
</div>
<div class="p_3 bg_success-4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >success-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"
>#d3e8d3</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"
>211, 232, 211</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"
>121deg, 32%, 87%</span
>
</div>
</div>
</div>
<div class="p_3 bg_success-5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >success-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"
>#ebf5eb</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, 245, 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"
>121deg, 32%, 94%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 12283
1.2.11 warning: Color Variations
The Modified versions of the warning color from this theme
Example
warning-n5
HEX:
#140c01
RGB:20, 12, 1
HSL:35deg, 95%, 4%
warning-n4
HEX:
#2c1a01
RGB:44, 26, 1
HSL:35deg, 95%, 9%
warning-n3
HEX:
#4f2f02
RGB:79, 47, 2
HSL:35deg, 95%, 16%
warning-n2
HEX:
#7d4a03
RGB:125, 74, 3
HSL:35deg, 95%, 25%
warning-n1
HEX:
#a86404
RGB:168, 100, 4
HSL:35deg, 95%, 34%
warning
HEX:
#c67605
RGB:198, 118, 5
HSL:35deg, 95%, 40%
warning-1
HEX:
#f39106
RGB:243, 145, 6
HSL:35deg, 95%, 49%
warning-2
HEX:
#faae42
RGB:250, 174, 66
HSL:35deg, 95%, 62%
warning-3
HEX:
#fccc87
RGB:252, 204, 135
HSL:35deg, 95%, 76%
warning-4
HEX:
#fde3bd
RGB:253, 227, 189
HSL:35deg, 95%, 87%
warning-5
HEX:
#fef2e1
RGB:254, 242, 225
HSL:35deg, 95%, 94%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #c67605;"
>
<div class="p_3 bg_warning-n5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >warning-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"
>#140c01</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"
>20, 12, 1</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"
>35deg, 95%, 4%</span
>
</div>
</div>
</div>
<div class="p_3 bg_warning-n4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >warning-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"
>#2c1a01</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"
>44, 26, 1</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"
>35deg, 95%, 9%</span
>
</div>
</div>
</div>
<div class="p_3 bg_warning-n3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >warning-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"
>#4f2f02</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"
>79, 47, 2</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"
>35deg, 95%, 16%</span
>
</div>
</div>
</div>
<div class="p_3 bg_warning-n2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >warning-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"
>#7d4a03</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"
>125, 74, 3</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"
>35deg, 95%, 25%</span
>
</div>
</div>
</div>
<div class="p_3 bg_warning-n1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >warning-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"
>#a86404</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"
>168, 100, 4</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"
>35deg, 95%, 34%</span
>
</div>
</div>
</div>
<div class="p_3 bg_warning p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >warning</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"
>#c67605</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"
>198, 118, 5</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"
>35deg, 95%, 40%</span
>
</div>
</div>
</div>
<div class="p_3 bg_warning-1 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >warning-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"
>#f39106</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"
>243, 145, 6</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"
>35deg, 95%, 49%</span
>
</div>
</div>
</div>
<div class="p_3 bg_warning-2 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >warning-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"
>#faae42</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"
>250, 174, 66</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"
>35deg, 95%, 62%</span
>
</div>
</div>
</div>
<div class="p_3 bg_warning-3 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >warning-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"
>#fccc87</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"
>252, 204, 135</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"
>35deg, 95%, 76%</span
>
</div>
</div>
</div>
<div class="p_3 bg_warning-4 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >warning-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"
>#fde3bd</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"
>253, 227, 189</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"
>35deg, 95%, 87%</span
>
</div>
</div>
</div>
<div class="p_3 bg_warning-5 p-t_5">
<div class="p_3 bg_white-7 c_black m-t_4">
<div class="font-size_down font_bold" >warning-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"
>#fef2e1</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"
>254, 242, 225</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"
>35deg, 95%, 94%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 10659
1.3 Fonts
The ACC is focused on stable, conservative, clean fonts. Roboto Slab is the standard serif fonts across all products at the ACC. Muli is the current successor to Open Sans, and Maven is a slightly modern font to give a small level of interests which replaces Raleway, or Lato in other products.
Source: dist/css/cardiosmart_boot.css, line 10667
1.3.1 Accent Roboto Slab
A beuatiful Accent font that shows a complexity and texture to the fonts used in the design.
Roboto Slab font-family: "Roboto Slab","Times New Roman","Lucida Bright",Georgia,serif, "slab"
RS
Accent Font
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Source: dist/css/cardiosmart_boot.css, line 10696
1.3.2 Display: Maven Pro
A Slick font that has a slight interest used for headers and UI.
Maven Pro font-family: "Maven Pro","Muli","Open Sans","system",sans-serif
MP
Display Font
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Source: dist/css/cardiosmart_boot.css, line 10725
1.3.3 Copy: Open Sans
A clean font for content and text of none UI elements.
"Open Sans" font-family: ""Open Sans",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif"
OS
Content Font
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Source: dist/css/cardiosmart_boot.css, line 10754
1.3.4 UI: Open Sans
A clean font for content and text of none UI elements.
"Open Sans" font-family: ""Open Sans",-apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif"
OS
Content Font
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
a b c d e f g h i j k l m n o p q r s t u v w x y z
a b c d e f g h i j k l m n o p q r s t u v w x y z
0 1 2 3 4 5 6 7 8 9
Source: dist/css/cardiosmart_boot.css, line 10783
1.4 Icons: Font Awesome
Below are just a few of the icons available from Font Awesome Pro.
Example s
Default styling
[modifier class]
plus
fa-plus
plus
arrow-right
fa-arrow-right
arrow-right
search
fa-search
search
envelope
fa-envelope
envelope
heart
fa-heart
heart
star
fa-star
star
user
fa-user
user
<div class="relative br_shade-4 br_solid br_1"><div class="flex"><div class="font_5 cell w-grid_3 text_center p_3 no-underline c_inherit flex_shrink justify_center h:bg_navigation-n3 h:c_white bg_shade-5 expanded-click-area"><i class="fas fa-[modifier class]"></i></div><div class="flex_auto p_4 p-y_2 self_center"><span class="c_shade h:c_shade-n2 text font_bold font_display">[modifier class]</span></div></div></div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 9899
1.5 Logos
Logos in the design come in 4 variations the primary logo, the condensed logo, and alte version which are the reverse of primary and reversed. All logos are controled by the width and will maintain there aspect ratios to respond to the container they are in. For 508 compliance please place the brand name in the logo.
Example s
Default styling
[modifier class]
.logo_primary
Primary Logo great for desktop displays best used for when the logo can be taller then 80px.
logo_primary
.logo_primary-alt
Primary Logo reversed for dark background situations.
logo_primary-alt
.logo_condensed.max-w_15
Smaller Mobile Friendly Logo these logos and be readable between 40px to 80px in height.
logo_condensed max-w_15
.logo_primary-alt.max-w_15
Smaller Logo Reversed.
logo_primary-alt max-w_15
<div class="[modifier class]" data-style="[modifier class]" >
<span class="alt">[modifier class]</span>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 9988
1.6 Seals
Seals in the design come in 3 variations the default, small, and tiny. All Seals will maintain their aspect ratios and will respond to the container, but seals have a max width. For 508 compliance, please place the brand name in the seal.
Example s
Default styling
[modifier class]
.seal_normal
Full size seal great for desktop displays best used for when the seal can be taller then 100px.
seal_normal
.seal_small
Condensed size seal great for Tablet displays best used for when the seal is between 100px to 40px.
seal_small
.seal_tiny
Smallest of the seals best used for icons when seal is 40px and bellow
seal_tiny
<div class="[modifier class] m_auto" data-style="[modifier class]">
<span class="alt-text">[modifier class]</span>
</div>Code Sample
Source: dist/css/cardiosmart_boot.css, line 10985
1.7 Textures
All textures in the Arches design are a subtle variation of transparent. Allowing for colors to bleed through from behind. Different textures have intentions or are reserved for certain usagaes.
Example s
Default styling
[modifier class] with a light primary color background
.texture_light
Light textures is reserved for the base of a page where it can gve a soft area for text or cards to live on top of.
texture_light with a light primary color background
.texture_medium
medium texture are used for area that are hidden away. Collapsable navs, areas, or sidebars ususaly use the medium texture.
texture_medium with a light primary color background
.texture_dust
Dust is the most transparent texture allowing for the color of the background to show through the most. This is used for the painted tops of cards, or score bars.
texture_dust with a light primary color background
.texture_dark
This texture predominatly used on the footer. Its rich black will alway requrie reversed text and buttons to be readable.
texture_dark with a light primary color background
.texture_cross
A mostly transparent cross texture used for alternating rows of content when a little extra texture is needed.
texture_cross with a light primary color background
.texture_disabled
This texture is used to paint disabled buttons and ui items giving it a greyed and X'ed out appearand.
texture_disabled with a light primary color background
<div class="[modifier class] p_5 border-c_black-8 border-width_1 border_solid text_center bg_primary-4">[modifier class] with a light primary color background</div>