Colors - Hex
Tailwind Hex Color Codes
Purpose
Cut/paste to CSS vars
Usage
Web Apps:
Ex: Use in @@/src/assets/styles/fleet.css
Data
--color-amber-50: #fffbeb; /* amber-50 */
--color-amber-100: #fef3c7; /* amber-100 */
--color-amber-200: #fde68a; /* amber-200 */
--color-amber-300: #fcd34d; /* amber-300 */
--color-amber-400: #fbbf24; /* amber-400 */
--color-amber-500: #f59e0b; /* amber-500 */
--color-amber-600: #d97706; /* amber-600 */
--color-amber-700: #b45309; /* amber-700 */
--color-amber-800: #92400e; /* amber-800 */
--color-amber-900: #78350f; /* amber-900 */
--color-amber-950: #451a03; /* amber-950 */
--color-apple-50: #F6FAF2; /* apple-50 */
--color-apple-100: #EEF7E6; /* apple-100 */
--color-apple-200: #D3EBC3; /* apple-200 */
--color-apple-300: #B5DEA2; /* apple-300 */
--color-apple-400: #79C767; /* apple-400 */
--color-apple-500: #3BAE37; /* apple-500 */
--color-apple-600: #319C2D; /* apple-600 */
--color-apple-700: #23821F; /* apple-700 */
--color-apple-800: #176914; /* apple-800 */
--color-apple-900: #0C4F0B; /* apple-900 */
--color-apple-950: #053305; /* apple-950 */
--color-blue-50: #eff6ff; /* blue-50 */
--color-blue-100: #dbeafe; /* blue-100 */
--color-blue-200: #bfdbfe; /* blue-200 */
--color-blue-300: #93c5fd; /* blue-300 */
--color-blue-400: #60a5fa; /* blue-400 */
--color-blue-500: #3b82f6; /* blue-500 */
--color-blue-600: #2563eb; /* blue-600 */
--color-blue-700: #1d4ed8; /* blue-700 */
--color-blue-800: #1e40af; /* blue-800 */
--color-blue-900: #1e3a8a; /* blue-900 */
--color-blue-950: #172554; /* blue-950 */
--color-cyan-50: #ecfeff; /* cyan-50 */
--color-cyan-100: #cffafe; /* cyan-100 */
--color-cyan-200: #a5f3fc; /* cyan-200 */
--color-cyan-300: #67e8f9; /* cyan-300 */
--color-cyan-400: #0891b2; /* cyan-400 */
--color-cyan-500: #14b8a6; /* cyan-500 */
--color-cyan-600: #0891b2; /* cyan-600 */
--color-cyan-700: #0e7490; /* cyan-700 */
--color-cyan-800: #155e75; /* cyan-800 */
--color-cyan-900: #164e63; /* cyan-900 */
--color-cyan-950: #083344; /* cyan-950 */
--color-emerald-50: #ecfdf5; /* emerald-50 */
--color-emerald-100: #d1fae5; /* emerald-100 */
--color-emerald-200: #a7f3d0; /* emerald-200 */
--color-emerald-300: #6ee7b7; /* emerald-300 */
--color-emerald-400: #34d399; /* emerald-400 */
--color-emerald-500: #10b981; /* emerald-500 */
--color-emerald-600: #059669; /* emerald-600 */
--color-emerald-700: #047857; /* emerald-700 */
--color-emerald-800: #065f46; /* emerald-800 */
--color-emerald-900: #064e3b; /* emerald-900 */
--color-emerald-950: #022c22; /* emerald-950 */
--color-fuchsia-50: #fdf4ff; /* fuchsia-50 */
--color-fuchsia-100: #fae8ff; /* fuchsia-100 */
--color-fuchsia-200: #f5d0fe; /* fuchsia-200 */
--color-fuchsia-300: #f0abfc; /* fuchsia-300 */
--color-fuchsia-400: #e879f9; /* fuchsia-400 */
--color-fuchsia-500: #d946ef; /* fuchsia-500 */
--color-fuchsia-600: #c026d3; /* fuchsia-600 */
--color-fuchsia-700: #a21caf; /* fuchsia-700 */
--color-fuchsia-800: #86198f; /* fuchsia-800 */
--color-fuchsia-900: #701a75; /* fuchsia-900 */
--color-fuchsia-950: #4a044e; /* fuchsia-950 */
--color-gray-50: #f9fafb; /* gray-50 */
--color-gray-100: #f3f4f6; /* gray-100 */
--color-gray-200: #e2e8f0; /* gray-200 */
--color-gray-300: #cbd5e1; /* gray-300 */
--color-gray-400: #94a3b8; /* gray-400 */
--color-gray-500: #64748b; /* gray-500 */
--color-gray-600: #475569; /* gray-600 */
--color-gray-700: #334155; /* gray-700 */
--color-gray-800: #1e293b; /* gray-800 */
--color-gray-900: #0f172a; /* gray-900 */
--color-gray-950: #020617; /* gray-950 */
--color-green-50: #f0fdf4; /* green-50 */
--color-green-100: #ecfccb; /* green-100 */
--color-green-200: #d9f99d; /* green-200 */
--color-green-300: #bef264; /* green-300 */
--color-green-400: #a3e635; /* green-400 */
--color-green-500: #84cc16; /* green-500 */
--color-green-600: #65a30d; /* green-600 */
--color-green-700: #4d7c0f; /* green-700 */
--color-green-800: #3f6212; /* green-800 */
--color-green-900: #365314; /* green-900 */
--color-green-950: #1a2e05; /* green-950 */
--color-indigo-50: #eef2ff; /* indigo-50 */
--color-indigo-100: #e0e7ff; /* indigo-100 */
--color-indigo-200: #c7d2fe; /* indigo-200 */
--color-indigo-300: #a5b4fc; /* indigo-300 */
--color-indigo-400: #818cf8; /* indigo-400 */
--color-indigo-500: #6366f1; /* indigo-500 */
--color-indigo-600: #4f46e5; /* indigo-600 */
--color-indigo-700: #4338ca; /* indigo-700 */
--color-indigo-800: #3730a3; /* indigo-800 */
--color-indigo-900: #312e81; /* indigo-900 */
--color-indigo-950: #1e1b4b; /* indigo-950 */
--color-lime-50: #f7fee7; /* lime-50 */
--color-lime-100: #ecfccb; /* lime-100 */
--color-lime-200: #d9f99d; /* lime-200 */
--color-lime-300: #bef264; /* lime-300 */
--color-lime-400: #a3e635; /* lime-400 */
--color-lime-500: #84cc16; /* lime-500 */
--color-lime-600: #65a30d; /* lime-600 */
--color-lime-700: #4d7c0f; /* lime-700 */
--color-lime-800: #3f6212; /* lime-800 */
--color-lime-900: #365314; /* lime-900 */
--color-lime-950: #1a2e05; /* lime-950 */
--color-neutral-50: #fafafa; /* neutral-50 */
--color-neutral-100: #f5f5f5; /* neutral-100 */
--color-neutral-200: #e5e5e5; /* neutral-200 */
--color-neutral-300: #d4d4d4; /* neutral-300 */
--color-neutral-400: #a3a3a3; /* neutral-400 */
--color-neutral-500: #737373; /* neutral-500 */
--color-neutral-600: #525252; /* neutral-600 */
--color-neutral-700: #404040; /* neutral-700 */
--color-neutral-800: #262626; /* neutral-800 */
--color-neutral-900: #171717; /* neutral-900 */
--color-neutral-950: #0a0a0a; /* neutral-950 */
--color-orange-50: #fff7ed; /* orange-50 */
--color-orange-100: #ffedd5; /* orange-100 */
--color-orange-200: #fed7aa; /* orange-200 */
--color-orange-300: #fdba74; /* orange-300 */
--color-orange-400: #fb923c; /* orange-400 */
--color-orange-500: #f97316; /* orange-500 */
--color-orange-600: #ea580c; /* orange-600 */
--color-orange-700: #c2410c; /* orange-700 */
--color-orange-800: #9a3412; /* orange-800 */
--color-orange-900: #7c2d12; /* orange-900 */
--color-orange-950: #431407; /* orange-950 */
--color-pink-50: #fdf2f8; /* pink-50 */
--color-pink-100: #fce7f3; /* pink-100 */
--color-pink-200: #fbcfe8; /* pink-200 */
--color-pink-300: #f9a8d4; /* pink-300 */
--color-pink-400: #f472b6; /* pink-400 */
--color-pink-500: #ec4899; /* pink-500 */
--color-pink-600: #db2777; /* pink-600 */
--color-pink-700: #be185d; /* pink-700 */
--color-pink-800: #9d174d; /* pink-800 */
--color-pink-900: #831843; /* pink-900 */
--color-pink-950: #500724; /* pink-950 */
--color-purple-50: #faf5ff; /* purple-50 */
--color-purple-100: #f3e8ff; /* purple-100 */
--color-purple-200: #e9d5ff; /* purple-200 */
--color-purple-300: #d8b4fe; /* purple-300 */
--color-purple-400: #c084fc; /* purple-400 */
--color-purple-500: #a855f7; /* purple-500 */
--color-purple-600: #9333ea; /* purple-600 */
--color-purple-700: #7e22ce; /* purple-700 */
--color-purple-800: #6b21a8; /* purple-800 */
--color-purple-900: #581c87; /* purple-900 */
--color-purple-950: #3b0764; /* purple-950 */
--color-red-50: #fef2f2; /* red-50 */
--color-red-100: #fee2e2; /* red-100 */
--color-red-200: #fecaca; /* red-200 */
--color-red-300: #fca5a5; /* red-300 */
--color-red-400: #f87171; /* red-400 */
--color-red-500: #ef4444; /* red-500 */
--color-red-600: #dc2626; /* red-600 */
--color-red-700: #b91c1c; /* red-700 */
--color-red-800: #991b1b; /* red-800 */
--color-red-900: #7f1d1d; /* red-900 */
--color-red-950: #450a0a; /* red-950 */
--color-rose-50: #fff1f2; /* rose-50 */
--color-rose-100: #ffe4e6; /* rose-100 */
--color-rose-200: #fecdd3; /* rose-200 */
--color-rose-300: #fda4af; /* rose-300 */
--color-rose-400: #fb7185; /* rose-400 */
--color-rose-500: #f43f5e; /* rose-500 */
--color-rose-600: #e11d48; /* rose-600 */
--color-rose-700: #be123c; /* rose-700 */
--color-rose-800: #9f1239; /* rose-800 */
--color-rose-900: #881337; /* rose-900 */
--color-rose-950: #4c0519; /* rose-950 */
--color-sky-50: #f0f9ff; /* sky-50 */
--color-sky-100: #e0f2fe; /* sky-100 */
--color-sky-200: #bae6fd; /* sky-200 */
--color-sky-300: #7dd3fc; /* sky-300 */
--color-sky-400: #38bdf8; /* sky-400 */
--color-sky-500: #0ea5e9; /* sky-500 */
--color-sky-600: #0284c7; /* sky-600 */
--color-sky-700: #0369a1; /* sky-700 */
--color-sky-800: #075985; /* sky-800 */
--color-sky-900: #0c4a6e; /* sky-900 */
--color-sky-950: #082f49; /* sky-950 */
--color-slate-50: #f8fafc; /* slate-50 */
--color-slate-100: #f1f5f9; /* slate-100 */
--color-slate-200: #e2e8f0; /* slate-200 */
--color-slate-300: #cbd5e1; /* slate-300 */
--color-slate-400: #94a3b8; /* slate-400 */
--color-slate-500: #64748b; /* slate-500 */
--color-slate-600: #475569; /* slate-600 */
--color-slate-700: #334155; /* slate-700 */
--color-slate-800: #1e293b; /* slate-800 */
--color-slate-900: #0f172a; /* slate-900 */
--color-slate-950: #020617; /* slate-950 */
--color-stone-50: #fafaf9; /* stone-50 */
--color-stone-100: #f5f5f4; /* stone-100 */
--color-stone-200: #e7e5e4; /* stone-200 */
--color-stone-300: #d6d3d1; /* stone-300 */
--color-stone-400: #a8a29e; /* stone-400 */
--color-stone-500: #ef4444; /* stone-500 */
--color-stone-600: #dc2626; /* stone-600 */
--color-stone-700: #b91c1c; /* stone-700 */
--color-stone-800: #991b1b; /* stone-800 */
--color-stone-900: #7f1d1d; /* stone-900 */
--color-stone-950: #450a0a; /* stone-950 */
--color-teal-50: #f0fdfa; /* teal-50 */
--color-teal-100: #ccfbf1; /* teal-100 */
--color-teal-200: #99f6e4; /* teal-200 */
--color-teal-300: #5eead4; /* teal-300 */
--color-teal-400: #2dd4bf; /* teal-400 */
--color-teal-500: #14b8a6; /* teal-500 */
--color-teal-600: #0d9488; /* teal-600 */
--color-teal-700: #0f766e; /* teal-700 */
--color-teal-800: #115e59; /* teal-800 */
--color-teal-900: #134e4a; /* teal-900 */
--color-teal-950: #042f2e; /* teal-950 */
--color-yellow-50: #fefce8; /* yellow-50 */
--color-yellow-100: #fef9c3; /* yellow-100 */
--color-yellow-200: #fef08a; /* yellow-200 */
--color-yellow-300: #fde047; /* yellow-300 */
--color-yellow-400: #facc15; /* yellow-400 */
--color-yellow-500: #eab308; /* yellow-500 */
--color-yellow-600: #ca8a04; /* yellow-600 */
--color-yellow-700: #a16207; /* yellow-700 */
--color-yellow-800: #854d0e; /* yellow-800 */
--color-yellow-900: #713f12; /* yellow-900 */
--color-yellow-950: #422006; /* yellow-950 */
--color-zinc-50: #fafafa; /* zinc-50 */
--color-zinc-100: #f4f4f5; /* zinc-100 */
--color-zinc-200: #e4e4e7; /* zinc-200 */
--color-zinc-300: #d4d4d8; /* zinc-300 */
--color-zinc-400: #9ca3af; /* zinc-400 */
--color-zinc-500: #6b7280; /* zinc-500 */
--color-zinc-600: #4b5563; /* zinc-600 */
--color-zinc-700: #374151; /* zinc-700 */
--color-zinc-800: #27272a; /* zinc-800 */
--color-zinc-900: #18181b; /* zinc-900 */
--color-zinc-950: #09090b; /* zinc-950 */