LoginSignup
0

More than 1 year has passed since last update.

posted at

updated at

Windi CSS (カラー)

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

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
What you can do with signing up
0