Skip to content

Instantly share code, notes, and snippets.

@michaelroper

michaelroper/tailwind-palettte-app.json

Last active January 19, 2024 23:19
Show Gist options

  • Select an option

    Learn more about clone URLs
  • Save michaelroper/1bbe2232fc49eddac672803e0c4ba813 to your computer and use it in GitHub Desktop.

Select an option

Learn more about clone URLs
Save michaelroper/1bbe2232fc49eddac672803e0c4ba813 to your computer and use it in GitHub Desktop.
Download ZIP
Tailwind CSS default colors in Palettte.app's JSON format
Raw
tailwind-palettte-app.json
[
{
"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"
}
]
}
]
@vincerubinetti
Copy link

vincerubinetti commented Jan 19, 2024 •
edited
Loading

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