配色に悩んだら、Sassでいい感じに調整してもらおう！

![スクリーンショット 2019-11-21 20.43.36.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377721/13750d62-f509-c76d-7535-dcbd32f21f0b.png)

# 配色わからん！デザインわからん！
昨今、都内のカフェで少し耳をそばだてれば副業でwebエンジニアやwebデザイナーになる！！という話が聞こえてきます。

そんな駆け出しwebつくるマンが、色使いで頭を抱える時間をショートカットするべく、教科書に乗ってる程度の色の組み合わせと、その実装方法を書けたらと思います。

※ 独学知識をまとめただけですので、間違いや不適切な表現等がございましたら、コメントで教えていただけると助かります。

## Sassは優秀
Sass（Syntactically Awesome Stylesheets）では、メインカラーを元に
色相（Hue）、彩度（Saturation）、輝度（Lightness）をいじることができる。

# 配色パターン
それでは解説していきます。
参考ソースとして、一番最後に書籍を掲載してあります。

## モノクロマティック（同一色相配色）
![スクリーンショット 2019-11-21 21.33.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377721/ae574841-60dc-623f-e2c1-7f848ee24905.png)

色相環で１色だけを選択して、明度または彩度を変える配色方法。

```scss: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%); }
```

## ダイアード（補色色相配色）
![スクリーンショット 2019-11-21 21.33.05.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377721/17578b4d-4698-cf85-5996-aed54dd0f615.png)

補色（色相環の正反対側の色）との組み合わせはコントラストがはっきりと付くので、アクセントを付けたいときなどに良い。

```scss:scss
/* メインカラー */
$main_color: #48AFE0;
.main { background: $main_color; }

/* 補色 */
.complement { background: complement($main_color); }
```

## トライアド
![スクリーンショット 2019-11-21 21.33.10.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377721/9c4469f2-5bdb-3b1c-9a12-faf42b862eb6.png)

色相環で正三角形を結んで作る配色。
子ども用のおもちゃやブランドでよく見かける「赤・黄・青」の配色は、原色（混ぜて作れない色）の組み合わせであり、プライマリー・トライアドと呼ばれる。
それ以外のトライアドの組み合わせは、セカンダリー・トライアドと言うらしい。

```scss:scss
/* メインカラー */
$main_color: #48AFE0;
.main { background: $main_color; }

/* トライアド */
.deg120 { background: adjust-hue($main_color, 120deg); }
.deg240 { background: adjust-hue($main_color, 240deg); }
```

## アナログ（類似色相配色）
![スクリーンショット 2019-11-21 21.33.16.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377721/ee9f7ad9-1226-e4a8-7b85-acbb23ed2aec.png)

色相環で連続して隣り合う色を組み合わせる方法。
共通する色を基調に持っているため、調和が取れた組み合わせになる。

```scss:scss
/* メインカラー */
$main_color: #48AFE0;
.main { background: $main_color; }

/* アナログ */
.deg30 { background: adjust-hue($main_color, 30deg); }
.deg330 { background: adjust-hue($main_color, 330deg); }
```

## スプリットコンプリメンタリー（分裂補色配色）
![スクリーンショット 2019-11-21 21.33.22.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377721/dcee7c37-d6be-1081-28de-04a92ab1a64e.png)

色相環で、補色の両隣の色相を用いる。
目を引く配色ながら、しっかりと調和を保てるので、メイン＋補色の「２色」では足りない場合に、スプリットコンプリメンタリーを採用するのも良いかも。

```scss:scss
/* メインカラー */
$main_color: #48AFE0;
.main { background: $main_color; }

/* スプリットコンプリメンタリー */
.complement30 { background: adjust-hue(complement($main_color), 30deg); }
.complement330 { background: adjust-hue(complement($main_color), 330deg); }
```

## テトラード（四色配色）
![スクリーンショット 2019-11-21 21.33.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/377721/a2538a1f-b7ee-543a-b0d8-27aadc1eef15.png)

色相環を正四角形で結んだ配色。
2組の補色関係で出来上がるので、にぎやかな印象になる。

```scss: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); }
```

# 参考
- [ノンデザイナーズ・デザインブック](https://amzn.to/2rbQIbC)
- [すべての人に知っておいてほしい 配色の基本原則](https://amzn.to/2rdfHLw)
- [Webデザイン良質見本帳](https://amzn.to/339DAAO)