Tailwind neutral 11 shades, 50 to 950

:root {
  --color-neutral-50: #fafafa;
  --color-neutral-100: #f5f5f5;
  --color-neutral-200: #e5e5e5;
  --color-neutral-300: #d4d4d4;
  --color-neutral-400: #a3a3a3;
  --color-neutral-500: #737373;
  --color-neutral-600: #525252;
  --color-neutral-700: #404040;
  --color-neutral-800: #262626;
  --color-neutral-900: #171717;
  --color-neutral-950: #0a0a0a;
}

// tailwind.config.js — neutral is built in; this pins the v3.4 values.
module.exports = {
  theme: {
    extend: {
      colors: {
        neutral: {
          50: '#fafafa',
          100: '#f5f5f5',
          200: '#e5e5e5',
          300: '#d4d4d4',
          400: '#a3a3a3',
          500: '#737373',
          600: '#525252',
          700: '#404040',
          800: '#262626',
          900: '#171717',
          950: '#0a0a0a',
        },
      },
    },
  },
};

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

@theme {
  /* v4 has its own neutral; these pin the v3 values. */
  --color-neutral-50: oklch(0.985 0.000 0);
  --color-neutral-100: oklch(0.970 0.000 0);
  --color-neutral-200: oklch(0.922 0.000 0);
  --color-neutral-300: oklch(0.870 0.000 0);
  --color-neutral-400: oklch(0.715 0.000 0);
  --color-neutral-500: oklch(0.556 0.000 0);
  --color-neutral-600: oklch(0.439 0.000 0);
  --color-neutral-700: oklch(0.371 0.000 0);
  --color-neutral-800: oklch(0.269 0.000 0);
  --color-neutral-900: oklch(0.205 0.000 0);
  --color-neutral-950: oklch(0.145 0.000 0);
}

{
  "color": {
    "neutral": {
      "50": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9804, 0.9804, 0.9804],
          "hex": "#fafafa"
        }
      },
      "100": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9608, 0.9608, 0.9608],
          "hex": "#f5f5f5"
        }
      },
      "200": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.898, 0.898, 0.898],
          "hex": "#e5e5e5"
        }
      },
      "300": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.8314, 0.8314, 0.8314],
          "hex": "#d4d4d4"
        }
      },
      "400": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.6392, 0.6392, 0.6392],
          "hex": "#a3a3a3"
        }
      },
      "500": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.451, 0.451, 0.451],
          "hex": "#737373"
        }
      },
      "600": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.3216, 0.3216, 0.3216],
          "hex": "#525252"
        }
      },
      "700": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.251, 0.251, 0.251],
          "hex": "#404040"
        }
      },
      "800": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.149, 0.149, 0.149],
          "hex": "#262626"
        }
      },
      "900": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0902, 0.0902, 0.0902],
          "hex": "#171717"
        }
      },
      "950": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0392, 0.0392, 0.0392],
          "hex": "#0a0a0a"
        }
      }
    }
  }
}

import SwiftUI

enum Palette {
    static let neutral50 = Color(.sRGB, red: 0.980, green: 0.980, blue: 0.980, opacity: 1)
    static let neutral100 = Color(.sRGB, red: 0.961, green: 0.961, blue: 0.961, opacity: 1)
    static let neutral200 = Color(.sRGB, red: 0.898, green: 0.898, blue: 0.898, opacity: 1)
    static let neutral300 = Color(.sRGB, red: 0.831, green: 0.831, blue: 0.831, opacity: 1)
    static let neutral400 = Color(.sRGB, red: 0.639, green: 0.639, blue: 0.639, opacity: 1)
    static let neutral500 = Color(.sRGB, red: 0.451, green: 0.451, blue: 0.451, opacity: 1)
    static let neutral600 = Color(.sRGB, red: 0.322, green: 0.322, blue: 0.322, opacity: 1)
    static let neutral700 = Color(.sRGB, red: 0.251, green: 0.251, blue: 0.251, opacity: 1)
    static let neutral800 = Color(.sRGB, red: 0.149, green: 0.149, blue: 0.149, opacity: 1)
    static let neutral900 = Color(.sRGB, red: 0.090, green: 0.090, blue: 0.090, opacity: 1)
    static let neutral950 = Color(.sRGB, red: 0.039, green: 0.039, blue: 0.039, opacity: 1)
}

import androidx.compose.ui.graphics.Color

object Palette {
    val Neutral50 = Color(0xFFFAFAFA)
    val Neutral100 = Color(0xFFF5F5F5)
    val Neutral200 = Color(0xFFE5E5E5)
    val Neutral300 = Color(0xFFD4D4D4)
    val Neutral400 = Color(0xFFA3A3A3)
    val Neutral500 = Color(0xFF737373)
    val Neutral600 = Color(0xFF525252)
    val Neutral700 = Color(0xFF404040)
    val Neutral800 = Color(0xFF262626)
    val Neutral900 = Color(0xFF171717)
    val Neutral950 = Color(0xFF0A0A0A)
}