Tailwind CSSで指定できる背景色のclassとカラーコードのカラーサンプルまとめ
Tailwind CSSで背景色を指定する際に<div class="bg-gray-50"></div>ここにコンテンツのようにclassを付けるだけで様々なカラーを使えますが、どのようなカラーがあるのか現時点のバージョンをすべて書き出しました。
指定するclassと、実際に表示されるカラーとカラーコードをまとめましたので、Tailwindをお使いの方は是非ご利用ください。
目次
基本色
bg-black
#000000
bg-white
#FFFFFF
bg-transparent
transparent
bg-current
currentColor
グレー系
gray（グレー）
bg-gray-50
#F9FAFB
bg-gray-100
#F3F4F6
bg-gray-200
#E5E7EB
bg-gray-300
#D1D5DB
bg-gray-400
#9CA3AF
bg-gray-500
#6B7280
bg-gray-600
#4B5563
bg-gray-700
#374151
bg-gray-800
#1F2937
bg-gray-900
#111827
bg-gray-950
#030712
slate（スレート）
bg-slate-50
#F8FAFC
bg-slate-100
#F1F5F9
bg-slate-200
#E2E8F0
bg-slate-300
#CBD5E1
bg-slate-400
#94A3B8
bg-slate-500
#64748B
bg-slate-600
#475569
bg-slate-700
#334155
bg-slate-800
#1E293B
bg-slate-900
#0F172A
bg-slate-950
#020617
zinc（ジンク）
bg-zinc-50
#FAFAFA
bg-zinc-100
#F4F4F5
bg-zinc-200
#E4E4E7
bg-zinc-300
#D4D4D8
bg-zinc-400
#A1A1AA
bg-zinc-500
#71717A
bg-zinc-600
#52525B
bg-zinc-700
#3F3F46
bg-zinc-800
#27272A
bg-zinc-900
#18181B
bg-zinc-950
#09090B
neutral（ニュートラル）
bg-neutral-50
#FAFAFA
bg-neutral-100
#F5F5F5
bg-neutral-200
#E5E5E5
bg-neutral-300
#D4D4D4
bg-neutral-400
#A3A3A3
bg-neutral-500
#737373
bg-neutral-600
#525252
bg-neutral-700
#404040
bg-neutral-800
#262626
bg-neutral-900
#171717
bg-neutral-950
#0A0A0A
stone（ストーン）
bg-stone-50
#FAFAF9
bg-stone-100
#F5F5F4
bg-stone-200
#E7E5E4
bg-stone-300
#D6D3D1
bg-stone-400
#A8A29E
bg-stone-500
#78716C
bg-stone-600
#57534E
bg-stone-700
#44403C
bg-stone-800
#292524
bg-stone-900
#1C1917
bg-stone-950
#0C0A09
レッド系
red（レッド）
bg-red-50
#FEF2F2
bg-red-100
#FEE2E2
bg-red-200
#FECACA
bg-red-300
#FCA5A5
bg-red-400
#F87171
bg-red-500
#EF4444
bg-red-600
#DC2626
bg-red-700
#B91C1C
bg-red-800
#991B1B
bg-red-900
#7F1D1D
bg-red-950
#450A0A
rose（ローズ）
bg-rose-50
#FFF1F2
bg-rose-100
#FFE4E6
bg-rose-200
#FECDD3
bg-rose-300
#FDA4AF
bg-rose-400
#FB7185
bg-rose-500
#F43F5E
bg-rose-600
#E11D48
bg-rose-700
#BE123C
bg-rose-800
#9F1239
bg-rose-900
#881337
bg-rose-950
#4C0519
pink（ピンク）
bg-pink-50
#FDF2F8
bg-pink-100
#FCE7F3
bg-pink-200
#FBCFE8
bg-pink-300
#F9A8D4
bg-pink-400
#F472B6
bg-pink-500
#EC4899
bg-pink-600
#DB2777
bg-pink-700
#BE185D
bg-pink-800
#9D174D
bg-pink-900
#831843
bg-pink-950
#500724
purple（パープル）
bg-purple-50
#FAF5FF
bg-purple-100
#F3E8FF
bg-purple-200
#E9D5FF
bg-purple-300
#D8B4FE
bg-purple-400
#C084FC
bg-purple-500
#A855F7
bg-purple-600
#9333EA
bg-purple-700
#7E22CE
bg-purple-800
#6B21A8
bg-purple-900
#581C87
bg-purple-950
#3B0764
fuchsia（フクシア）
bg-fuchsia-50
#FDF4FF
bg-fuchsia-100
#FAE8FF
bg-fuchsia-200
#F5D0FE
bg-fuchsia-300
#F0ABFC
bg-fuchsia-400
#E879F9
bg-fuchsia-500
#D946EF
bg-fuchsia-600
#C026D3
bg-fuchsia-700
#A21CAF
bg-fuchsia-800
#86198F
bg-fuchsia-900
#701A75
bg-fuchsia-950
#4A044E
violet（バイオレット）
bg-violet-50
#F5F3FF
bg-violet-100
#EDE9FE
bg-violet-200
#DDD6FE
bg-violet-300
#C4B5FD
bg-violet-400
#A78BFA
bg-violet-500
#8B5CF6
bg-violet-600
#7C3AED
bg-violet-700
#6D28D9
bg-violet-800
#5B21B6
bg-violet-900
#4C1D95
bg-violet-950
#2E1065
indigo（インディゴ）
bg-indigo-50
#EEF2FF
bg-indigo-100
#E0E7FF
bg-indigo-200
#C7D2FE
bg-indigo-300
#A5B4FC
bg-indigo-400
#818CF8
bg-indigo-500
#6366F1
bg-indigo-600
#4F46E5
bg-indigo-700
#4338CA
bg-indigo-800
#3730A3
bg-indigo-900
#312E81
bg-indigo-950
#1E1B4B
blue（ブルー）
bg-blue-50
#EFF6FF
bg-blue-100
#DBEAFE
bg-blue-200
#BFDBFE
bg-blue-300
#93C5FD
bg-blue-400
#60A5FA
bg-blue-500
#3B82F6
bg-blue-600
#2563EB
bg-blue-700
#1D4ED8
bg-blue-800
#1E40AF
bg-blue-900
#1E3A8A
bg-blue-950
#172554
sky（スカイ）
bg-sky-50
#F0F9FF
bg-sky-100
#E0F2FE
bg-sky-200
#BAE6FD
bg-sky-300
#7DD3FC
bg-sky-400
#38BDF8
bg-sky-500
#0EA5E9
bg-sky-600
#0284C7
bg-sky-700
#0369A1
bg-sky-800
#075985
bg-sky-900
#0C4A6E
bg-sky-950
#082F49
cyan（シアン）
bg-cyan-50
#ECFEFF
bg-cyan-100
#CFFAFE
bg-cyan-200
#A5F3FC
bg-cyan-300
#67E8F9
bg-cyan-400
#22D3EE
bg-cyan-500
#06B6D4
bg-cyan-600
#0891B2
bg-cyan-700
#0E7490
bg-cyan-800
#155E75
bg-cyan-900
#164E63
bg-cyan-950
#083344
グリーン系
green（グリーン）
bg-green-50
#F0FDF4
bg-green-100
#DCFCE7
bg-green-200
#BBF7D0
bg-green-300
#86EFAC
bg-green-400
#4ADE80
bg-green-500
#22C55E
bg-green-600
#16A34A
bg-green-700
#15803D
bg-green-800
#166534
bg-green-900
#14532D
bg-green-950
#052E16
emerald（エメラルド）
bg-emerald-50
#ECFDF5
bg-emerald-100
#D1FAE5
bg-emerald-200
#A7F3D0
bg-emerald-300
#6EE7B7
bg-emerald-400
#34D399
bg-emerald-500
#10B981
bg-emerald-600
#059669
bg-emerald-700
#047857
bg-emerald-800
#065F46
bg-emerald-900
#064E3B
bg-emerald-950
#022C22
teal（ティール）
bg-teal-50
#F0FDFA
bg-teal-100
#CCFBF1
bg-teal-200
#99F6E4
bg-teal-300
#5EEAD4
bg-teal-400
#2DD4BF
bg-teal-500
#14B8A6
bg-teal-600
#0D9488
bg-teal-700
#0F766E
bg-teal-800
#115E59
bg-teal-900
#134E4A
bg-teal-950
#042F2E
lime（ライム）
bg-lime-50
#F7FEE7
bg-lime-100
#ECFCCB
bg-lime-200
#D9F99D
bg-lime-300
#BEF264
bg-lime-400
#A3E635
bg-lime-500
#84CC16
bg-lime-600
#65A30D
bg-lime-700
#4D7C0F
bg-lime-800
#3F6212
bg-lime-900
#365314
bg-lime-950
#1A2E05
yellow（イエロー）
bg-yellow-50
#FEFCE8
bg-yellow-100
#FEF9C3
bg-yellow-200
#FEF08A
bg-yellow-300
#FDE047
bg-yellow-400
#FACC15
bg-yellow-500
#EAB308
bg-yellow-600
#CA8A04
bg-yellow-700
#A16207
bg-yellow-800
#854D0E
bg-yellow-900
#713F12
bg-yellow-950
#422006
amber（アンバー）
bg-amber-50
#FFFBEB
bg-amber-100
#FEF3C7
bg-amber-200
#FDE68A
bg-amber-300
#FCD34D
bg-amber-400
#FBBF24
bg-amber-500
#F59E0B
bg-amber-600
#D97706
bg-amber-700
#B45309
bg-amber-800
#92400E
bg-amber-900
#78350F
bg-amber-950
#451A03
orange（オレンジ）
bg-orange-50
#FFF7ED
bg-orange-100
#FFEDD5
bg-orange-200
#FED7AA
bg-orange-300
#FDBA74
bg-orange-400
#FB923C
bg-orange-500
#F97316
bg-orange-600
#EA580C
bg-orange-700
#C2410C
bg-orange-800
#9A3412
bg-orange-900
#7C2D12
bg-orange-950
#431407
brown（ブラウン）
bg-brown-50
#FDF8F6
bg-brown-100
#F2E8E5
bg-brown-200
#EADDDA
bg-brown-300
#E0CEC7
bg-brown-400
#D2BAB0
bg-brown-500
#BFA094
bg-brown-600
#A18072
bg-brown-700
#977669
bg-brown-800
#846358
bg-brown-900
#43302B
コメント (0)
まだコメントはありません。
コメントを書く
-
Premiere Pro「ビデオトランジション」一覧
動画編集ソフトのAdobe Premiere Pro(プレミアプロ)で標準で用…
-
VSCode・Cursorでタブが表示されない場合の対応方法
コードエディタ「Visual Studio Code」(VSCode)と「Cursor」で…
-
イラストレーターで「くの字」のような矢印の形のをしたフローを作る方法
Adobe Illustrator(イラレ、イラストレーター)で、くの字型をし…
-
VSCode・Cursorで選択した単語を1つずつ順に選択するショートカットと選択取消も解説
コードエディタ「Visual Studio Code」（VSCode）と「Cursor」…
うぽつ