Tailwind CSSの背景色ごとのclassとカラーコード、カラーサンプル一覧
Tailwind CSSを使っている時に背景色で使えるカラーバリアーションをまとめました。
使い方は以下のように背景色を付けたいclassに指定するだけです。
<div class="bg-gray-50"></div>コンテンツのブロック
カラー名と濃淡の数字を入力することで様々なカラーを使えます。
classと、使われるカラーコード、そして実際に表示されるカラーを一覧（カラーパレット）にしていますのでご覧ください。
基本のカラー
black（ブラック）
white（ホワイト）
transparent（透明）
| bg-transparent |
transparent |
|
グレー系
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 |
|
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 |
|
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 |
|
イエロー・オレンジ系
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（ブラウン）
| brown-100 |
#F5E6D3 |
|
| brown-300 |
#C19A6B |
|
| brown-500 |
#8B5A2B |
|
| brown-700 |
#5C4033 |
|
| brown-900 |
#3E2723 |
|