Tailwind blue 11 shades, 50 to 950

:root {
  --color-blue-50: #eff6ff;
  --color-blue-100: #dbeafe;
  --color-blue-200: #bfdbfe;
  --color-blue-300: #93c5fd;
  --color-blue-400: #60a5fa;
  --color-blue-500: #3b82f6;
  --color-blue-600: #2563eb;
  --color-blue-700: #1d4ed8;
  --color-blue-800: #1e40af;
  --color-blue-900: #1e3a8a;
  --color-blue-950: #172554;
}

// tailwind.config.js — blue is built in; this pins the v3.4 values.
module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a',
          950: '#172554',
        },
      },
    },
  },
};

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

@theme {
  /* v4 has its own blue; these pin the v3 values. */
  --color-blue-50: oklch(0.970 0.014 254.6);
  --color-blue-100: oklch(0.932 0.032 255.6);
  --color-blue-200: oklch(0.882 0.057 254.1);
  --color-blue-300: oklch(0.809 0.096 251.8);
  --color-blue-400: oklch(0.714 0.143 254.6);
  --color-blue-500: oklch(0.623 0.188 259.8);
  --color-blue-600: oklch(0.546 0.215 262.9);
  --color-blue-700: oklch(0.488 0.217 264.4);
  --color-blue-800: oklch(0.424 0.181 265.6);
  --color-blue-900: oklch(0.379 0.138 265.5);
  --color-blue-950: oklch(0.282 0.087 267.9);
}

{
  "color": {
    "blue": {
      "50": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9373, 0.9647, 1],
          "hex": "#eff6ff"
        }
      },
      "100": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.8588, 0.9176, 0.9961],
          "hex": "#dbeafe"
        }
      },
      "200": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.749, 0.8588, 0.9961],
          "hex": "#bfdbfe"
        }
      },
      "300": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.5765, 0.7725, 0.9922],
          "hex": "#93c5fd"
        }
      },
      "400": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.3765, 0.6471, 0.9804],
          "hex": "#60a5fa"
        }
      },
      "500": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.2314, 0.5098, 0.9647],
          "hex": "#3b82f6"
        }
      },
      "600": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.1451, 0.3882, 0.9216],
          "hex": "#2563eb"
        }
      },
      "700": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.1137, 0.3059, 0.8471],
          "hex": "#1d4ed8"
        }
      },
      "800": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.1176, 0.251, 0.6863],
          "hex": "#1e40af"
        }
      },
      "900": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.1176, 0.2275, 0.5412],
          "hex": "#1e3a8a"
        }
      },
      "950": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0902, 0.1451, 0.3294],
          "hex": "#172554"
        }
      }
    }
  }
}

import SwiftUI

enum Palette {
    static let blue50 = Color(.sRGB, red: 0.937, green: 0.965, blue: 1.000, opacity: 1)
    static let blue100 = Color(.sRGB, red: 0.859, green: 0.918, blue: 0.996, opacity: 1)
    static let blue200 = Color(.sRGB, red: 0.749, green: 0.859, blue: 0.996, opacity: 1)
    static let blue300 = Color(.sRGB, red: 0.576, green: 0.773, blue: 0.992, opacity: 1)
    static let blue400 = Color(.sRGB, red: 0.376, green: 0.647, blue: 0.980, opacity: 1)
    static let blue500 = Color(.sRGB, red: 0.231, green: 0.510, blue: 0.965, opacity: 1)
    static let blue600 = Color(.sRGB, red: 0.145, green: 0.388, blue: 0.922, opacity: 1)
    static let blue700 = Color(.sRGB, red: 0.114, green: 0.306, blue: 0.847, opacity: 1)
    static let blue800 = Color(.sRGB, red: 0.118, green: 0.251, blue: 0.686, opacity: 1)
    static let blue900 = Color(.sRGB, red: 0.118, green: 0.227, blue: 0.541, opacity: 1)
    static let blue950 = Color(.sRGB, red: 0.090, green: 0.145, blue: 0.329, opacity: 1)
}

import androidx.compose.ui.graphics.Color

object Palette {
    val Blue50 = Color(0xFFEFF6FF)
    val Blue100 = Color(0xFFDBEAFE)
    val Blue200 = Color(0xFFBFDBFE)
    val Blue300 = Color(0xFF93C5FD)
    val Blue400 = Color(0xFF60A5FA)
    val Blue500 = Color(0xFF3B82F6)
    val Blue600 = Color(0xFF2563EB)
    val Blue700 = Color(0xFF1D4ED8)
    val Blue800 = Color(0xFF1E40AF)
    val Blue900 = Color(0xFF1E3A8A)
    val Blue950 = Color(0xFF172554)
}