常见的网页主题颜色，常用于标签、弹窗，提示信息等色彩搭配

常见的网页主题颜色，常用于标签、弹窗，提示信息等色彩搭配

<!-- Color Palette -->
root {
    --blue: #007bff;
    --indigo: #6610f2;
    --purple: #6f42c1;
    --pink: #e83e8c;
    --red: #dc3545;
    --orange: #fd7e14;
    --yellow: #ffc107;
    --green: #28a745;
    --teal: #20c997;
    --cyan: #17a2b8;
    --white: #fff;
    --gray: #6c757d;
    --gray-dark: #343a40;
    --primary: #007bff;
    --secondary: #6c757d;
    --success: #28a745;
    --info: #17a2b8;
    --warning: #ffc107;
    --danger: #dc3545;
    --light: #f8f9fa;
    --dark: #343a40;
}

示例：

Theme Colors 主题颜色：(主要的)蓝色、(次要的)灰色、(信息)蓝绿色，青色、(成功)绿色、(警告)黄色、(危险)红色

Primary blue

#007bff

Disabled

Secondary gray

#6c757d

Disabled

Info cyan

#17a2b8

Disabled

Success green

#28a745

Disabled

Warning yellow

#ffc107

Disabled

Danger red

#dc3545

Disabled

代码：

<h3>Theme Colors</h3>

<div class="row" style="display: flex; flex-wrap: wrap; flex-flow: row wrap; align-items: flex-start;align-content: flex-start; box-sizing: border-box; justify-content: space-around;">
   <!-- Primary blue: #007bff; 蓝色 -->
   <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
       <div style="background-color: #007bff !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Primary blue</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#007bff</h5></div>
       <div style="background-color: #007bff !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
   </div>
   <!-- Secondary gray: #6c757d; 灰色 -->
   <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
       <div style="background-color: #6c757d !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Secondary gray</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#6c757d</h5></div>
       <div style="background-color: #6c757d !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
   </div>
   <!-- Info cyan: #17a2b8; 蓝绿色，青色 -->
   <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
       <div style="background-color: #17a2b8 !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Info cyan</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#17a2b8</h5></div>
       <div style="background-color: #17a2b8 !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
   </div>
   <!-- Success green: #28a745; 绿色 -->
   <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
       <div style="background-color: #28a745 !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Success green</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#28a745</h5></div>
       <div style="background-color: #28a745 !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
   </div>
   <!-- Warning yellow: #ffc107; 黄色 -->
   <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: #1f2d3d !important;">
       <div style="background-color: #ffc107 !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Warning yellow</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#ffc107</h5></div>
       <div style="background-color: #ffc107 !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: #1f2d3d !important;">Disabled</h5></div>
   </div>
   <!-- Danger red: #dc3545; 红色 -->
   <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
       <div style="background-color: #dc3545 !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Danger red</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#dc3545</h5></div>
       <div style="background-color: #dc3545 !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
   </div>
</div>

Black/White Nuances 黑白色细节：纯黑色、灰黑色、灰色、光亮

Black

#000000

Disabled

Gray Dark

#343a40

Disabled

Gray

#adb5bd

Disabled

Light

#f8f9fa

Disabled

代码：

<h3>Black/White Nuances</h3>

<div class="row" style="display: flex; flex-wrap: wrap; flex-flow: row wrap; align-items: flex-start;align-content: flex-start; box-sizing: border-box; justify-content: space-around;">
   <!-- Black : #000000; 黑色 -->
   <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
       <div style="background-color: #000000 !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Black</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#000000</h5></div>
       <div style="background-color: #000000 !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
   </div>
   <!-- Gray Dark: #343a40; 灰黑色 -->
   <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
       <div style="background-color: #343a40 !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Gray Dark</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#343a40</h5></div>
       <div style="background-color: #343a40 !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
   </div>
   <!-- Gray: #adb5bd; 灰色 -->
   <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
       <div style="background-color: #adb5bd !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Gray</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#adb5bd</h5></div>
       <div style="background-color: #adb5bd !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
   </div>
   <!-- Light: #f8f9fa; 光亮 -->
   <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: #1f2d3d !important;">
       <div style="background-color: #f8f9fa !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Light</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#f8f9fa</h5></div>
       <div style="background-color: #f8f9fa !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: #1f2d3d !important;">Disabled</h5></div>
   </div>
</div>

Colors 色彩：靛蓝/靛青；亮蓝色/浅蓝色；海军黑；皇权紫；紫红色/洋红色；粉红色；褐红色的；橙色/橘黄色；清橙色/亮绿色；蓝绿色/青绿色；橄榄绿/墨绿色/军绿色

Indigo

#6610f2

Disabled

Lightblue

#3c8dbc

Disabled

Navy

#001f3f

Disabled

Purple

#605ca8

Disabled

Fuchsia

#f012be

Disabled

Pink

#e83e8c

Disabled

Maroon

#d81b60

Disabled

Orange

#ff851b

Disabled

Lime

#01ff70

Disabled

Teal

#39cccc

Disabled

Olive

#3d9970

Disabled

代码：

<h3>Colors</h3>

<div class="row" style="display: flex; flex-wrap: wrap; flex-flow: row wrap; align-items: flex-start;align-content: flex-start; box-sizing: border-box; justify-content: space-around;">
   <!-- Indigo : #000000; 靛蓝；靛青 -->
   <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
       <div style="background-color: #6610f2 !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Indigo</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#6610f2</h5></div>
       <div style="background-color: #6610f2 !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
   </div>
   <!-- Lightblue : #3c8dbc; 亮蓝色/浅蓝色 -->
   <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
       <div style="background-color: #3c8dbc !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Lightblue</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#3c8dbc</h5></div>
       <div style="background-color: #3c8dbc !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
   </div>
   <!-- Navy : #001f3f; 海军黑 -->
   <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
       <div style="background-color: #001f3f !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Navy</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#001f3f</h5></div>
       <div style="background-color: #001f3f !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
   </div>
   <!-- Purple: #605ca8; 皇权紫 -->
   <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
       <div style="background-color: #605ca8 !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Purple</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#605ca8</h5></div>
       <div style="background-color: #605ca8 !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
   </div>
   <!-- Fuchsia: #f012be; 紫红色/洋红色 -->
   <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
       <div style="background-color: #f012be !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Fuchsia</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#f012be</h5></div>
       <div style="background-color: #f012be !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
   </div>
   <!-- Pink: #e83e8c; 粉红色 -->
   <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
       <div style="background-color: #e83e8c !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Pink</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#e83e8c</h5></div>
       <div style="background-color: #e83e8c !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
   </div>
   <!-- Maroon: #d81b60; 褐红色的 -->
   <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
       <div style="background-color: #d81b60 !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Maroon</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#d81b60</h5></div>
       <div style="background-color: #d81b60 !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
   </div>
   <!-- Orange: #ff851b; 橙色/橘黄色 -->
   <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: #1f2d3d !important;">
       <div style="background-color: #ff851b !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Orange</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#ff851b</h5></div>
       <div style="background-color: #ff851b !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: #1f2d3d !important;">Disabled</h5></div>
   </div>
   <!-- Lime: #01ff70; 清橙色/亮绿色 -->
   <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: #1f2d3d !important;">
       <div style="background-color: #01ff70 !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Lime</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#01ff70</h5></div>
       <div style="background-color: #01ff70 !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: #1f2d3d !important;">Disabled</h5></div>
   </div>
   <!-- Teal: #39cccc; 蓝绿色/青绿色 -->
   <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
       <div style="background-color: #39cccc !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Teal</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#39cccc</h5></div>
       <div style="background-color: #39cccc !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
   </div>
   <!-- Olive: #3d9970; 橄榄绿/墨绿色/军绿色 -->
   <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
       <div style="background-color: #3d9970 !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Olive</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#3d9970</h5></div>
       <div style="background-color: #3d9970 !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
   </div>
</div>

Colors 色彩：深蓝/海蓝 Sea Blue；亮蓝/天蓝 Sky Blue

Sea Blue

#2175bc

Disabled

Sea Blue

#3B64FC

Disabled

Sea Blue

#0360FF

Disabled

Sea Blue

#1677ff

Disabled

Sea Blue

#4096ff

Disabled

Sea Blue

#02A7F0

Disabled

Sky Blue（1）

#39f

Disabled

Sky Blue（2）

#87CEEB

Disabled

Sky Blue（3）

#ADD8E6

Disabled

代码：

<h3>Colors 色彩：深蓝/海蓝 Sea Blue；亮蓝/天蓝 Sky Blue  </h3>
     <div class="row" style="display: flex; flex-wrap: wrap; flex-flow: row wrap; align-items: flex-start;align-content: flex-start; box-sizing: border-box; justify-content: space-around;">
        <!-- Sea Blue : #2175bc; Sea Blue -->
        <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
            <div style="background-color: #2175bc !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Sea Blue</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#2175bc</h5></div>
            <div style="background-color: #2175bc !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
		</div>
        <!-- Sea Blue : #3B64FC; Sea Blue -->
        <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
            <div style="background-color: #3B64FC !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Sea Blue</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#3B64FC</h5></div>
            <div style="background-color: #3B64FC !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
		</div>
        <!-- Sea Blue : #0360FF; Sea Blue -->
        <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
            <div style="background-color: #0360FF !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Sea Blue</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#0360FF</h5></div>
            <div style="background-color: #0360FF !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
		</div>
        <!-- Sea Blue : #1677ff; Sea Blue -->
        <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
            <div style="background-color: #1677ff !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Sea Blue</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#1677ff</h5></div>
            <div style="background-color: #1677ff !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
		</div>
        <!-- Sea Blue : #4096ff; Sea Blue -->
        <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
            <div style="background-color: #4096ff !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Sea Blue</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#4096ff</h5></div>
            <div style="background-color: #4096ff !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
		</div>
        <!-- Sea Blue : #02A7F0; Sea Blue -->
        <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
            <div style="background-color: #02A7F0 !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Sea Blue</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#02A7F0</h5></div>
            <div style="background-color: #02A7F0 !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
		</div>
        <!-- Sky Blue（1） : #39f; Sky Blue -->
        <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
            <div style="background-color: #39f !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Sky Blue（1）</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#39f</h5></div>
            <div style="background-color: #39f !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
		</div>
        <!-- Sky Blue（2） : #87CEEB; Sky Blue -->
        <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
            <div style="background-color: #87CEEB !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Sky Blue（2）</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#87CEEB</h5></div>
            <div style="background-color: #87CEEB !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
		</div>
        <!-- Sky Blue（3） : #ADD8E6; Sky Blue -->
        <div class="col-md-2" style="align-items: flex-start;align-content: flex-start;box-sizing: border-box; font-size: 1.5rem;line-height: 3rem; color: rgba(255, 255, 255, 1);">
            <div style="background-color: #ADD8E6 !important; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: left;">Sky Blue（3）</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#ADD8E6</h5></div>
            <div style="background-color: #ADD8E6 !important; opacity: .65; align-items: flex-start;align-content: flex-start;box-sizing: border-box; padding:0 0.5rem;"><h5 style="box-sizing: border-box;margin: 0 0; cursor: not-allowed;color: rgba(255, 255, 255, 0.8) !important;">Disabled</h5></div>
		</div>
	 </div>