Tailwind CSSを使っている時に背景色で使えるカラーバリアーションをまとめました。
使い方は以下のように背景色を付けたいclassに指定するだけです。
<div class="bg-gray-50"></div>コンテンツのブロック
カラー名と濃淡の数字を入力することで様々なカラーを使えます。
classと、使われるカラーコード、そして実際に表示されるカラーを一覧（カラーパレット）にしていますのでご覧ください。
基本のカラー
black（ブラック）
| bg-black | #000000 |
|---|
white（ホワイト）
| bg-white | #FFFFFF |
|---|
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 |