Source: dist/css/cvquality_boot.css, line 9542
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/cvquality_boot.css, line 114
1.1 Background Colors Alt
These Alternate colors are single use to embelish a design. These colors DO NOT have extra modifiers.
Example s
Default styling
Background Color of [modifier class]
.bg_primary-alt
Primary Alt
Background Color of bg_primary-alt
.bg_mix-teal-orange
Mix of 60% Teal And 40% Orange
Background Color of bg_mix-teal-orange
.bg_mix-orange-teal
Mix of 60% Orange and 40% Teal
Background Color of bg_mix-orange-teal
<div class="[modifier class] p_3 c_white">Background Color of [modifier class]</div>Code Sample
Source: dist/css/cvquality_boot.css, line 129
1.2 Border Colors Alt
These Alternate colors are single use to embelish a design. These colors DO NOT have extra modifiers.
Example s
Default styling
Border Color of [modifier class]
.br_primary-alt
light orange
Border Color of br_primary-alt
.br_mix-teal-orange
Mix of 60% Teal And 40% Orange
Border Color of br_mix-teal-orange
.br_mix-orange-teal
Mix of 60% Orange and 40% Teal
Border Color of br_mix-orange-teal
<div class="[modifier class] br_solid br_4">Border Color of [modifier class]</div>Code Sample
Source: dist/css/cvquality_boot.css, line 9706
1.3 Theme Colors
Colors are based off of the ACC Scrub Colors.
-
#0088aa; primary
map-get($theme-palette, primary) -
#e87d1e; secondary
map-get($theme-palette, secondary) -
#8a817f; shade
map-get($theme-palette, shade) -
#ffc425; accent
map-get($theme-palette, accent) -
#a3988c; info
map-get($theme-palette, info) -
#05aee5; highlight
map-get($theme-palette, highlight)
Source: dist/css/cvquality_boot.css, line 9698
1.3.1 ACC's Blue
-
#004176; acc
$acc-blue
Source: dist/css/cvquality_boot.css, line 9723
1.3.2 Action Colors
Actionable colors used to respond to user inputs and messaging.
-
#990000; alert
map-get($theme-palette, alert) -
#f4a122; warning
map-get($theme-palette, warning) -
#078a2e; success
map-get($theme-palette, success) -
#2b58c0; navigation
map-get($theme-palette, navigation)
Source: dist/css/cvquality_boot.css, line 9736
1.3.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/cvquality_boot.css, line 9805
1.3.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/cvquality_boot.css, line 9778
1.3.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/cvquality_boot.css, line 9745
1.3.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/cvquality_boot.css, line 9762
1.3.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/cvquality_boot.css, line 9858
1.3.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/cvquality_boot.css, line 9832
1.3.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/cvquality_boot.css, line 145
1.3.4 CVQuality Full Pallete
Credit Types in the ACC have a specific color coding.
-
#e87d1e; Orange Dark
$orange-dark -
#ffc425; Orange Light
$orange-light -
#a1a0a4; Warm Grey
$warm-grey -
#d6d4d4; Warm Grey Light
$warm-grey-light -
#6f6b6f; Warm Grey Dark
$warm-grey-dark -
#fafafa; Off White
$off-white -
#131212; Off Black
$off-black -
#a4cded; Soft Blue
$soft-blue -
#eceaea; Soft Grey
$soft-grey -
#990000; Error Color
$error-color -
#0088aa; Scrub Teal
$scrub-teal -
#05aee5; Scrub Teal Light
$scrub-teal-light -
#047294; Scrub Teal Dark
$scrub-teal-dark -
#58B5A5; Mix of 60% Teal And 40% Orange
$mix-teal_orange -
#ACBD65; Mix of 60% Orange and 40% Teal
$mix-orange_teal
Source: dist/css/cvquality_boot.css, line 13415
1.4 Crayon Box
This is all of the colors of the theme broken out with its modifications written in hex code.
Source: dist/css/cvquality_boot.css, line 13095
1.4.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/cvquality_boot.css, line 12135
1.4.2 accent: Color Variations
The Modified versions of the accent color from this theme
Example
accent-n5
HEX:
#1d1500
RGB:29, 21, 0
HSL:44deg, 100%, 6%
accent-n4
HEX:
#402f00
RGB:64, 47, 0
HSL:44deg, 100%, 13%
accent-n3
HEX:
#755500
RGB:117, 85, 0
HSL:44deg, 100%, 23%
accent-n2
HEX:
#b88600
RGB:184, 134, 0
HSL:44deg, 100%, 36%
accent-n1
HEX:
#f8b500
RGB:248, 181, 0
HSL:44deg, 100%, 49%
accent
HEX:
#ffc425
RGB:255, 196, 37
HSL:44deg, 100%, 57%
accent-1
HEX:
#ffcd46
RGB:255, 205, 70
HSL:44deg, 100%, 64%
accent-2
HEX:
#ffda76
RGB:255, 218, 118
HSL:44deg, 100%, 73%
accent-3
HEX:
#ffe7a8
RGB:255, 231, 168
HSL:44deg, 100%, 83%
accent-4
HEX:
#fff2cf
RGB:255, 242, 207
HSL:44deg, 100%, 91%
accent-5
HEX:
#fff9e9
RGB:255, 249, 233
HSL:44deg, 100%, 96%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #ffc425;"
>
<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"
>#1d1500</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"
>29, 21, 0</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, 100%, 6%</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"
>#402f00</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>64, 47, 0</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, 100%, 13%</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"
>#755500</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"
>117, 85, 0</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, 100%, 23%</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"
>#b88600</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"
>184, 134, 0</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, 100%, 36%</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"
>#f8b500</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, 181, 0</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, 100%, 49%</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"
>#ffc425</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"
>255, 196, 37</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, 100%, 57%</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"
>#ffcd46</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"
>255, 205, 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"
>44deg, 100%, 64%</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"
>#ffda76</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"
>255, 218, 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"
>44deg, 100%, 73%</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"
>#ffe7a8</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"
>255, 231, 168</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, 100%, 83%</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"
>#fff2cf</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"
>255, 242, 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"
>44deg, 100%, 91%</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"
>#fff9e9</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"
>255, 249, 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"
>44deg, 100%, 96%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/cvquality_boot.css, line 11495
1.4.3 alert: Color Variations
The Modified versions of the alert color from this theme
Example
alert-n5
HEX:
#0f0000
RGB:15, 0, 0
HSL:0deg, 100%, 3%
alert-n4
HEX:
#220000
RGB:34, 0, 0
HSL:0deg, 100%, 7%
alert-n3
HEX:
#3d0000
RGB:61, 0, 0
HSL:0deg, 100%, 12%
alert-n2
HEX:
#600000
RGB:96, 0, 0
HSL:0deg, 100%, 19%
alert-n1
HEX:
#820000
RGB:130, 0, 0
HSL:0deg, 100%, 26%
alert
HEX:
#990000
RGB:153, 0, 0
HSL:0deg, 100%, 30%
alert-1
HEX:
#cf0000
RGB:207, 0, 0
HSL:0deg, 100%, 41%
alert-2
HEX:
#ff1e1e
RGB:255, 30, 30
HSL:0deg, 100%, 56%
alert-3
HEX:
#ff7070
RGB:255, 112, 112
HSL:0deg, 100%, 72%
alert-4
HEX:
#ffb0b0
RGB:255, 176, 176
HSL:0deg, 100%, 85%
alert-5
HEX:
#ffdbdb
RGB:255, 219, 219
HSL:0deg, 100%, 93%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #990000;"
>
<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"
>#0f0000</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, 0, 0</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, 100%, 3%</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"
>#220000</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"
>34, 0, 0</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, 100%, 7%</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"
>#3d0000</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"
>61, 0, 0</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, 100%, 12%</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"
>#600000</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"
>96, 0, 0</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, 100%, 19%</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"
>#820000</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"
>130, 0, 0</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, 100%, 26%</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"
>#990000</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"
>153, 0, 0</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, 100%, 30%</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"
>#cf0000</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"
>207, 0, 0</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, 100%, 41%</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"
>#ff1e1e</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"
>255, 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, 100%, 56%</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"
>#ff7070</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"
>255, 112, 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"
>0deg, 100%, 72%</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"
>#ffb0b0</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"
>255, 176, 176</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, 100%, 85%</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"
>#ffdbdb</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"
>255, 219, 219</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, 100%, 93%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/cvquality_boot.css, line 12775
1.4.4 highlight: Color Variations
The Modified versions of the highlight color from this theme
Example
highlight-n5
HEX:
#011117
RGB:1, 17, 23
HSL:195deg, 96%, 5%
highlight-n4
HEX:
#012632
RGB:1, 38, 50
HSL:195deg, 96%, 10%
highlight-n3
HEX:
#02465c
RGB:2, 70, 92
HSL:195deg, 96%, 18%
highlight-n2
HEX:
#036e90
RGB:3, 110, 144
HSL:195deg, 96%, 29%
highlight-n1
HEX:
#0494c3
RGB:4, 148, 195
HSL:195deg, 96%, 39%
highlight
HEX:
#05aee5
RGB:5, 174, 229
HSL:195deg, 96%, 46%
highlight-1
HEX:
#19c3fa
RGB:25, 195, 250
HSL:195deg, 96%, 54%
highlight-2
HEX:
#55d2fb
RGB:85, 210, 251
HSL:195deg, 96%, 66%
highlight-3
HEX:
#93e3fd
RGB:147, 227, 253
HSL:195deg, 96%, 78%
highlight-4
HEX:
#c4effe
RGB:196, 239, 254
HSL:195deg, 96%, 88%
highlight-5
HEX:
#e4f8fe
RGB:228, 248, 254
HSL:195deg, 96%, 95%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #05aee5;"
>
<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"
>#011117</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, 17, 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"
>195deg, 96%, 5%</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"
>#012632</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, 38, 50</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"
>195deg, 96%, 10%</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"
>#02465c</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"
>2, 70, 92</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"
>195deg, 96%, 18%</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"
>#036e90</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"
>3, 110, 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"
>195deg, 96%, 29%</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"
>#0494c3</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>4, 148, 195</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"
>195deg, 96%, 39%</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"
>#05aee5</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"
>5, 174, 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"
>195deg, 96%, 46%</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"
>#19c3fa</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"
>25, 195, 250</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>HSL:</span
><span class="user-select_all font_accent lowercase"
>195deg, 96%, 54%</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"
>#55d2fb</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, 210, 251</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"
>195deg, 96%, 66%</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"
>#93e3fd</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"
>147, 227, 253</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"
>195deg, 96%, 78%</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"
>#c4effe</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"
>196, 239, 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"
>195deg, 96%, 88%</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"
>#e4f8fe</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"
>228, 248, 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"
>195deg, 96%, 95%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/cvquality_boot.css, line 12455
1.4.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/cvquality_boot.css, line 9895
1.4.7 primary: Color Variations
The Modified versions of the primary color from this theme
Example
primary-n5
HEX:
#000e11
RGB:0, 14, 17
HSL:192deg, 100%, 3%
primary-n4
HEX:
#001e25
RGB:0, 30, 37
HSL:192deg, 100%, 7%
primary-n3
HEX:
#003644
RGB:0, 54, 68
HSL:192deg, 100%, 13%
primary-n2
HEX:
#00566b
RGB:0, 86, 107
HSL:192deg, 100%, 21%
primary-n1
HEX:
#007491
RGB:0, 116, 145
HSL:192deg, 100%, 28%
primary
HEX:
#0088aa
RGB:0, 136, 170
HSL:192deg, 100%, 33%
primary-1
HEX:
#00b1dd
RGB:0, 177, 221
HSL:192deg, 100%, 43%
primary-2
HEX:
#29d4ff
RGB:41, 212, 255
HSL:192deg, 100%, 58%
primary-3
HEX:
#77e4ff
RGB:119, 228, 255
HSL:192deg, 100%, 73%
primary-4
HEX:
#b4f0ff
RGB:180, 240, 255
HSL:192deg, 100%, 85%
primary-5
HEX:
#ddf8ff
RGB:221, 248, 255
HSL:192deg, 100%, 93%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #0088aa;"
>
<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"
>#000e11</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, 17</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"
>192deg, 100%, 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"
>#001e25</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, 30, 37</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"
>192deg, 100%, 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"
>#003644</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, 54, 68</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"
>192deg, 100%, 13%</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"
>#00566b</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, 86, 107</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"
>192deg, 100%, 21%</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"
>#007491</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, 116, 145</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"
>192deg, 100%, 28%</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"
>#0088aa</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, 136, 170</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"
>192deg, 100%, 33%</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"
>#00b1dd</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, 177, 221</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"
>192deg, 100%, 43%</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"
>#29d4ff</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"
>41, 212, 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"
>192deg, 100%, 58%</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"
>#77e4ff</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"
>119, 228, 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"
>192deg, 100%, 73%</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"
>#b4f0ff</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"
>180, 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"
>192deg, 100%, 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"
>#ddf8ff</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, 248, 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"
>192deg, 100%, 93%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/cvquality_boot.css, line 10215
1.4.8 secondary: Color Variations
The Modified versions of the secondary color from this theme
Example
secondary-n5
HEX:
#180c02
RGB:24, 12, 2
HSL:28deg, 81%, 5%
secondary-n4
HEX:
#341b05
RGB:52, 27, 5
HSL:28deg, 81%, 11%
secondary-n3
HEX:
#5f320a
RGB:95, 50, 10
HSL:28deg, 81%, 21%
secondary-n2
HEX:
#964f0f
RGB:150, 79, 15
HSL:28deg, 81%, 32%
secondary-n1
HEX:
#ca6a15
RGB:202, 106, 21
HSL:28deg, 81%, 44%
secondary
HEX:
#e87d1e
RGB:232, 125, 30
HSL:28deg, 81%, 51%
secondary-1
HEX:
#eb9140
RGB:235, 145, 64
HSL:28deg, 81%, 59%
secondary-2
HEX:
#f1ad71
RGB:241, 173, 113
HSL:28deg, 81%, 69%
secondary-3
HEX:
#f6cba5
RGB:246, 203, 165
HSL:28deg, 81%, 81%
secondary-4
HEX:
#fae2ce
RGB:250, 226, 206
HSL:28deg, 81%, 89%
secondary-5
HEX:
#fdf2e9
RGB:253, 242, 233
HSL:28deg, 81%, 95%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #e87d1e;"
>
<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"
>#180c02</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"
>24, 12, 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"
>28deg, 81%, 5%</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"
>#341b05</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"
>52, 27, 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"
>28deg, 81%, 11%</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"
>#5f320a</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"
>95, 50, 10</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"
>28deg, 81%, 21%</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"
>#964f0f</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"
>150, 79, 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"
>28deg, 81%, 32%</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"
>#ca6a15</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, 106, 21</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"
>28deg, 81%, 44%</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"
>#e87d1e</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"
>232, 125, 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"
>28deg, 81%, 51%</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"
>#eb9140</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, 145, 64</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"
>28deg, 81%, 59%</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"
>#f1ad71</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"
>241, 173, 113</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"
>28deg, 81%, 69%</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"
>#f6cba5</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, 203, 165</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"
>28deg, 81%, 81%</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"
>#fae2ce</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, 226, 206</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"
>28deg, 81%, 89%</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"
>#fdf2e9</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, 242, 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"
>28deg, 81%, 95%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/cvquality_boot.css, line 10855
1.4.9 shade: Color Variations
The Modified versions of the shade color from this theme
Example
shade-n5
HEX:
#0e0d0d
RGB:14, 13, 13
HSL:11deg, 4%, 5%
shade-n4
HEX:
#1e1c1c
RGB:30, 28, 28
HSL:11deg, 4%, 11%
shade-n3
HEX:
#373333
RGB:55, 51, 51
HSL:11deg, 4%, 21%
shade-n2
HEX:
#575150
RGB:87, 81, 80
HSL:11deg, 4%, 33%
shade-n1
HEX:
#766d6c
RGB:118, 109, 108
HSL:11deg, 4%, 44%
shade
HEX:
#8a817f
RGB:138, 129, 127
HSL:11deg, 4%, 52%
shade-1
HEX:
#9c9492
RGB:156, 148, 146
HSL:11deg, 4%, 59%
shade-2
HEX:
#b5b0ae
RGB:181, 176, 174
HSL:11deg, 4%, 70%
shade-3
HEX:
#d0cdcc
RGB:208, 205, 204
HSL:11deg, 4%, 81%
shade-4
HEX:
#e5e3e3
RGB:229, 227, 227
HSL:11deg, 4%, 89%
shade-5
HEX:
#f3f2f2
RGB:243, 242, 242
HSL:11deg, 4%, 95%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #8a817f;"
>
<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"
>#0e0d0d</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, 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"
>11deg, 4%, 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"
>#1e1c1c</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, 28, 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"
>11deg, 4%, 11%</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"
>#373333</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, 51, 51</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"
>11deg, 4%, 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"
>#575150</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"
>87, 81, 80</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"
>11deg, 4%, 33%</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"
>#766d6c</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"
>118, 109, 108</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"
>11deg, 4%, 44%</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"
>#8a817f</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"
>138, 129, 127</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"
>11deg, 4%, 52%</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"
>#9c9492</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"
>156, 148, 146</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"
>11deg, 4%, 59%</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"
>#b5b0ae</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, 176, 174</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"
>11deg, 4%, 70%</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"
>#d0cdcc</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, 205, 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"
>11deg, 4%, 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"
>#e5e3e3</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, 227, 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"
>11deg, 4%, 89%</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"
>#f3f2f2</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, 242, 242</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"
>11deg, 4%, 95%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/cvquality_boot.css, line 10535
1.4.10 success: Color Variations
The Modified versions of the success color from this theme
Example
success-n5
HEX:
#010e05
RGB:1, 14, 5
HSL:138deg, 90%, 3%
success-n4
HEX:
#021e0a
RGB:2, 30, 10
HSL:138deg, 90%, 6%
success-n3
HEX:
#033712
RGB:3, 55, 18
HSL:138deg, 90%, 11%
success-n2
HEX:
#04571d
RGB:4, 87, 29
HSL:138deg, 90%, 18%
success-n1
HEX:
#067527
RGB:6, 117, 39
HSL:138deg, 90%, 24%
success
HEX:
#078a2e
RGB:7, 138, 46
HSL:138deg, 90%, 28%
success-1
HEX:
#0abe3f
RGB:10, 190, 63
HSL:138deg, 90%, 39%
success-2
HEX:
#24f462
RGB:36, 244, 98
HSL:138deg, 90%, 55%
success-3
HEX:
#74f89b
RGB:116, 248, 155
HSL:138deg, 90%, 71%
success-4
HEX:
#b3fbc8
RGB:179, 251, 200
HSL:138deg, 90%, 84%
success-5
HEX:
#dcfde6
RGB:220, 253, 230
HSL:138deg, 90%, 93%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #078a2e;"
>
<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"
>#010e05</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, 14, 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"
>138deg, 90%, 3%</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"
>#021e0a</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"
>2, 30, 10</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"
>138deg, 90%, 6%</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"
>#033712</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"
>3, 55, 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"
>138deg, 90%, 11%</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"
>#04571d</span
>
</div>
<div class="flex flex_inline">
<span class="user-select_none opacity_6 font_bold font_ui uppercase"
>RGB:</span
><span class="user-select_all font_accent lowercase"
>4, 87, 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"
>138deg, 90%, 18%</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"
>#067527</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"
>6, 117, 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"
>138deg, 90%, 24%</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"
>#078a2e</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, 138, 46</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"
>138deg, 90%, 28%</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"
>#0abe3f</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"
>10, 190, 63</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"
>138deg, 90%, 39%</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"
>#24f462</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"
>36, 244, 98</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"
>138deg, 90%, 55%</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"
>#74f89b</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, 248, 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"
>138deg, 90%, 71%</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"
>#b3fbc8</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"
>179, 251, 200</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"
>138deg, 90%, 84%</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"
>#dcfde6</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"
>220, 253, 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"
>138deg, 90%, 93%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/cvquality_boot.css, line 11175
1.4.11 warning: Color Variations
The Modified versions of the warning color from this theme
Example
warning-n5
HEX:
#1a1101
RGB:26, 17, 1
HSL:36deg, 91%, 5%
warning-n4
HEX:
#3a2403
RGB:58, 36, 3
HSL:36deg, 91%, 12%
warning-n3
HEX:
#6a4205
RGB:106, 66, 5
HSL:36deg, 91%, 22%
warning-n2
HEX:
#a76808
RGB:167, 104, 8
HSL:36deg, 91%, 34%
warning-n1
HEX:
#e18d0b
RGB:225, 141, 11
HSL:36deg, 91%, 46%
warning
HEX:
#f4a122
RGB:244, 161, 34
HSL:36deg, 91%, 55%
warning-1
HEX:
#f6af43
RGB:246, 175, 67
HSL:36deg, 91%, 61%
warning-2
HEX:
#f8c474
RGB:248, 196, 116
HSL:36deg, 91%, 71%
warning-3
HEX:
#fbd9a7
RGB:251, 217, 167
HSL:36deg, 91%, 82%
warning-4
HEX:
#fdeace
RGB:253, 234, 206
HSL:36deg, 91%, 90%
warning-5
HEX:
#fef6e9
RGB:254, 246, 233
HSL:36deg, 91%, 95%
<div
class="grid gap-x_2 gap-y_2 template-x_15 font_n1 p_4"
style="background-color: #f4a122;"
>
<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"
>#1a1101</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"
>26, 17, 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"
>36deg, 91%, 5%</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"
>#3a2403</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"
>58, 36, 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"
>36deg, 91%, 12%</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"
>#6a4205</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, 66, 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"
>36deg, 91%, 22%</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"
>#a76808</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"
>167, 104, 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"
>36deg, 91%, 34%</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"
>#e18d0b</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, 141, 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"
>36deg, 91%, 46%</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"
>#f4a122</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"
>244, 161, 34</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"
>36deg, 91%, 55%</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"
>#f6af43</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, 175, 67</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"
>36deg, 91%, 61%</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"
>#f8c474</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, 196, 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"
>36deg, 91%, 71%</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"
>#fbd9a7</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, 217, 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"
>36deg, 91%, 82%</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"
>#fdeace</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, 234, 206</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"
>36deg, 91%, 90%</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"
>#fef6e9</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, 246, 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"
>36deg, 91%, 95%</span
>
</div>
</div>
</div>
</div>Code Sample
Source: dist/css/cvquality_boot.css, line 9551
1.5 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/cvquality_boot.css, line 9559
1.5.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,"slab",serif
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/cvquality_boot.css, line 9588
1.5.2 Display: Maven Pro
A Slick font that has a slight interest used for headers and UI.
Maven Pro font-family: "Maven Pro",Verdana,Helvetica,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/cvquality_boot.css, line 9617
1.5.3 Copy: Lato
A clean font for content and text of none UI elements.
"Lato" font-family: ""Lato","Open Sans","system-ui",sans-serif"
Lt
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/cvquality_boot.css, line 9646
1.5.4 UI: Lato
A clean font for content and text of none UI elements.
"Lato" font-family: ""Lato","Open Sans","system-ui",sans-serif"
Lt
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/cvquality_boot.css, line 9675
1.6 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/cvquality_boot.css, line 8791
1.7 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/cvquality_boot.css, line 8880
1.8 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/cvquality_boot.css, line 9877
1.9 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>