Logo - Open book, behind two sails with text, docs
-tech. annebrown.ca

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 */