Last active
January 19, 2024 23:19
-
-
Save michaelroper/1bbe2232fc49eddac672803e0c4ba813 to your computer and use it in GitHub Desktop.
Tailwind CSS default colors in Palettte.app's JSON format
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| [ | |
| { | |
| "paletteName": "gray", | |
| "swatches": [ | |
| { | |
| "name": "100", | |
| "color": "#f7fafc" | |
| }, | |
| { | |
| "name": "200", | |
| "color": "#edf2f7" | |
| }, | |
| { | |
| "name": "300", | |
| "color": "#e2e8f0" | |
| }, | |
| { | |
| "name": "400", | |
| "color": "#cbd5e0" | |
| }, | |
| { | |
| "name": "500", | |
| "color": "#a0aec0" | |
| }, | |
| { | |
| "name": "600", | |
| "color": "#718096" | |
| }, | |
| { | |
| "name": "700", | |
| "color": "#4a5568" | |
| }, | |
| { | |
| "name": "800", | |
| "color": "#2d3748" | |
| }, | |
| { | |
| "name": "900", | |
| "color": "#1a202c" | |
| } | |
| ] | |
| }, | |
| { | |
| "paletteName": "red", | |
| "swatches": [ | |
| { | |
| "name": "100", | |
| "color": "#fff5f5" | |
| }, | |
| { | |
| "name": "200", | |
| "color": "#fed7d7" | |
| }, | |
| { | |
| "name": "300", | |
| "color": "#feb2b2" | |
| }, | |
| { | |
| "name": "400", | |
| "color": "#fc8181" | |
| }, | |
| { | |
| "name": "500", | |
| "color": "#f56565" | |
| }, | |
| { | |
| "name": "600", | |
| "color": "#e53e3e" | |
| }, | |
| { | |
| "name": "700", | |
| "color": "#c53030" | |
| }, | |
| { | |
| "name": "800", | |
| "color": "#9b2c2c" | |
| }, | |
| { | |
| "name": "900", | |
| "color": "#742a2a" | |
| } | |
| ] | |
| }, | |
| { | |
| "paletteName": "orange", | |
| "swatches": [ | |
| { | |
| "name": "100", | |
| "color": "#fffaf0" | |
| }, | |
| { | |
| "name": "200", | |
| "color": "#feebc8" | |
| }, | |
| { | |
| "name": "300", | |
| "color": "#fbd38d" | |
| }, | |
| { | |
| "name": "400", | |
| "color": "#f6ad55" | |
| }, | |
| { | |
| "name": "500", | |
| "color": "#ed8936" | |
| }, | |
| { | |
| "name": "600", | |
| "color": "#dd6b20" | |
| }, | |
| { | |
| "name": "700", | |
| "color": "#c05621" | |
| }, | |
| { | |
| "name": "800", | |
| "color": "#9c4221" | |
| }, | |
| { | |
| "name": "900", | |
| "color": "#7b341e" | |
| } | |
| ] | |
| }, | |
| { | |
| "paletteName": "yellow", | |
| "swatches": [ | |
| { | |
| "name": "100", | |
| "color": "#fffff0" | |
| }, | |
| { | |
| "name": "200", | |
| "color": "#fefcbf" | |
| }, | |
| { | |
| "name": "300", | |
| "color": "#faf089" | |
| }, | |
| { | |
| "name": "400", | |
| "color": "#f6e05e" | |
| }, | |
| { | |
| "name": "500", | |
| "color": "#ecc94b" | |
| }, | |
| { | |
| "name": "600", | |
| "color": "#d69e2e" | |
| }, | |
| { | |
| "name": "700", | |
| "color": "#b7791f" | |
| }, | |
| { | |
| "name": "800", | |
| "color": "#975a16" | |
| }, | |
| { | |
| "name": "900", | |
| "color": "#744210" | |
| } | |
| ] | |
| }, | |
| { | |
| "paletteName": "green", | |
| "swatches": [ | |
| { | |
| "name": "100", | |
| "color": "#f0fff4" | |
| }, | |
| { | |
| "name": "200", | |
| "color": "#c6f6d5" | |
| }, | |
| { | |
| "name": "300", | |
| "color": "#9ae6b4" | |
| }, | |
| { | |
| "name": "400", | |
| "color": "#68d391" | |
| }, | |
| { | |
| "name": "500", | |
| "color": "#48bb78" | |
| }, | |
| { | |
| "name": "600", | |
| "color": "#38a169" | |
| }, | |
| { | |
| "name": "700", | |
| "color": "#2f855a" | |
| }, | |
| { | |
| "name": "800", | |
| "color": "#276749" | |
| }, | |
| { | |
| "name": "900", | |
| "color": "#22543d" | |
| } | |
| ] | |
| }, | |
| { | |
| "paletteName": "teal", | |
| "swatches": [ | |
| { | |
| "name": "100", | |
| "color": "#e6fffa" | |
| }, | |
| { | |
| "name": "200", | |
| "color": "#b2f5ea" | |
| }, | |
| { | |
| "name": "300", | |
| "color": "#81e6d9" | |
| }, | |
| { | |
| "name": "400", | |
| "color": "#4fd1c5" | |
| }, | |
| { | |
| "name": "500", | |
| "color": "#38b2ac" | |
| }, | |
| { | |
| "name": "600", | |
| "color": "#319795" | |
| }, | |
| { | |
| "name": "700", | |
| "color": "#2c7a7b" | |
| }, | |
| { | |
| "name": "800", | |
| "color": "#285e61" | |
| }, | |
| { | |
| "name": "900", | |
| "color": "#234e52" | |
| } | |
| ] | |
| }, | |
| { | |
| "paletteName": "blue", | |
| "swatches": [ | |
| { | |
| "name": "100", | |
| "color": "#ebf8ff" | |
| }, | |
| { | |
| "name": "200", | |
| "color": "#bee3f8" | |
| }, | |
| { | |
| "name": "300", | |
| "color": "#90cdf4" | |
| }, | |
| { | |
| "name": "400", | |
| "color": "#63b3ed" | |
| }, | |
| { | |
| "name": "500", | |
| "color": "#4299e1" | |
| }, | |
| { | |
| "name": "600", | |
| "color": "#3182ce" | |
| }, | |
| { | |
| "name": "700", | |
| "color": "#2b6cb0" | |
| }, | |
| { | |
| "name": "800", | |
| "color": "#2c5282" | |
| }, | |
| { | |
| "name": "900", | |
| "color": "#2a4365" | |
| } | |
| ] | |
| }, | |
| { | |
| "paletteName": "indigo", | |
| "swatches": [ | |
| { | |
| "name": "100", | |
| "color": "#ebf4ff" | |
| }, | |
| { | |
| "name": "200", | |
| "color": "#c3dafe" | |
| }, | |
| { | |
| "name": "300", | |
| "color": "#a3bffa" | |
| }, | |
| { | |
| "name": "400", | |
| "color": "#7f9cf5" | |
| }, | |
| { | |
| "name": "500", | |
| "color": "#667eea" | |
| }, | |
| { | |
| "name": "600", | |
| "color": "#5a67d8" | |
| }, | |
| { | |
| "name": "700", | |
| "color": "#4c51bf" | |
| }, | |
| { | |
| "name": "800", | |
| "color": "#434190" | |
| }, | |
| { | |
| "name": "900", | |
| "color": "#3c366b" | |
| } | |
| ] | |
| }, | |
| { | |
| "paletteName": "purple", | |
| "swatches": [ | |
| { | |
| "name": "100", | |
| "color": "#faf5ff" | |
| }, | |
| { | |
| "name": "200", | |
| "color": "#e9d8fd" | |
| }, | |
| { | |
| "name": "300", | |
| "color": "#d6bcfa" | |
| }, | |
| { | |
| "name": "400", | |
| "color": "#b794f4" | |
| }, | |
| { | |
| "name": "500", | |
| "color": "#9f7aea" | |
| }, | |
| { | |
| "name": "600", | |
| "color": "#805ad5" | |
| }, | |
| { | |
| "name": "700", | |
| "color": "#6b46c1" | |
| }, | |
| { | |
| "name": "800", | |
| "color": "#553c9a" | |
| }, | |
| { | |
| "name": "900", | |
| "color": "#44337a" | |
| } | |
| ] | |
| }, | |
| { | |
| "paletteName": "pink", | |
| "swatches": [ | |
| { | |
| "name": "100", | |
| "color": "#fff5f7" | |
| }, | |
| { | |
| "name": "200", | |
| "color": "#fed7e2" | |
| }, | |
| { | |
| "name": "300", | |
| "color": "#fbb6ce" | |
| }, | |
| { | |
| "name": "400", | |
| "color": "#f687b3" | |
| }, | |
| { | |
| "name": "500", | |
| "color": "#ed64a6" | |
| }, | |
| { | |
| "name": "600", | |
| "color": "#d53f8c" | |
| }, | |
| { | |
| "name": "700", | |
| "color": "#b83280" | |
| }, | |
| { | |
| "name": "800", | |
| "color": "#97266d" | |
| }, | |
| { | |
| "name": "900", | |
| "color": "#702459" | |
| } | |
| ] | |
| } | |
| ] |
This is very out of date.
See here for the latest colors:
https://github.com/tailwindlabs/tailwindcss/blob/master/src/public/colors.js
Manual scrape code
Here is a script to scrape the colors from the current colors palette page:
https://tailwindcss.com/docs/customizing-colors
const colors = {};
for (const row of document.querySelector(".grid").children) {
const hue = row.firstChild.innerText.toLowerCase();
const shades = {};
for (const col of row.querySelector(".grid").children) {
const [_, shade, hex] = col.innerText
.toLowerCase()
.replace(/\s/g, "")
.match(/([0-9]{2,3}).*(#[a-z0-9]{6})/);
shades[shade] = hex;
}
colors[hue] = shades;
}
copy(JSON.stringify(colors, null, 2));{
"slate": {
"50": "#f8fafc",
"100": "#f1f5f9",
"200": "#e2e8f0",
"300": "#cbd5e1",
"400": "#94a3b8",
"500": "#64748b",
"600": "#475569",
"700": "#334155",
"800": "#1e293b",
"900": "#0f172a",
"950": "#020617"
},
"gray": {
"50": "#f9fafb",
"100": "#f3f4f6",
"200": "#e5e7eb",
"300": "#d1d5db",
"400": "#9ca3af",
"500": "#6b7280",
"600": "#4b5563",
"700": "#374151",
"800": "#1f2937",
"900": "#111827",
"950": "#030712"
},
"zinc": {
"50": "#fafafa",
"100": "#f4f4f5",
"200": "#e4e4e7",
"300": "#d4d4d8",
"400": "#a1a1aa",
"500": "#71717a",
"600": "#52525b",
"700": "#3f3f46",
"800": "#27272a",
"900": "#18181b",
"950": "#09090b"
},
"neutral": {
"50": "#fafafa",
"100": "#f5f5f5",
"200": "#e5e5e5",
"300": "#d4d4d4",
"400": "#a3a3a3",
"500": "#737373",
"600": "#525252",
"700": "#404040",
"800": "#262626",
"900": "#171717",
"950": "#0a0a0a"
},
"stone": {
"50": "#fafaf9",
"100": "#f5f5f4",
"200": "#e7e5e4",
"300": "#d6d3d1",
"400": "#a8a29e",
"500": "#78716c",
"600": "#57534e",
"700": "#44403c",
"800": "#292524",
"900": "#1c1917",
"950": "#0c0a09"
},
"red": {
"50": "#fef2f2",
"100": "#fee2e2",
"200": "#fecaca",
"300": "#fca5a5",
"400": "#f87171",
"500": "#ef4444",
"600": "#dc2626",
"700": "#b91c1c",
"800": "#991b1b",
"900": "#7f1d1d",
"950": "#450a0a"
},
"orange": {
"50": "#fff7ed",
"100": "#ffedd5",
"200": "#fed7aa",
"300": "#fdba74",
"400": "#fb923c",
"500": "#f97316",
"600": "#ea580c",
"700": "#c2410c",
"800": "#9a3412",
"900": "#7c2d12",
"950": "#431407"
},
"amber": {
"50": "#fffbeb",
"100": "#fef3c7",
"200": "#fde68a",
"300": "#fcd34d",
"400": "#fbbf24",
"500": "#f59e0b",
"600": "#d97706",
"700": "#b45309",
"800": "#92400e",
"900": "#78350f",
"950": "#451a03"
},
"yellow": {
"50": "#fefce8",
"100": "#fef9c3",
"200": "#fef08a",
"300": "#fde047",
"400": "#facc15",
"500": "#eab308",
"600": "#ca8a04",
"700": "#a16207",
"800": "#854d0e",
"900": "#713f12",
"950": "#422006"
},
"lime": {
"50": "#f7fee7",
"100": "#ecfccb",
"200": "#d9f99d",
"300": "#bef264",
"400": "#a3e635",
"500": "#84cc16",
"600": "#65a30d",
"700": "#4d7c0f",
"800": "#3f6212",
"900": "#365314",
"950": "#1a2e05"
},
"green": {
"50": "#f0fdf4",
"100": "#dcfce7",
"200": "#bbf7d0",
"300": "#86efac",
"400": "#4ade80",
"500": "#22c55e",
"600": "#16a34a",
"700": "#15803d",
"800": "#166534",
"900": "#14532d",
"950": "#052e16"
},
"emerald": {
"50": "#ecfdf5",
"100": "#d1fae5",
"200": "#a7f3d0",
"300": "#6ee7b7",
"400": "#34d399",
"500": "#10b981",
"600": "#059669",
"700": "#047857",
"800": "#065f46",
"900": "#064e3b",
"950": "#022c22"
},
"teal": {
"50": "#f0fdfa",
"100": "#ccfbf1",
"200": "#99f6e4",
"300": "#5eead4",
"400": "#2dd4bf",
"500": "#14b8a6",
"600": "#0d9488",
"700": "#0f766e",
"800": "#115e59",
"900": "#134e4a",
"950": "#042f2e"
},
"cyan": {
"50": "#ecfeff",
"100": "#cffafe",
"200": "#a5f3fc",
"300": "#67e8f9",
"400": "#22d3ee",
"500": "#06b6d4",
"600": "#0891b2",
"700": "#0e7490",
"800": "#155e75",
"900": "#164e63",
"950": "#083344"
},
"sky": {
"50": "#f0f9ff",
"100": "#e0f2fe",
"200": "#bae6fd",
"300": "#7dd3fc",
"400": "#38bdf8",
"500": "#0ea5e9",
"600": "#0284c7",
"700": "#0369a1",
"800": "#075985",
"900": "#0c4a6e",
"950": "#082f49"
},
"blue": {
"50": "#eff6ff",
"100": "#dbeafe",
"200": "#bfdbfe",
"300": "#93c5fd",
"400": "#60a5fa",
"500": "#3b82f6",
"600": "#2563eb",
"700": "#1d4ed8",
"800": "#1e40af",
"900": "#1e3a8a",
"950": "#172554"
},
"indigo": {
"50": "#eef2ff",
"100": "#e0e7ff",
"200": "#c7d2fe",
"300": "#a5b4fc",
"400": "#818cf8",
"500": "#6366f1",
"600": "#4f46e5",
"700": "#4338ca",
"800": "#3730a3",
"900": "#312e81",
"950": "#1e1b4b"
},
"violet": {
"50": "#f5f3ff",
"100": "#ede9fe",
"200": "#ddd6fe",
"300": "#c4b5fd",
"400": "#a78bfa",
"500": "#8b5cf6",
"600": "#7c3aed",
"700": "#6d28d9",
"800": "#5b21b6",
"900": "#4c1d95",
"950": "#2e1065"
},
"purple": {
"50": "#faf5ff",
"100": "#f3e8ff",
"200": "#e9d5ff",
"300": "#d8b4fe",
"400": "#c084fc",
"500": "#a855f7",
"600": "#9333ea",
"700": "#7e22ce",
"800": "#6b21a8",
"900": "#581c87",
"950": "#3b0764"
},
"fuchsia": {
"50": "#fdf4ff",
"100": "#fae8ff",
"200": "#f5d0fe",
"300": "#f0abfc",
"400": "#e879f9",
"500": "#d946ef",
"600": "#c026d3",
"700": "#a21caf",
"800": "#86198f",
"900": "#701a75",
"950": "#4a044e"
},
"pink": {
"50": "#fdf2f8",
"100": "#fce7f3",
"200": "#fbcfe8",
"300": "#f9a8d4",
"400": "#f472b6",
"500": "#ec4899",
"600": "#db2777",
"700": "#be185d",
"800": "#9d174d",
"900": "#831843",
"950": "#500724"
},
"rose": {
"50": "#fff1f2",
"100": "#ffe4e6",
"200": "#fecdd3",
"300": "#fda4af",
"400": "#fb7185",
"500": "#f43f5e",
"600": "#e11d48",
"700": "#be123c",
"800": "#9f1239",
"900": "#881337",
"950": "#4c0519"
}
}
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
This is the default color palette from Tailwind CSS, in the right JSON object format to import into palettte.app. Might be handy if you want to tweak some of the values, and need a starting point. Now I just need to figure out a way to convert the export from palettte.app back into the right format to paste back into a Tailwind config...