配色わからん！デザインわからん！
昨今、都内のカフェで少し耳をそばだてれば副業でwebエンジニアやwebデザイナーになる！！という話が聞こえてきます。
そんな駆け出しwebつくるマンが、色使いで頭を抱える時間をショートカットするべく、教科書に乗ってる程度の色の組み合わせと、その実装方法を書けたらと思います。
※ 独学知識をまとめただけですので、間違いや不適切な表現等がございましたら、コメントで教えていただけると助かります。
Sassは優秀
Sass（Syntactically Awesome Stylesheets）では、メインカラーを元に
色相（Hue）、彩度（Saturation）、輝度（Lightness）をいじることができる。
配色パターン
それでは解説していきます。
参考ソースとして、一番最後に書籍を掲載してあります。
モノクロマティック（同一色相配色）
色相環で１色だけを選択して、明度または彩度を変える配色方法。
scss
/* メインカラー */
$main_color: #48AFE0;
.main { background: $main_color; }
/* 明度 */
.lighten10 { background: lighten($main_color, 10%); }
.darken10 { background: darken($main_color, 10%); }
/* 彩度 */
.saturate10 { background: saturate($main_color, 30%); }
.desaturate10 { background: desaturate($main_color, 30%); }
ダイアード（補色色相配色）
補色（色相環の正反対側の色）との組み合わせはコントラストがはっきりと付くので、アクセントを付けたいときなどに良い。
scss
/* メインカラー */
$main_color: #48AFE0;
.main { background: $main_color; }
/* 補色 */
.complement { background: complement($main_color); }
トライアド
色相環で正三角形を結んで作る配色。
子ども用のおもちゃやブランドでよく見かける「赤・黄・青」の配色は、原色（混ぜて作れない色）の組み合わせであり、プライマリー・トライアドと呼ばれる。
それ以外のトライアドの組み合わせは、セカンダリー・トライアドと言うらしい。
scss
/* メインカラー */
$main_color: #48AFE0;
.main { background: $main_color; }
/* トライアド */
.deg120 { background: adjust-hue($main_color, 120deg); }
.deg240 { background: adjust-hue($main_color, 240deg); }
アナログ（類似色相配色）
色相環で連続して隣り合う色を組み合わせる方法。
共通する色を基調に持っているため、調和が取れた組み合わせになる。
scss
/* メインカラー */
$main_color: #48AFE0;
.main { background: $main_color; }
/* アナログ */
.deg30 { background: adjust-hue($main_color, 30deg); }
.deg330 { background: adjust-hue($main_color, 330deg); }
スプリットコンプリメンタリー（分裂補色配色）
色相環で、補色の両隣の色相を用いる。
目を引く配色ながら、しっかりと調和を保てるので、メイン＋補色の「２色」では足りない場合に、スプリットコンプリメンタリーを採用するのも良いかも。
scss
/* メインカラー */
$main_color: #48AFE0;
.main { background: $main_color; }
/* スプリットコンプリメンタリー */
.complement30 { background: adjust-hue(complement($main_color), 30deg); }
.complement330 { background: adjust-hue(complement($main_color), 330deg); }
テトラード（四色配色）
色相環を正四角形で結んだ配色。
2組の補色関係で出来上がるので、にぎやかな印象になる。
scss
/* メインカラー */
$main_color: #48AFE0;
.main { background: $main_color; }
/* テトラード */
.deg90 { background: adjust-hue($main_color, 90deg); }
.deg180 { background: adjust-hue($main_color, 180deg); }
.deg270 { background: adjust-hue($main_color, 270deg); }