【CSS】「なんかグラデーションが汚くなるんだけど」を解決する。

## 概要
![スクリーンショット 2022-04-07 22.07.41.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/70135724-3d8f-a32d-c41d-d40fe835ca45.png)
このグラデーションは、`#ff0000` → `#00ff00`のグラデーションになります。

みなさんは、このクラデーションを見てどう思いますか？
真ん中あたりの色が茶色っぽくなって
あまり綺麗なグラデーションとは感じないですよね?

この記事では、**これが発生する原因**と**綺麗なグラデーションの作り方**を
解説していきます。

この記事を読んで理解すれば、**綺麗なグラデーション**が簡単に作れるようになるでしょう。

## 原因

### 1. RGBについて理解する

RGBは、赤（Red）、緑（Green）、青（Blue）の3つの色を
それぞれ、`0~255`の値を指定することで、色が作られます。

例えば、
`R: 255, G: 0, B: 0` → 赤
`R: 255, G: 255, B: 0` → 黄色
このように色が指定されます。

では、RGB全てが同じ値の時はどんな色になるでしょうか？
![1.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/3736eebe-1c26-26c4-f5f0-6a7d6812f8a8.png)

答えは、↑このように**グレースケールカラー**になります。

つまり、**RGBの値が近くなると、色がなくなり、グレースケールカラーに近づく**ということです。

### 2. `linear-gradient` の仕様を理解する。
`1. RGB について理解する` の説明で既に察し方はいると思いますが、
一度、`linear-gradient` の仕様について理解しましょう。

`linear-gradient`は、
グラデーションの方向、始点の色と終点の色、色経由点の色を指定することで、
指定した色から次の指定した色へとスムーズにフェードしていきます。

では、どのようにフェードしていくのでしょうか？

![2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/5388ebe7-8126-35de-2acb-6a09c017796e.png)


`rgb(255, 0, 0)` → `rgb(0, 255, 0)`のグラデーションはこのようにフェードしていきます。

Redの数値 `255 → 192 → 128 → 64 → 0`
Greenの数値 `0 → 64 → 128 → 192 → 255`
Blueの数値 `0 → 0 → 0 → 0 → 0`
このようにフェードしています。

つまり、 **RGBのそれぞれの値が、次点のRGBそれぞれの値へとフェードしている**ということです。

### 3. グラデーションの中央が茶色っぽくなる理由
ここまで、読めば概ね予想が着くと思いますが、
どうして真ん中あたりの色が茶色・グレーっぽくなり、くすんだグラデーションになるのでしょうか？

そうです。

:::note
**結論**
RGBそれぞれの値が、次点のRGBそれぞれの値にフェードしていく中で、
RGBそれぞれの値が真ん中付近で近い値になるため、グレーっぽくなり、くすんだグラデーションになる
:::

というわけです。



## 綺麗なグラデーションを作る

ここまでは、グラデーションの真ん中がグレーになり、
綺麗と言えないグラデーションができてしまう原因を解説しました。

ここからは、どうすれば綺麗なグラデーションになるかを解説していきます。

### 1. HSLを理解する

HSL という色を指定する方法を知っていますか？

HSLは、色相（Hue）、彩度（Saturation）、明度（Lightness）を指定する色指定方法です。

それぞれ
**色相（Hue）** は、赤・黄・緑・青のように、色を特徴づける色みのことで、`0~360` の値をとります。
**彩度（Saturation）** は、色みの強さや、あざやかさの度合いのことで、`0%〜100%`の値をとります。
**明度（Lightness）** は、色の明るさの度合いのことで、`0%〜100%`の値をとります。

では**色相（Hue）** の値でグラデーションしたのがこちら↓です。
S、Lの値が一定になったので茶色っぽくなる部分がなくなって、いい感じになりましたね！

![3.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/8d20afae-f6f6-ab14-96d5-f0cf460b9d7d.png)

### 2. 綺麗なグラデーションの色を決める
ここまで理解できた、綺麗なグラデーションを作る準備ができました。
では、グラデーションを作る時に必要な始点、終点の色を決めていきましょう。

色を決める際には以下のことを注意しましょう。

**a. HSL色空間でグラデーションの色を決める**
RGB上で2点の色を決めると、前述したような真ん中がグレーになりやすいです。
そのため、HSL空間上、特にHueのフェードを元に2点決めましょう。

**b. 始点のHueの値と終点のHueの値の差が180ある色にはしない**
Hueの値を+-180した値は、補色と言われます。
補色のグラデーションでは、色をコントロールするのが難しくなります。
そのため、初めのうちは補色のグラデーションさけましょう。

具体的にはこんな感じです。↓

```
始点: HSL(260, 50, 50)
終点: HSL(340, 50, 50)
```
このように、**Hueだけが変化するような2点を決め、Hueの変化量が180にならない値**にする。

### 3. グラデーションを作る
始点、終点の色が決まったら、グラデーションを作っていきます。

グラデーションを作る際には以下のことを注意しましょう。

**a. Hueのフェードで、複数の色を用意する**
ここまで、HSLを押してきましたが、実はCSSではHSLで色を指定しても、RGB空間上で色が変化します...
そのため、HSL上のグラデーションで何色か用意して、RGBで指定できるようにしておきましょう。


始点: HSL(260, 50, 50) → RGB(191, 64, 106)
終点: HSL(340, 50, 50) → RGB(106, 64, 191)
のグラデーションを作るとこんな感じになります。

![4.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/798cd690-cb83-df48-1f44-c49c0598612d.png)

見た目ではわかりにくいですが、中間のところでRとBが近くなるので、少しくすんだ紫になっています。
そのため、中間点を設けて、

始点: HSL(260, 50, 50) → RGB(191, 64, 106)
中間点１： HSL(280, 50, 50) → RGB(191, 64, 149)
中間点2： HSL(300, 50, 50) → RGB(191, 64, 106)
中間点3： HSL(320, 50, 50) → RGB(170, 0, 255)
終点: HSL(340, 50, 50) → RGB(106, 64, 191)

Hueを20ずつ変化させるようなグラデーションにするとこんな感じになります。
![5.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/59f3fa4f-5a44-8a04-71df-0e59d52cc171.png)

このように、Hueの変化で、２~3点ほど、用意することで、くすんだグラデーションになることなく、
綺麗なグラデーションを作ることができます。

## おすすめCSSグラデーションジェネレーター

ここまで色々記載しましたが、グラデーションジェネレーターから、
好きなグラデーションを選ぶのが1番楽です。笑

そのため、おすすめCSSグラデーションジェネレーターのリンクを記載しておきます。
どうしても、いい感じのグラデーションを作れない方は、
この辺りのサイトから、お気に入りのグラデーションを選んで、使いましょう。

### CSS Gradient
https://cssgradient.io/

|![スクリーンショット 2022-04-08 1.43.55.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/7e970752-7bc7-62fa-52ed-c46f6281f594.png)|
|--|

### Fuze
https://fuze.8bit.codes/

|![スクリーンショット 2022-04-08 1.45.24.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/e1b2766d-3acc-15a3-b5c5-3b22eaba7b9c.png)|
|--|

### CoolHue
https://webkul.github.io/coolhue/

|![スクリーンショット 2022-04-08 1.45.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/0171dc2d-98a2-1d79-d2f2-7f7c37862632.png)|
|--|

### Mesh Gradients
https://products.ls.graphics/mesh-gradients/

|![スクリーンショット 2022-04-08 1.46.12.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/9b2f10d1-23f7-849d-2899-46feb17374e4.png)|
|--|

### Gradient Hunt
https://gradienthunt.com/

|![スクリーンショット 2022-04-08 1.46.26.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/50567b95-d672-1ecd-d408-f1fb3fc3735a.png)|
|--|

### EggGradients
https://www.eggradients.com/

|![スクリーンショット 2022-04-08 1.47.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/84f14635-2d7c-8571-92fd-8da873df08ba.png)|
|--|

### Grabient
https://www.grabient.com/

|![スクリーンショット 2022-04-08 1.48.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/e7d49ba6-7b43-2bf4-b719-b9c58f616efd.png)|
|--|

### uiGradients
https://uigradients.com/#AzurLane

|![スクリーンショット 2022-04-08 1.48.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/17889348-b1ce-2496-9c49-f7e872ad20f9.png)|
|--|

### WebGradients
https://webgradients.com/

|![スクリーンショット 2022-04-08 1.48.51.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/557170f5-b19c-e270-5b82-130bc52831c8.png)|
|--|

### GradPad
http://ourownthing.co.uk/gradpad.html

|![スクリーンショット 2022-04-08 1.49.09.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/390720/0163fc18-a5bb-d41e-4434-9e49d4c2072b.png)|
|--|

---

最後まで読んでくださってありがとうございます！

普段はデザインやフロントエンドを中心にQiitaに記事を投稿しているので、ぜひQiitaのフォローとX(Twitter)のフォローをお願いします。

https://twitter.com/degudegu2510