SASS：36 种 web 配色分享

该文章距离发布日期已经过了 3102 天 ，请注意信息甄别。

好久没更新博客了 -。-
通过 sass 定义了一个通用的变量类，定义了字体、常用尺寸、颜色，但目前主要是写入了颜色。一共有 36 种配色方案，每种方案有 4 个颜色，方案都是实行过，视觉效果不错。这些都是自己累积收集的成果，所以拿出来分享一下。

代码如下：


/*
*! create by LIBOY http://liboy.net
*/

//==================================
//base
//==================================


//==================================
//font-family
//==================================
$font-yahei:"微软雅黑",tahoma,arial;
$font-zhenghei:"微軟正黑體","微软雅黑",tahoma,arial;

//==================================
//color
//==================================
$black:#333333;
$gray0:#eeeeee;
$gray:#f5f5f5;

$blue1:#0a2f45;
$blue2:#0f4363;
$blue3:#145882;
$blue4:#a1dbff;

$blue-dustbrown1:#2b3d50;
$blue-dustbrown2:#3d5771;
$blue-dustbrown3:#4f7093;
$blue-dustbrown4:#d9d7b7;

$blue-orange1:#0d738e;
$blue-orange2:#1298bd;
$blue-orange3:#14afd9;
$blue-orange4:#ef945a;

$blue-teal1:#21475c;
$blue-teal2:#225977;
$blue-teal3:#437a7f;
$blue-teal4:#bef0e4;

$brown-ecru1:#261f1a;
$brown-ecru2:#45392f;
$brown-ecru3:#826b58;
$brown-ecru4:#ffe2cb;

$brown-lightblue1:#64441d;
$brown-lightblue2:#8c5f28;
$brown-lightblue3:#b47a34;
$brown-lightblue4:#8fb7df;

$brown-orange-yellow1:#641e00;
$brown-orange-yellow2:#972e00;
$brown-orange-yellow3:#ca3d00;
$brown-orange-yellow4:#f3ed7c;

$coral-lightgreen1:#a74842;
$coral-lightgreen2:#bf635d;
$coral-lightgreen3:#cd8681;
$coral-lightgreen4:#d6d979;

$darkgreen-teal1:#1a2526;
$darkgreen-teal2:#2f4345;
$darkgreen-teal3:#436163;
$darkgreen-teal4:#c9f8fc;

$darkpurple-pink1:#27142a;
$darkpurple-pink2:#742334;
$darkpurple-pink3:#cf3140;
$darkpurple-pink4:#ffd2d7;

$darkred-yellow1:#5e1e1e;
$darkred-yellow2:#852a2a;
$darkred-yellow3:#ac3636;
$darkred-yellow4:#ffda0b;

$deeperpurple-green1:#4a1d50;
$deeperpurple-green2:#6c2b75;
$deeperpurple-green3:#8e389b;
$deeperpurple-green4:#90c74d;

$deeppurple-lightgreen1:#701b85;
$deeppurple-lightgreen2:#9324b0;
$deeppurple-lightgreen3:#b432d5;
$deeppurple-lightgreen4:#d5da49;

$green1:#325041;
$green2:#266a50;
$green3:#59935c;
$green4:#e6c904;

$dustbrown-almondgreen1:#5d5854;
$dustbrown-almondgreen2:#77716d;
$dustbrown-almondgreen3:#918a86;
$dustbrown-almondgreen4:#bdc39d;

$green-dustbrown1:#2b504e;
$green-dustbrown2:#3d716e;
$green-dustbrown3:#4f938e;
$green-dustbrown4:#d9d7b7;

$green-lightblue1:#49581c;
$green-lightblue2:#697e28;
$green-lightblue3:#89a534;
$green-lightblue4:#7dd0ec;

$green-mustard1:#195652;
$green-mustard2:#247e77;
$green-mustard3:#30a59d;
$green-mustard4:#ddd355;

$hotpink-green1:#8e1d50;
$hotpink-green2:#b82668;
$hotpink-green3:#d73a81;
$hotpink-green4:#9dd73c;

$hotpink-yellow1:#bc0048;
$hotpink-yellow2:#ef005b;
$hotpink-yellow3:#ff2377;
$hotpink-yellow4:#ffda0b;

$lightblue-green1:#4b6eb7;
$lightblue-green2:#708bc5;
$lightblue-green3:#94a9d4;
$lightblue-green4:#adce75;

$lightpurple-orange1:#335db7;
$lightpurple-orange2:#4e78ce;
$lightpurple-orange3:#7696d9;
$lightpurple-orange4:#d69d3b;

$navyblue-yellow1:#002850;
$navyblue-yellow2:#004183;
$navyblue-yellow3:#005bb6;
$navyblue-yellow4:#fff982;

$orange-green-teal1:#972713;
$orange-green-teal2:#137372;
$orange-green-teal3:#398992;
$orange-green-teal4:#d2e1de;

$purple1:#3e2f45;
$purple2:#755882;
$purple3:#916da1;
$purple4:#eecafe;

$purple-ecru1:#5d1c3e;
$purple-ecru2:#8a5251;
$purple-ecru3:#ad6f60;
$purple-ecru4:#eae6dd;

$purple-grey-orange1:#4a3d47;
$purple-grey-orange2:#6d737f;
$purple-grey-orange3:#c79687;
$purple-grey-orange4:#e6c693;

$purple-pink1:#4a2886;
$purple-pink2:#6034ad;
$purple-pink3:#794bc9;
$purple-pink4:#f8a9bd;

$purple-pink-mustard1:#8a3857;
$purple-pink-mustard2:#af476e;
$purple-pink-mustard3:#c16789;
$purple-pink-mustard4:#d4c46b;

$red-lightgreen1:#9f2820;
$red-lightgreen2:#c93329;
$red-lightgreen3:#da544b;
$red-lightgreen4:#d5da49;

$teal-lightgreen1:#39758f;
$teal-lightgreen2:#4793b4;
$teal-lightgreen3:#6aa9c4;
$teal-lightgreen4:#b5b949;

$teal-lightyellow1:#37838e;
$teal-lightyellow2:#45a5b3;
$teal-lightyellow3:#67b8c4;
$teal-lightyellow4:#eae896;

webstorm 效果：