Tailwind CSS Colors for Android XML

README.MD

Tailwind CSS colors for Android XML Color

This is the official color palletes of Tailwind CSS in colors.xml format for all of your Android color needs

How to use

Just copy the contents of colors.xml into your colors.xml file and you can instantly use all of the palletes provided by Tailwind CSS

Credits

• Tailwind labs - For providing high quality color palletes
• rama-adi - For converting the colors to XML

colors.xml

<?xml version="1.0" encoding="utf-8"?>

<resources>
  <!--
      Tailwind Colors as Android XML String
      source: https://github.com/tailwindlabs/tailwindcss/blob/master/src/public/colors.js
  -->
  
  <!-- slate -->
  <color name="slate_50">#f8fafc</color>
  <color name="slate_100">#f1f5f9</color>
  <color name="slate_200">#e2e8f0</color>
  <color name="slate_300">#cbd5e1</color>
  <color name="slate_400">#94a3b8</color>
  <color name="slate_500">#64748b</color>
  <color name="slate_600">#475569</color>
  <color name="slate_700">#334155</color>
  <color name="slate_800">#1e293b</color>
  <color name="slate_900">#0f172a</color>
  <!-- gray -->
  <color name="gray_50">#f9fafb</color>
  <color name="gray_100">#f3f4f6</color>
  <color name="gray_200">#e5e7eb</color>
  <color name="gray_300">#d1d5db</color>
  <color name="gray_400">#9ca3af</color>
  <color name="gray_500">#6b7280</color>
  <color name="gray_600">#4b5563</color>
  <color name="gray_700">#374151</color>
  <color name="gray_800">#1f2937</color>
  <color name="gray_900">#111827</color>
  <!-- zinc -->
  <color name="zinc_50">#fafafa</color>
  <color name="zinc_100">#f4f4f5</color>
  <color name="zinc_200">#e4e4e7</color>
  <color name="zinc_300">#d4d4d8</color>
  <color name="zinc_400">#a1a1aa</color>
  <color name="zinc_500">#71717a</color>
  <color name="zinc_600">#52525b</color>
  <color name="zinc_700">#3f3f46</color>
  <color name="zinc_800">#27272a</color>
  <color name="zinc_900">#18181b</color>
  <!-- neutral -->
  <color name="neutral_50">#fafafa</color>
  <color name="neutral_100">#f5f5f5</color>
  <color name="neutral_200">#e5e5e5</color>
  <color name="neutral_300">#d4d4d4</color>
  <color name="neutral_400">#a3a3a3</color>
  <color name="neutral_500">#737373</color>
  <color name="neutral_600">#525252</color>
  <color name="neutral_700">#404040</color>
  <color name="neutral_800">#262626</color>
  <color name="neutral_900">#171717</color>
  <!-- stone -->
  <color name="stone_50">#fafaf9</color>
  <color name="stone_100">#f5f5f4</color>
  <color name="stone_200">#e7e5e4</color>
  <color name="stone_300">#d6d3d1</color>
  <color name="stone_400">#a8a29e</color>
  <color name="stone_500">#78716c</color>
  <color name="stone_600">#57534e</color>
  <color name="stone_700">#44403c</color>
  <color name="stone_800">#292524</color>
  <color name="stone_900">#1c1917</color>
  <!-- red -->
  <color name="red_50">#fef2f2</color>
  <color name="red_100">#fee2e2</color>
  <color name="red_200">#fecaca</color>
  <color name="red_300">#fca5a5</color>
  <color name="red_400">#f87171</color>
  <color name="red_500">#ef4444</color>
  <color name="red_600">#dc2626</color>
  <color name="red_700">#b91c1c</color>
  <color name="red_800">#991b1b</color>
  <color name="red_900">#7f1d1d</color>
  <!-- orange -->
  <color name="orange_50">#fff7ed</color>
  <color name="orange_100">#ffedd5</color>
  <color name="orange_200">#fed7aa</color>
  <color name="orange_300">#fdba74</color>
  <color name="orange_400">#fb923c</color>
  <color name="orange_500">#f97316</color>
  <color name="orange_600">#ea580c</color>
  <color name="orange_700">#c2410c</color>
  <color name="orange_800">#9a3412</color>
  <color name="orange_900">#7c2d12</color>
  <!-- amber -->
  <color name="amber_50">#fffbeb</color>
  <color name="amber_100">#fef3c7</color>
  <color name="amber_200">#fde68a</color>
  <color name="amber_300">#fcd34d</color>
  <color name="amber_400">#fbbf24</color>
  <color name="amber_500">#f59e0b</color>
  <color name="amber_600">#d97706</color>
  <color name="amber_700">#b45309</color>
  <color name="amber_800">#92400e</color>
  <color name="amber_900">#78350f</color>
  <!-- yellow -->
  <color name="yellow_50">#fefce8</color>
  <color name="yellow_100">#fef9c3</color>
  <color name="yellow_200">#fef08a</color>
  <color name="yellow_300">#fde047</color>
  <color name="yellow_400">#facc15</color>
  <color name="yellow_500">#eab308</color>
  <color name="yellow_600">#ca8a04</color>
  <color name="yellow_700">#a16207</color>
  <color name="yellow_800">#854d0e</color>
  <color name="yellow_900">#713f12</color>
  <!-- lime -->
  <color name="lime_50">#f7fee7</color>
  <color name="lime_100">#ecfccb</color>
  <color name="lime_200">#d9f99d</color>
  <color name="lime_300">#bef264</color>
  <color name="lime_400">#a3e635</color>
  <color name="lime_500">#84cc16</color>
  <color name="lime_600">#65a30d</color>
  <color name="lime_700">#4d7c0f</color>
  <color name="lime_800">#3f6212</color>
  <color name="lime_900">#365314</color>
  <!-- green -->
  <color name="green_50">#f0fdf4</color>
  <color name="green_100">#dcfce7</color>
  <color name="green_200">#bbf7d0</color>
  <color name="green_300">#86efac</color>
  <color name="green_400">#4ade80</color>
  <color name="green_500">#22c55e</color>
  <color name="green_600">#16a34a</color>
  <color name="green_700">#15803d</color>
  <color name="green_800">#166534</color>
  <color name="green_900">#14532d</color>
  <!-- emerald -->
  <color name="emerald_50">#ecfdf5</color>
  <color name="emerald_100">#d1fae5</color>
  <color name="emerald_200">#a7f3d0</color>
  <color name="emerald_300">#6ee7b7</color>
  <color name="emerald_400">#34d399</color>
  <color name="emerald_500">#10b981</color>
  <color name="emerald_600">#059669</color>
  <color name="emerald_700">#047857</color>
  <color name="emerald_800">#065f46</color>
  <color name="emerald_900">#064e3b</color>
  <!-- teal -->
  <color name="teal_50">#f0fdfa</color>
  <color name="teal_100">#ccfbf1</color>
  <color name="teal_200">#99f6e4</color>
  <color name="teal_300">#5eead4</color>
  <color name="teal_400">#2dd4bf</color>
  <color name="teal_500">#14b8a6</color>
  <color name="teal_600">#0d9488</color>
  <color name="teal_700">#0f766e</color>
  <color name="teal_800">#115e59</color>
  <color name="teal_900">#134e4a</color>
  <!-- cyan -->
  <color name="cyan_50">#ecfeff</color>
  <color name="cyan_100">#cffafe</color>
  <color name="cyan_200">#a5f3fc</color>
  <color name="cyan_300">#67e8f9</color>
  <color name="cyan_400">#22d3ee</color>
  <color name="cyan_500">#06b6d4</color>
  <color name="cyan_600">#0891b2</color>
  <color name="cyan_700">#0e7490</color>
  <color name="cyan_800">#155e75</color>
  <color name="cyan_900">#164e63</color>
  <!-- sky -->
  <color name="sky_50">#f0f9ff</color>
  <color name="sky_100">#e0f2fe</color>
  <color name="sky_200">#bae6fd</color>
  <color name="sky_300">#7dd3fc</color>
  <color name="sky_400">#38bdf8</color>
  <color name="sky_500">#0ea5e9</color>
  <color name="sky_600">#0284c7</color>
  <color name="sky_700">#0369a1</color>
  <color name="sky_800">#075985</color>
  <color name="sky_900">#0c4a6e</color>
  <!-- blue -->
  <color name="blue_50">#eff6ff</color>
  <color name="blue_100">#dbeafe</color>
  <color name="blue_200">#bfdbfe</color>
  <color name="blue_300">#93c5fd</color>
  <color name="blue_400">#60a5fa</color>
  <color name="blue_500">#3b82f6</color>
  <color name="blue_600">#2563eb</color>
  <color name="blue_700">#1d4ed8</color>
  <color name="blue_800">#1e40af</color>
  <color name="blue_900">#1e3a8a</color>
  <!-- indigo -->
  <color name="indigo_50">#eef2ff</color>
  <color name="indigo_100">#e0e7ff</color>
  <color name="indigo_200">#c7d2fe</color>
  <color name="indigo_300">#a5b4fc</color>
  <color name="indigo_400">#818cf8</color>
  <color name="indigo_500">#6366f1</color>
  <color name="indigo_600">#4f46e5</color>
  <color name="indigo_700">#4338ca</color>
  <color name="indigo_800">#3730a3</color>
  <color name="indigo_900">#312e81</color>
  <!-- violet -->
  <color name="violet_50">#f5f3ff</color>
  <color name="violet_100">#ede9fe</color>
  <color name="violet_200">#ddd6fe</color>
  <color name="violet_300">#c4b5fd</color>
  <color name="violet_400">#a78bfa</color>
  <color name="violet_500">#8b5cf6</color>
  <color name="violet_600">#7c3aed</color>
  <color name="violet_700">#6d28d9</color>
  <color name="violet_800">#5b21b6</color>
  <color name="violet_900">#4c1d95</color>
  <!-- purple -->
  <color name="purple_50">#faf5ff</color>
  <color name="purple_100">#f3e8ff</color>
  <color name="purple_200">#e9d5ff</color>
  <color name="purple_300">#d8b4fe</color>
  <color name="purple_400">#c084fc</color>
  <color name="purple_500">#a855f7</color>
  <color name="purple_600">#9333ea</color>
  <color name="purple_700">#7e22ce</color>
  <color name="purple_800">#6b21a8</color>
  <color name="purple_900">#581c87</color>
  <!-- fuchsia -->
  <color name="fuchsia_50">#fdf4ff</color>
  <color name="fuchsia_100">#fae8ff</color>
  <color name="fuchsia_200">#f5d0fe</color>
  <color name="fuchsia_300">#f0abfc</color>
  <color name="fuchsia_400">#e879f9</color>
  <color name="fuchsia_500">#d946ef</color>
  <color name="fuchsia_600">#c026d3</color>
  <color name="fuchsia_700">#a21caf</color>
  <color name="fuchsia_800">#86198f</color>
  <color name="fuchsia_900">#701a75</color>
  <!-- pink -->
  <color name="pink_50">#fdf2f8</color>
  <color name="pink_100">#fce7f3</color>
  <color name="pink_200">#fbcfe8</color>
  <color name="pink_300">#f9a8d4</color>
  <color name="pink_400">#f472b6</color>
  <color name="pink_500">#ec4899</color>
  <color name="pink_600">#db2777</color>
  <color name="pink_700">#be185d</color>
  <color name="pink_800">#9d174d</color>
  <color name="pink_900">#831843</color>
  <!-- rose -->
  <color name="rose_50">#fff1f2</color>
  <color name="rose_100">#ffe4e6</color>
  <color name="rose_200">#fecdd3</color>
  <color name="rose_300">#fda4af</color>
  <color name="rose_400">#fb7185</color>
  <color name="rose_500">#f43f5e</color>
  <color name="rose_600">#e11d48</color>
  <color name="rose_700">#be123c</color>
  <color name="rose_800">#9f1239</color>
  <color name="rose_900">#881337</color>
</resources>