2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 3 years have passed since last update.

Windi CSS (カラー)

Last updated at Posted at 2022-03-15

Windi CSSを使用するに当たって、見やすくまとめてみました。

Colors(色)

pink(ピンク)

スクリーンショット 2022-03-15 7.50.00.png

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

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

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
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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

50
4a4a4a
100
3c3c3c
200
323232
300
2d2d2d
400
222222
500
1f1f1f
600
1c1c1e
700
1b1b1b
800
181818
900
0f0f0f
2
0
1

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
0

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?