Windi CSS (カラー)

Windi CSSを使用するに当たって、見やすくまとめてみました。
# Colors(色)
## pink(ピンク)
![スクリーンショット 2022-03-15 7.50.00.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/811090d3-c68c-63ec-8348-01e19fd1368f.png)
```c
50
#fdf2f8
100
#fce7f3
200
#fbcfe8
300
#f9a8d4
400
#f472b6
500
#ec4899
600
#db2777
700
#be185d
800
#9d174d
900
#831843
```
## rose(ローズ)
![スクリーンショット 2022-03-15 8.09.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/f934567b-1fb7-4d73-28d9-e7968a588ae5.png)
```c
50
＃fff1f2
100
＃ffe4e6
200
＃fecdd3
300
＃fda4af
400
＃fb7185
500
＃f43f5e
600
＃e11d48
700
＃be123c
800
＃9f1239
900
＃881337
```
## red(赤)
![スクリーンショット 2022-03-15 8.15.08.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/5ffe8012-e00f-8c72-d714-e15c0509fae0.png)
```c
50
＃fef2f2
100
＃fee2e2
200
#fecaca
300
＃fca5a5
400
＃f87171
500
＃ef4444
600
＃dc2626
700
＃b91c1c
800
＃991b1b
900
＃7f1d1d
```
## orange(オレンジ)
![スクリーンショット 2022-03-15 8.16.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/f4a97629-60be-264c-29b7-eaa12ef4814c.png)
50
#fff7ed
100
#ffedd5
200
#fed7aa
300
#fdba74
400
#fb923c
500
#f97316
600
#ea580c
700
#c2410c
800
#9a3412
900
#7c2d12
## yellow(黄色)
![スクリーンショット 2022-03-15 8.20.35.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/18bdeaf8-1297-8d79-293d-9d54f5643435.png)
```c
50
#fffbeb
100
#fef3c7
200
#fde68a
300
#fcd34d
400
#fbbf24
500
#f59e0b
600
#d97706
700
#b45309
800
#92400e
900
#78350f
```
## amber(コハク)
![スクリーンショット 2022-03-15 8.22.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/c0f43742-7cd9-d712-6a91-639eb3e4bfab.png)
```c
50
#fffbeb
100
＃fef3c7
200
＃fde68a
300
＃fcd34d
400
＃fbbf24
500
＃f59e0b
600
＃d97706
700
＃b45309
800
＃92400e
900
＃78350f
```
## lime(ライム)
![スクリーンショット 2022-03-15 8.28.52.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/1f57a976-6a1b-170a-f5e0-8558df65debb.png)
```c
50
＃f7fee7
100
#ecfccb
200
＃d9f99d
300
＃bef264
400
＃a3e635
500
＃84cc16
600
＃65a30d
700
＃4d7c0f
800
＃3f6212
900
＃365314
```
## green(グリーン)
![スクリーンショット 2022-03-15 8.29.48.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/9eea14c7-405d-ba9a-a5f8-b42b49ed6f57.png)
```c
50
＃ecfdf5
100
＃d1fae5
200
＃a7f3d0
300
＃6ee7b7
400
＃34d399
500
＃10b981
600
＃059669
700
＃047857
800
＃065f46
900
＃064e3b
```
## emerald(エメラルド)
![スクリーンショット 2022-03-15 8.30.49.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/d54985c9-e02f-1105-028a-59d1c9202000.png)
```c
50
＃ecfdf5
100
＃d1fae5
200
＃a7f3d0
300
＃6ee7b7
400
＃34d399
500
＃10b981
600
＃059669
700
＃047857
800
＃065f46
900
＃064e3b
```
## teal(青緑)
![スクリーンショット 2022-03-15 8.34.45.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/51e4deac-a6e8-e63d-6bc9-e2921307cb25.png)
```c
50
＃f0fdfa
100
＃ccfbf1
200
＃99f6e4
300
＃5eead4
400
＃2dd4bf
500
＃14b8a6
600
＃0d9488
700
＃0f766e
800
＃115e59
900
＃134e4a
```
## cyan(シアン)
![スクリーンショット 2022-03-15 8.36.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/bb786ef1-63f6-2e8d-effd-d57a97987e14.png)
```c
50
#ecfeff
100
#cffafe
200
＃a5f3fc
300
＃67e8f9
400
＃22d3ee
500
＃06b6d4
600
＃0891b2
700
＃0e7490
800
＃155e75
900
＃164e63
```
## sky(空)
![スクリーンショット 2022-03-15 8.38.25.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/3f528c66-ec44-1551-1c0d-c557666d9887.png)
```c
50
＃f0f9ff
100
＃e0f2fe
200
＃bae6fd
300
＃7dd3fc
400
＃38bdf8
500
＃0ea5e9
600
＃0284c7
700
＃0369a1
800
＃075985
900
＃0c4a6e
```
## blue(青)
![スクリーンショット 2022-03-15 8.40.03.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/fb1fc947-a365-37de-d365-eb14bcef3ddd.png)
```c
50
＃eff6ff
100
#dbeafe
200
#bfdbfe
300
＃93c5fd
400
＃60a5fa
500
＃3b82f6
600
＃2563eb
700
＃1d4ed8
800
＃1e40af
900
＃1e3a8a
```
## indigo(ネイビー)
![スクリーンショット 2022-03-15 8.49.07.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/e6195b49-5b86-db25-5cb8-9832426521bd.png)
```c
50
＃eef2ff
100
＃e0e7ff
200
＃c7d2fe
300
＃a5b4fc
400
＃818cf8
500
＃6366f1
600
＃4f46e5
700
＃4338ca
800
＃3730a3
900
＃312e81
```
## purple(紫)
![スクリーンショット 2022-03-15 8.53.20.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/a2e9c24b-813b-5c19-08b1-406a2e4a1e7d.png)
```c
50
＃f5f3ff
100
＃ede9fe
200
＃ddd6fe
300
＃c4b5fd
400
＃a78bfa
500
＃8b5cf6
600
＃7c3aed
700
＃6d28d9
800
＃5b21b6
900
＃4c1d95
```
## violet(スミレ)
![スクリーンショット 2022-03-15 8.55.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/e7b2cc45-d227-6c0c-014f-89c21d24bf72.png)
```c
50
＃f5f3ff
100
＃ede9fe
200
＃ddd6fe
300
＃c4b5fd
400
＃a78bfa
500
＃8b5cf6
600
＃7c3aed
700
＃6d28d9
800
＃5b21b6
900
＃4c1d95
```
## fuchsia(マゼンタ)
![スクリーンショット 2022-03-15 8.57.30.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/651008fc-b443-fc6c-26f6-fad80b070e2c.png)
```c
50
＃fdf4ff
100
＃fae8ff
200
＃f5d0fe
300
＃f0abfc
400
＃e879f9
500
＃d946ef
600
＃c026d3
700
＃a21caf
800
＃86198f
900
＃701a75
```
## gray(グレー)
![スクリーンショット 2022-03-15 9.06.40.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/c352ccd7-7bf1-8834-3db6-1a3731a7baa8.png)
```c
50
＃f9fafb
100
＃f3f4f6
200
＃e5e7eb
300
＃d1d5db
400
＃9ca3af
500
＃6b7280
600
＃4b5563
700
＃374151
800
＃1f2937
900
＃111827
```
## slate(かわら)
![スクリーンショット 2022-03-15 9.08.27.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/9649e9ad-d621-19ce-c169-e21ca2af32cb.png)
```c
50
＃f8fafc
100
＃f1f5f9
200
＃e2e8f0
300
＃cbd5e1
400
＃94A3B8
500
＃64748B
600
＃475569
700
＃334155
800
＃1E293B
900
＃0F172A
```
## stone(石)
![スクリーンショット 2022-03-15 9.09.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/0e48eded-ce8e-5b37-abcc-3ca277558ba7.png)
```c
50
＃fafaf9
100
＃f5f5f4
200
＃e7e5e4
300
＃d6d3d1
400
＃a8a29e
500
＃78716c
600
＃57534e
700
＃44403c
800
＃292524
900
＃1c1917
```
## neutral(オフホワイト)
![スクリーンショット 2022-03-15 9.12.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/6cc007b3-1c06-478d-ae77-a549e28a572b.png)
```c
50
#fafafa
100
＃f5f5f5
200
＃e5e5e5
300
＃d4d4d4
400
＃a3a3a3
500
＃737373
600
＃525252
700
＃404040
800
＃262626
900
＃171717
```
## zinc(亜鉛)
![スクリーンショット 2022-03-15 9.17.33.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/85e4181a-5fff-9dd6-6099-3967a1fc83df.png)
```c
50
#fafafa
100
＃f4f4f5
200
＃e4e4e7
300
＃d4d4d8
400
＃a1a1aa
500
＃71717A
600
＃52525B
700
＃3F3F46
800
＃27272A
900
＃18181B
```
## light(ライト)
![スクリーンショット 2022-03-15 9.19.11.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/d9f0152d-9663-4aae-f3c3-4870dcd19310.png)
```c
50
#fdfdfd
100
#fcfcfc
200
#fafafa
300
＃f8f9fa
400
＃f6f6f6
500
＃f2f2f2
600
＃f1f3f5
700
＃e9ecef
800
＃dee2e6
900
＃dde1e3
```
## dark(ダーク)
![スクリーンショット 2022-03-15 9.21.02.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/1134006/52187afa-d703-7664-fc8b-390cb2341c96.png)
```c
50
＃4a4a4a
100
＃3c3c3c
200
＃323232
300
＃2d2d2d
400
＃222222
500
＃1f1f1f
600
＃1c1c1e
700
＃1b1b1b
800
＃181818
900
＃0f0f0f
```