Color Codes

Purpose

Cut/paste to CSS vars

Usage

Web Apps:

Ex: Use in @@/src/assets/styles/fleet.css

Data

-------- amber --------
#fffbeb; /* amber-50 */
#fef3c7; /* amber-100 */
#fde68a; /* amber-200 */
#fcd34d; /* amber-300 */
#fbbf24; /* amber-400 */
#f59e0b; /* amber-500 */
#d97706; /* amber-600 */
#b45309; /* amber-700 */
#92400e; /* amber-800 */
#78350f; /* amber-900 */
#451a03; /* amber-950 */

-------- blue --------
#eff6ff; /* blue-50 */
#dbeafe; /* blue-100 */
#bfdbfe; /* blue-200 */
#93c5fd; /* blue-300 */
#60a5fa; /* blue-400 */
#3b82f6; /* blue-500 */
#2563eb; /* blue-600 */
#1d4ed8; /* blue-700 */
#1e40af; /* blue-800 */
#1e3a8a; /* blue-900 */
#172554; /* blue-950 */

-------- Cyan --------
#ecfeff; /* cyan-50 */
#cffafe; /* cyan-100 */
#a5f3fc; /* cyan-200 */
#67e8f9; /* cyan-300 */
#0891b2; /* cyan-400 */
#14b8a6; /* cyan-500 */
#0891b2; /* cyan-600 */
#0e7490; /* cyan-700 */ /* rgb(14 116 144) */
#155e75; /* cyan-800 */
#164e63; /* cyan-900 */
#083344; /* cyan-950 */

-------- emerald --------
#ecfdf5; /* emerald-50 */
#d1fae5; /* emerald-100 */
#a7f3d0; /* emerald-200 */
#6ee7b7; /* emerald-300 */
#34d399; /* emerald-400 */
#10b981; /* emerald-500 */
#059669; /* emerald-600 */
#047857; /* emerald-700 */
#065f46; /* emerald-800 */
#064e3b; /* emerald-900 */
#022c22; /* emerald-950 */

-------- fuchsia --------
#fdf4ff; /* fuchsia-50 */
#fae8ff; /* fuchsia-100 */
#f5d0fe; /* fuchsia-200 */
#f0abfc; /* fuchsia-300 */
#e879f9; /* fuchsia-400 */
#d946ef; /* fuchsia-500 */
#c026d3; /* fuchsia-600 */
#a21caf; /* fuchsia-700 */
#86198f; /* fuchsia-800 */
#701a75; /* fuchsia-900 */
#4a044e; /* fuchsia-950 */

-------- Gray --------
#f9fafb; /* gray-50 */
#f3f4f6; /* gray-100 */
#e2e8f0; /* gray-200 */
#cbd5e1; /* gray-300 */
#94a3b8; /* gray-400 */
#64748b; /* gray-500 */
#475569; /* gray-600 */
#334155; /* gray-700 */
#1e293b; /* gray-800 */
#0f172a; /* gray-900 */
#020617; /* gray-950 */

-------- green --------
#f0fdf4; /* green-50 */
#ecfccb; /* green-100 */
#d9f99d; /* green-200 */
#bef264; /* green-300 */
#a3e635; /* green-400 */
#84cc16; /* green-500 */
#65a30d; /* green-600 */
#4d7c0f; /* green-700 */
#3f6212; /* green-800 */
#365314; /* green-900 */
#1a2e05; /* green-950 */

-------- indigo --------
#eef2ff; /* indigo-50 */
#e0e7ff; /* indigo-100 */
#c7d2fe; /* indigo-200 */
#a5b4fc; /* indigo-300 */
#818cf8; /* indigo-400 */
#6366f1; /* indigo-500 */
#4f46e5; /* indigo-600 */
#4338ca; /* indigo-700 */
#3730a3; /* indigo-800 */
#312e81; /* indigo-900 */
#1e1b4b; /* indigo-950 */

-------- Lime --------
#f7fee7; /* lime-50 */
#ecfccb; /* lime-100 */
#d9f99d; /* lime-200 */
#bef264; /* lime-300 */
#a3e635; /* lime-400 */
#84cc16; /* lime-500 */
#65a30d; /* lime-600 */
#4d7c0f; /* lime-700 */
#3f6212; /* lime-800 */
#365314; /* lime-900 */
#1a2e05; /* lime-950 */

-------- neutral --------
#fafafa; /* neutral-50 */
#f5f5f5; /* neutral-100 */
#e5e5e5; /* neutral-200 */
#d4d4d4; /* neutral-300 */
#a3a3a3; /* neutral-400 */
#737373; /* neutral-500 */
#525252; /* neutral-600 */
#404040; /* neutral-700 */
#262626; /* neutral-800 */
#171717; /* neutral-900 */
#0a0a0a; /* neutral-950 */

-------- Orange --------
#fff7ed; /* orange-50 */
#ffedd5; /* orange-100 */
#fed7aa; /* orange-200 */
#fdba74; /* orange-300 */
#fb923c; /* orange-400 */
#f97316; /* orange-500 */
#ea580c; /* orange-600 */
#c2410c; /* orange-700 */
#9a3412; /* orange-800 */
#7c2d12; /* orange-900 */
#431407; /* orange-950 */

-------- pink --------
#fdf2f8; /* pink-50 */
#fce7f3; /* pink-100 */
#fbcfe8; /* pink-200 */
#f9a8d4; /* pink-300 */
#f472b6; /* pink-400 */
#ec4899; /* pink-500 */
#db2777; /* pink-600 */
#be185d; /* pink-700 */
#9d174d; /* pink-800 */
#831843; /* pink-900 */
#500724; /* pink-950 */

-------- purple --------
#faf5ff; /* purple-50 */
#f3e8ff; /* purple-100 */
#e9d5ff; /* purple-200 */
#d8b4fe; /* purple-300 */
#c084fc; /* purple-400 */
#a855f7; /* purple-500 */
#9333ea; /* purple-600 */
#7e22ce; /* purple-700 */
#6b21a8; /* purple-800 */
#581c87; /* purple-900 */
#3b0764; /* purple-950 */

-------- Red --------
#fef2f2; /* red-50 */
#fee2e2; /* red-100 */
#fecaca; /* red-200 */
#fca5a5; /* red-300 */
#f87171; /* red-400 */
#ef4444; /* red-500 */
#dc2626; /* red-600 */
#b91c1c; /* red-700 */
#991b1b; /* red-800 */
#7f1d1d; /* red-900 */
#450a0a; /* red-950 */

-------- rose --------
#fff1f2; /* rose-50 */
#ffe4e6; /* rose-100 */
#fecdd3; /* rose-200 */
#fda4af; /* rose-300 */
#fb7185; /* rose-400 */
#f43f5e; /* rose-500 */
#e11d48; /* rose-600 */
#be123c; /* rose-700 */
#9f1239; /* rose-800 */
#881337; /* rose-900 */
#4c0519; /* rose-950 */

-------- sky --------
#f0f9ff; /* sky-50 */
#e0f2fe; /* sky-100 */
#bae6fd; /* sky-200 */
#7dd3fc; /* sky-300 */
#38bdf8; /* sky-400 */
#0ea5e9; /* sky-500 */
#0284c7; /* sky-600 */
#0369a1; /* sky-700 */
#075985; /* sky-800 */
#0c4a6e; /* sky-900 */
#082f49; /* sky-950 */

-------- slate --------
#f8fafc; /* slate-50 */
#f1f5f9; /* slate-100 */
#e2e8f0; /* slate-200 */
#cbd5e1; /* slate-300 */
#94a3b8; /* slate-400 */
#64748b; /* slate-500 */
#475569; /* slate-600 */
#334155; /* slate-700 */
#1e293b; /* slate-800 */
#0f172a; /* slate-900 */
#020617; /* slate-950 */

-------- stone --------
#fafaf9; /* stone-50 */
#f5f5f4; /* stone-100 */
#e7e5e4; /* stone-200 */
#d6d3d1; /* stone-300 */
#a8a29e; /* stone-400 */
#ef4444; /* stone-500 */
#dc2626; /* stone-600 */
#b91c1c; /* stone-700 */
#991b1b; /* stone-800 */
#7f1d1d; /* stone-900 */
#450a0a; /* stone-950 */

-------- teal --------
#f0fdfa; /* teal-50 */
#ccfbf1; /* teal-100 */
#99f6e4; /* teal-200 */
#5eead4; /* teal-300 */
#2dd4bf; /* teal-400 */
#14b8a6; /* teal-500 */
#0d9488; /* teal-600 */
#0f766e; /* teal-700 */
#115e59; /* teal-800 */
#134e4a; /* teal-900 */
#042f2e; /* teal-950 */

-------- yellow --------
#fefce8; /* yellow-50 */
#fef9c3; /* yellow-100 */
#fef08a; /* yellow-200 */
#fde047; /* yellow-300 */
#facc15; /* yellow-400 */
#eab308; /* yellow-500 */
#ca8a04; /* yellow-600 */
#a16207; /* yellow-700 */
#854d0e; /* yellow-800 */
#713f12; /* yellow-900 */
#422006; /* yellow-950 */

-------- zinc --------
#fafafa; /* zinc-50 */
#f4f4f5; /* zinc-100 */
#e4e4e7; /* zinc-200 */
#d4d4d8; /* zinc-300 */
#9ca3af; /* zinc-400 */
#6b7280; /* zinc-500 */
#4b5563; /* zinc-600 */
#374151; /* zinc-700 */
#27272a; /* zinc-800 */
#18181b; /* zinc-900 */
#09090b; /* zinc-950 */