キーワードノート キーワードノート

Tailwind CSSで指定できる背景色のカラーパレット（classとカラーコードまとめ）

Web、IT関連 HTML・CSS

Tailwind CSSで背景色を指定する際に下記のようにclassを付けるだけで様々なカラーを使えますが、どのようなカラーがあるのか現時点のバージョンすべて書き出しました。
<div class="bg-gray-50">ここにコンテンツ</div>

指定する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

X f LINE B!

コメント (0)

まだコメントはありません。

コメントを書く

あなたのメールアドレスは公開されません。

「ぶいすぽっ！」YouTubeとTwitchの個別・合計の並び替え可能な登録者数ランキング AI「Gemini」で出力されるコードにはコメントアウト表示されないので注意