uni-ui为了避免视觉传达差异，使用一套特定的调色板来规定颜色，为你所搭建的产品提供一致的外观视觉感受。

主色

uni-ui的主色使用了令人安静并放松的蓝色。

Primary Color

#2979ff

#94bcff

#d4e4ff

我们通过uni-scss提供了对应的颜色变量名

$uni-primary: #2979ff;
$uni-primary-disable:#94bcff;
$uni-primary-light: #d4e4ff;

辅助色

除了主色外的场景色，需要在不同的场景中使用,不同颜色代表不同的场景，如：绿色代表成功、红色代表错误、黄色代表警告。

Success Color

#18bc37

#8cde9b

#d1f2d7

Warning Color

#f3a73f

#f9d39f

#fdedd9

Error Color

#e43d33

#f29e99

#fad8d6

Info Color

#8f939c

#c7c9ce

#e9e9eb

我们通过uni-scss提供了对应的颜色变量名

$uni-success: #18bc37;
$uni-success-disable: #8cde9b;
$uni-success-light: #d1f2d7;

$uni-warning: #f3a73f;
$uni-warning-disable: #f9d39f;
$uni-warning-light: #fdedd9;

$uni-error: #e43d33;
$uni-error-disable: #f29e99;
$uni-error-light: #fad8d6;

$uni-info: #8f939c;
$uni-info-disable: #c7c9ce;
$uni-info-light: #e9e9eb;

中性色

中性色用于文本、背景和边框颜色。通过运用不同的中性色，来表现层次结构。

Main Color

#3a3a3a

Base Color

#6a6a6a

Secondary Color

#909399

Extra Color

#c7c7c7

我们通过uni-scss提供了对应的颜色变量名

$uni-main-color: #3a3a3a; 			// 主要文字
$uni-base-color: #6a6a6a;			// 常规文字
$uni-secondary-color: #909399;		// 次要文字
$uni-extra-color: #c7c7c7;			// 辅助说明

边框颜色

主要用于边框、分隔线颜色

Border-1 olor

#f0f0f0

Border-2 Color

#ededed

Border-3 Color

#dcdcdc

Border-4 Color

#b9b9b9

我们通过uni-scss提供了对应的颜色变量名

$uni-border-1: #f0f0f0;
$uni-border-2: #ededed;
$uni-border-3: #dcdcdc;
$uni-border-4: #b9b9b9;

常规色

通用颜色，如黑色、白色、常用背景色等

White Color

#ffffff

Black Color

#000000

Transparent Color

transparent

Background Color

#f7f7f7

我们通过uni-scss提供了对应的颜色变量名

// 常规色
$uni-black: #000000;
$uni-white: #ffffff;
$uni-transparent: rgba($color: #000000, $alpha: 0);
// 背景色
$uni-bg-color: #f7f7f7;

阴影

Shadow-sm Color

Shadow-base Color

Shadow-lg Color

我们通过uni-scss提供了对应的颜色变量名

$uni-shadow-sm:0 0 5px rgba($color: #d8d8d8, $alpha: 0.5);
$uni-shadow-base:0 1px 8px 1px rgba($color: #a5a5a5, $alpha: 0.2);
$uni-shadow-lg:0px 1px 10px 2px rgba($color: #a5a4a4, $alpha: 0.5);