常见的网页主题颜色，常用于标签、弹窗，提示信息等色彩搭配
常见的网页主题颜色，常用于标签、弹窗，提示信息等色彩搭配
<!-- 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
#0046ad
Disabled
Sea Blue
#0052cc
Disabled
Sea Blue
#0054E6
Disabled
Sea Blue
#06f
Disabled
Sea Blue
#3B64FC
Disabled
Sea Blue
#0360FF
Disabled
Sea Blue
#1677ff
Disabled
Sea Blue
#4096ff
Disabled
Sea Blue
#02A7F0
Disabled
Sky Blue
#4aa6fc
Disabled
Sky Blue
#4da7fd
Disabled
Sky Blue
#4fa8f9
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 : #0046ad; 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: #0046ad !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;">#0046ad</h5></div>
<div style="background-color: #0046ad !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 : #0052cc; 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: #0052cc !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;">#0052cc</h5></div>
<div style="background-color: #0052cc !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 : #0054E6; 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: #0054E6 !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;">#0054E6</h5></div>
<div style="background-color: #0054E6 !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 : #06f; 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: #06f !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;">#06f</h5></div>
<div style="background-color: #06f !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 : #4fa8f9; 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: #4fa8f9 !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</h5><h5 style="display: inline;box-sizing: border-box;margin: 0 0; float: right;margin-left: 2rem;">#4fa8f9</h5></div>
<div style="background-color: #4fa8f9 !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>
常见的基础颜色：
.light-d20, .light-d22, :root {
--dls-color-brand-10: #00225c;
--dls-color-brand-9: #003796;
--dls-color-brand-8: #0047c4;
--dls-color-brand-7: #0054e6;
--dls-color-brand-6: #1a6eff;
--dls-color-brand-5: #5e99ff;
--dls-color-brand-4: #95bcff;
--dls-color-brand-3: #bfd7ff;
--dls-color-brand-2: #dce9ff;
--dls-color-brand-1: #ebf2ff;
--dls-color-gray-10: #0a0b0d;
--dls-color-gray-9: #191b1e;
--dls-color-gray-8: #545b66;
--dls-color-gray-7: #848b99;
--dls-color-gray-6: #a8b0bf;
--dls-color-gray-5: #c5ccdb;
--dls-color-gray-4: #d3d9e6;
--dls-color-gray-3: #e2e6f0;
--dls-color-gray-2: #ebedf5;
--dls-color-gray-1: #f6f7fa;
--dls-color-success-10: #003d1a;
--dls-color-success-9: #00632a;
--dls-color-success-8: #008236;
--dls-color-success-7: #009940;
--dls-color-success-6: #0c5;
--dls-color-success-5: #4dff97;
--dls-color-success-4: #8bffbb;
--dls-color-success-3: #baffd7;
--dls-color-success-2: #daffe9;
--dls-color-success-1: #ebfff3;
--dls-color-error-10: #570400;
--dls-color-error-9: #8d0700;
--dls-color-error-8: #b80900;
--dls-color-error-7: #d9150b;
--dls-color-error-6: #ff2b20;
--dls-color-error-5: #ff6a63;
--dls-color-error-4: #ff9d98;
--dls-color-error-3: #ffc4c0;
--dls-color-error-2: #ffdedc;
--dls-color-error-1: #ffeceb;
--dls-color-info-10: #00225c;
--dls-color-info-9: #003796;
--dls-color-info-8: #0047c4;
--dls-color-info-7: #0054e6;
--dls-color-info-6: #1a6eff;
--dls-color-info-5: #5e99ff;
--dls-color-info-4: #95bcff;
--dls-color-info-3: #bfd7ff;
--dls-color-info-2: #dce9ff;
--dls-color-info-1: #ebf2ff;
--dls-color-warning-10: #612800;
--dls-color-warning-9: #9d4200;
--dls-color-warning-8: #ce5600;
--dls-color-warning-7: #f27318;
--dls-color-warning-6: #ff9448;
--dls-color-warning-5: #ffb37d;
--dls-color-warning-4: #ffcca8;
--dls-color-warning-3: #ffdfc9;
--dls-color-warning-2: #ffecdf;
--dls-color-warning-1: #fff3eb;
--dls-color-translucent-10: rgba(4,4,5,.95);
--dls-color-translucent-9: rgba(13,15,18,.95);
--dls-color-translucent-8: rgba(46,52,64,.9);
--dls-color-translucent-7: rgba(73,86,107,.8);
--dls-color-translucent-6: rgba(83,101,138,.5);
--dls-color-translucent-5: rgba(90,119,168,.3);
--dls-color-translucent-4: rgba(96,134,199,.2);
--dls-color-translucent-3: rgba(102,146,222,.15);
--dls-color-translucent-2: rgba(108,156,240,.1);
--dls-color-translucent-1: rgba(109,159,247,.07);
}
更多请参考： ≪ 在线WEB安全色查询工具 ≫
