TW Color Palette

Tailwind's color palette for StyleZero. Click the color to copy it.





red
0
1
2
3
4
5
6
7
8
9
10
orange
0
1
2
3
4
5
6
7
8
9
10
amber
0
1
2
3
4
5
6
7
8
9
10
yellow
0
1
2
3
4
5
6
7
8
9
10
lime
0
1
2
3
4
5
6
7
8
9
10
green
0
1
2
3
4
5
6
7
8
9
10
emerald
0
1
2
3
4
5
6
7
8
9
10
teal
0
1
2
3
4
5
6
7
8
9
10
cyan
0
1
2
3
4
5
6
7
8
9
10
sky
0
1
2
3
4
5
6
7
8
9
10
blue
0
1
2
3
4
5
6
7
8
9
10
indigo
0
1
2
3
4
5
6
7
8
9
10
violet
0
1
2
3
4
5
6
7
8
9
10
purple
0
1
2
3
4
5
6
7
8
9
10
fuchsia
0
1
2
3
4
5
6
7
8
9
10
pink
0
1
2
3
4
5
6
7
8
9
10
rose
0
1
2
3
4
5
6
7
8
9
10
slate
0
1
2
3
4
5
6
7
8
9
10
gray
0
1
2
3
4
5
6
7
8
9
10
zinc
0
1
2
3
4
5
6
7
8
9
10
neutral
0
1
2
3
4
5
6
7
8
9
10
stone
0
1
2
3
4
5
6
7
8
9
10

Intall

Step1: Add this to your stylezero.json 
	"attributes":{
		"([a-z][a-z\\-]+[a-z]:(?:.+\\s)?)([a-z][a-z0-9]+)([\\s,\\)].*|$)":[[null,null,{"@import":"css-color-names.json"}],"\\1\\2\\3"]
	}
Step2: Create this file with the name css-color-names.json to your project's directory 
{
	"red0":"#fef2f2",
	"red1":"#ffe2e2",
	"red2":"#ffc9c9",
	"red3":"#ffa2a2",
	"red4":"#ff6467",
	"red5":"#fb2c36",
	"red6":"#e7000b",
	"red7":"#c10007",
	"red8":"#9f0712",
	"red9":"#82181a",
	"red10":"#460809",
	"orange0":"#fff7ed",
	"orange1":"#ffedd4",
	"orange2":"#ffd6a7",
	"orange3":"#ffb86a",
	"orange4":"#ff8904",
	"orange5":"#ff6900",
	"orange6":"#f54900",
	"orange7":"#ca3500",
	"orange8":"#9f2d00",
	"orange9":"#7e2a0c",
	"orange10":"#441306",
	"amber0":"#fffbeb",
	"amber1":"#fef3c6",
	"amber2":"#fee685",
	"amber3":"#ffd230",
	"amber4":"#ffb900",
	"amber5":"#fe9a00",
	"amber6":"#e17100",
	"amber7":"#bb4d00",
	"amber8":"#973c00",
	"amber9":"#7b3306",
	"amber10":"#461901",
	"yellow0":"#fefce8",
	"yellow1":"#fef9c2",
	"yellow2":"#fff085",
	"yellow3":"#ffdf20",
	"yellow4":"#fdc700",
	"yellow5":"#f0b100",
	"yellow6":"#d08700",
	"yellow7":"#a65f00",
	"yellow8":"#894b00",
	"yellow9":"#733e0a",
	"yellow10":"#432004",
	"lime0":"#f7fee7",
	"lime1":"#ecfcca",
	"lime2":"#d8f999",
	"lime3":"#bbf451",
	"lime4":"#9ae600",
	"lime5":"#7ccf00",
	"lime6":"#5ea500",
	"lime7":"#497d00",
	"lime8":"#3c6300",
	"lime9":"#35530e",
	"lime10":"#192e03",
	"green0":"#f0fdf4",
	"green1":"#dcfce7",
	"green2":"#b9f8cf",
	"green3":"#7bf1a8",
	"green4":"#05df72",
	"green5":"#00c950",
	"green6":"#00a63e",
	"green7":"#008236",
	"green8":"#016630",
	"green9":"#0d542b",
	"green10":"#032e15",
	"emerald0":"#ecfdf5",
	"emerald1":"#d0fae5",
	"emerald2":"#a4f4cf",
	"emerald3":"#5ee9b5",
	"emerald4":"#00d492",
	"emerald5":"#00bc7d",
	"emerald6":"#009966",
	"emerald7":"#007a55",
	"emerald8":"#006045",
	"emerald9":"#004f3b",
	"emerald10":"#002c22",
	"teal0":"#f0fdfa",
	"teal1":"#cbfbf1",
	"teal2":"#96f7e4",
	"teal3":"#46ecd5",
	"teal4":"#00d5be",
	"teal5":"#00bba7",
	"teal6":"#009689",
	"teal7":"#00786f",
	"teal8":"#005f5a",
	"teal9":"#0b4f4a",
	"teal10":"#022f2e",
	"cyan0":"#ecfeff",
	"cyan1":"#cffafe",
	"cyan2":"#a5f3fc",
	"cyan3":"#67e8f9",
	"cyan4":"#22d3ee",
	"cyan5":"#06b6d4",
	"cyan6":"#0891b2",
	"cyan7":"#0e7490",
	"cyan8":"#155e75",
	"cyan9":"#164e63",
	"cyan10":"#083344",
	"sky0":"#f0f9ff",
	"sky1":"#e0f2fe",
	"sky2":"#bae6fd",
	"sky3":"#7dd3fc",
	"sky4":"#38bdf8",
	"sky5":"#0ea5e9",
	"sky6":"#0284c7",
	"sky7":"#0369a1",
	"sky8":"#075985",
	"sky9":"#0c4a6e",
	"sky10":"#082f49",
	"blue0":"#eff6ff",
	"blue1":"#dbeafe",
	"blue2":"#bfdbfe",
	"blue3":"#93c5fd",
	"blue4":"#60a5fa",
	"blue5":"#3b82f6",
	"blue6":"#2563eb",
	"blue7":"#1d4ed8",
	"blue8":"#1e40af",
	"blue9":"#1e3a8a",
	"blue10":"#172554",
	"indigo0":"#eef2ff",
	"indigo1":"#e0e7ff",
	"indigo2":"#c7d2fe",
	"indigo3":"#a5b4fc",
	"indigo4":"#818cf8",
	"indigo5":"#6366f1",
	"indigo6":"#4f46e5",
	"indigo7":"#4338ca",
	"indigo8":"#3730a3",
	"indigo9":"#312e81",
	"indigo10":"#1e1b4b",
	"violet0":"#f5f3ff",
	"violet1":"#ede9fe",
	"violet2":"#ddd6fe",
	"violet3":"#c4b5fd",
	"violet4":"#a78bfa",
	"violet5":"#8b5cf6",
	"violet6":"#7c3aed",
	"violet7":"#6d28d9",
	"violet8":"#5b21b6",
	"violet9":"#4c1d95",
	"violet10":"#2e1065",
	"purple0":"#faf5ff",
	"purple1":"#f3e8ff",
	"purple2":"#e9d5ff",
	"purple3":"#d8b4fe",
	"purple4":"#c084fc",
	"purple5":"#a855f7",
	"purple6":"#9333ea",
	"purple7":"#7e22ce",
	"purple8":"#6b21a8",
	"purple9":"#581c87",
	"purple10":"#3b0764",
	"fuchsia0":"#fdf4ff",
	"fuchsia1":"#fae8ff",
	"fuchsia2":"#f5d0fe",
	"fuchsia3":"#f0abfc",
	"fuchsia4":"#e879f9",
	"fuchsia5":"#d946ef",
	"fuchsia6":"#c026d3",
	"fuchsia7":"#a21caf",
	"fuchsia8":"#86198f",
	"fuchsia9":"#701a75",
	"fuchsia10":"#4a044e",
	"pink0":"#fdf2f8",
	"pink1":"#fce7f3",
	"pink2":"#fbcfe8",
	"pink3":"#f9a8d4",
	"pink4":"#f472b6",
	"pink5":"#ec4899",
	"pink6":"#db2777",
	"pink7":"#be185d",
	"pink8":"#9d174d",
	"pink9":"#831843",
	"pink10":"#500724",
	"rose0":"#fff1f2",
	"rose1":"#ffe4e6",
	"rose2":"#fecdd3",
	"rose3":"#fda4af",
	"rose4":"#fb7185",
	"rose5":"#f43f5e",
	"rose6":"#e11d48",
	"rose7":"#be123c",
	"rose8":"#9f1239",
	"rose9":"#881337",
	"rose10":"#4c0519",
	"slate0":"#f8fafc",
	"slate1":"#f1f5f9",
	"slate2":"#e2e8f0",
	"slate3":"#cbd5e1",
	"slate4":"#94a3b8",
	"slate5":"#64748b",
	"slate6":"#475569",
	"slate7":"#334155",
	"slate8":"#1e293b",
	"slate9":"#0f172a",
	"slate10":"#020617",
	"gray0":"#f9fafb",
	"gray1":"#f3f4f6",
	"gray2":"#e5e7eb",
	"gray3":"#d1d5db",
	"gray4":"#9ca3af",
	"gray5":"#6b7280",
	"gray6":"#4b5563",
	"gray7":"#374151",
	"gray8":"#1f2937",
	"gray9":"#111827",
	"gray10":"#030712",
	"zinc0":"#fafafa",
	"zinc1":"#f4f4f5",
	"zinc2":"#e4e4e7",
	"zinc3":"#d4d4d8",
	"zinc4":"#a1a1aa",
	"zinc5":"#71717a",
	"zinc6":"#52525b",
	"zinc7":"#3f3f46",
	"zinc8":"#27272a",
	"zinc9":"#18181b",
	"zinc10":"#09090b",
	"neutral0":"#fafafa",
	"neutral1":"#f5f5f5",
	"neutral2":"#e5e5e5",
	"neutral3":"#d4d4d4",
	"neutral4":"#a3a3a3",
	"neutral5":"#737373",
	"neutral6":"#525252",
	"neutral7":"#404040",
	"neutral8":"#262626",
	"neutral9":"#171717",
	"neutral10":"#0a0a0a",
	"stone0":"#fafaf9",
	"stone1":"#f5f5f4",
	"stone2":"#e7e5e4",
	"stone3":"#d6d3d1",
	"stone4":"#a8a29e",
	"stone5":"#78716c",
	"stone6":"#57534e",
	"stone7":"#44403c",
	"stone8":"#292524",
	"stone9":"#1c1917",
	"stone10":"#0c0a09"
}