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

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

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

代码：

Theme Colors

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

Black#000000

Disabled

Gray Dark#343a40

Disabled

Gray#adb5bd

Disabled

Light#f8f9fa

Disabled

代码：

Black/White Nuances

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

代码：

Colors

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

代码：

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

常见的基础颜色：

.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安全色查询工具 ≫