Tailwind purple 11 shades, 50 to 950

:root {
  --color-purple-50: #faf5ff;
  --color-purple-100: #f3e8ff;
  --color-purple-200: #e9d5ff;
  --color-purple-300: #d8b4fe;
  --color-purple-400: #c084fc;
  --color-purple-500: #a855f7;
  --color-purple-600: #9333ea;
  --color-purple-700: #7e22ce;
  --color-purple-800: #6b21a8;
  --color-purple-900: #581c87;
  --color-purple-950: #3b0764;
}

// tailwind.config.js — purple is built in; this pins the v3.4 values.
module.exports = {
  theme: {
    extend: {
      colors: {
        purple: {
          50: '#faf5ff',
          100: '#f3e8ff',
          200: '#e9d5ff',
          300: '#d8b4fe',
          400: '#c084fc',
          500: '#a855f7',
          600: '#9333ea',
          700: '#7e22ce',
          800: '#6b21a8',
          900: '#581c87',
          950: '#3b0764',
        },
      },
    },
  },
};

/* app.css — Tailwind CSS v4 */
@import "tailwindcss";

@theme {
  /* v4 has its own purple; these pin the v3 values. */
  --color-purple-50: oklch(0.977 0.014 308.3);
  --color-purple-100: oklch(0.946 0.033 307.2);
  --color-purple-200: oklch(0.902 0.060 306.7);
  --color-purple-300: oklch(0.827 0.108 306.4);
  --color-purple-400: oklch(0.722 0.177 305.5);
  --color-purple-500: oklch(0.627 0.233 303.9);
  --color-purple-600: oklch(0.558 0.252 302.3);
  --color-purple-700: oklch(0.496 0.237 301.9);
  --color-purple-800: oklch(0.438 0.198 303.7);
  --color-purple-900: oklch(0.381 0.166 305.0);
  --color-purple-950: oklch(0.291 0.143 302.7);
}

{
  "color": {
    "purple": {
      "50": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9804, 0.9608, 1],
          "hex": "#faf5ff"
        }
      },
      "100": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9529, 0.9098, 1],
          "hex": "#f3e8ff"
        }
      },
      "200": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9137, 0.8353, 1],
          "hex": "#e9d5ff"
        }
      },
      "300": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.8471, 0.7059, 0.9961],
          "hex": "#d8b4fe"
        }
      },
      "400": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.7529, 0.5176, 0.9882],
          "hex": "#c084fc"
        }
      },
      "500": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.6588, 0.3333, 0.9686],
          "hex": "#a855f7"
        }
      },
      "600": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.5765, 0.2, 0.9176],
          "hex": "#9333ea"
        }
      },
      "700": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.4941, 0.1333, 0.8078],
          "hex": "#7e22ce"
        }
      },
      "800": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.4196, 0.1294, 0.6588],
          "hex": "#6b21a8"
        }
      },
      "900": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.3451, 0.1098, 0.5294],
          "hex": "#581c87"
        }
      },
      "950": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.2314, 0.0275, 0.3922],
          "hex": "#3b0764"
        }
      }
    }
  }
}

import SwiftUI

enum Palette {
    static let purple50 = Color(.sRGB, red: 0.980, green: 0.961, blue: 1.000, opacity: 1)
    static let purple100 = Color(.sRGB, red: 0.953, green: 0.910, blue: 1.000, opacity: 1)
    static let purple200 = Color(.sRGB, red: 0.914, green: 0.835, blue: 1.000, opacity: 1)
    static let purple300 = Color(.sRGB, red: 0.847, green: 0.706, blue: 0.996, opacity: 1)
    static let purple400 = Color(.sRGB, red: 0.753, green: 0.518, blue: 0.988, opacity: 1)
    static let purple500 = Color(.sRGB, red: 0.659, green: 0.333, blue: 0.969, opacity: 1)
    static let purple600 = Color(.sRGB, red: 0.576, green: 0.200, blue: 0.918, opacity: 1)
    static let purple700 = Color(.sRGB, red: 0.494, green: 0.133, blue: 0.808, opacity: 1)
    static let purple800 = Color(.sRGB, red: 0.420, green: 0.129, blue: 0.659, opacity: 1)
    static let purple900 = Color(.sRGB, red: 0.345, green: 0.110, blue: 0.529, opacity: 1)
    static let purple950 = Color(.sRGB, red: 0.231, green: 0.027, blue: 0.392, opacity: 1)
}

import androidx.compose.ui.graphics.Color

object Palette {
    val Purple50 = Color(0xFFFAF5FF)
    val Purple100 = Color(0xFFF3E8FF)
    val Purple200 = Color(0xFFE9D5FF)
    val Purple300 = Color(0xFFD8B4FE)
    val Purple400 = Color(0xFFC084FC)
    val Purple500 = Color(0xFFA855F7)
    val Purple600 = Color(0xFF9333EA)
    val Purple700 = Color(0xFF7E22CE)
    val Purple800 = Color(0xFF6B21A8)
    val Purple900 = Color(0xFF581C87)
    val Purple950 = Color(0xFF3B0764)
}