Tailwind orange 11 shades, 50 to 950

:root {
  --color-orange-50: #fff7ed;
  --color-orange-100: #ffedd5;
  --color-orange-200: #fed7aa;
  --color-orange-300: #fdba74;
  --color-orange-400: #fb923c;
  --color-orange-500: #f97316;
  --color-orange-600: #ea580c;
  --color-orange-700: #c2410c;
  --color-orange-800: #9a3412;
  --color-orange-900: #7c2d12;
  --color-orange-950: #431407;
}

// tailwind.config.js — orange is built in; this pins the v3.4 values.
module.exports = {
  theme: {
    extend: {
      colors: {
        orange: {
          50: '#fff7ed',
          100: '#ffedd5',
          200: '#fed7aa',
          300: '#fdba74',
          400: '#fb923c',
          500: '#f97316',
          600: '#ea580c',
          700: '#c2410c',
          800: '#9a3412',
          900: '#7c2d12',
          950: '#431407',
        },
      },
    },
  },
};

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

@theme {
  /* v4 has its own orange; these pin the v3 values. */
  --color-orange-50: oklch(0.980 0.016 73.7);
  --color-orange-100: oklch(0.954 0.037 75.2);
  --color-orange-200: oklch(0.901 0.073 70.7);
  --color-orange-300: oklch(0.837 0.117 66.3);
  --color-orange-400: oklch(0.758 0.159 55.9);
  --color-orange-500: oklch(0.705 0.187 47.6);
  --color-orange-600: oklch(0.646 0.194 41.1);
  --color-orange-700: oklch(0.553 0.174 38.4);
  --color-orange-800: oklch(0.470 0.143 37.3);
  --color-orange-900: oklch(0.408 0.116 38.2);
  --color-orange-950: oklch(0.266 0.076 36.3);
}

{
  "color": {
    "orange": {
      "50": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [1, 0.9686, 0.9294],
          "hex": "#fff7ed"
        }
      },
      "100": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [1, 0.9294, 0.8353],
          "hex": "#ffedd5"
        }
      },
      "200": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9961, 0.8431, 0.6667],
          "hex": "#fed7aa"
        }
      },
      "300": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9922, 0.7294, 0.4549],
          "hex": "#fdba74"
        }
      },
      "400": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9843, 0.5725, 0.2353],
          "hex": "#fb923c"
        }
      },
      "500": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9765, 0.451, 0.0863],
          "hex": "#f97316"
        }
      },
      "600": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9176, 0.3451, 0.0471],
          "hex": "#ea580c"
        }
      },
      "700": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.7608, 0.2549, 0.0471],
          "hex": "#c2410c"
        }
      },
      "800": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.6039, 0.2039, 0.0706],
          "hex": "#9a3412"
        }
      },
      "900": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.4863, 0.1765, 0.0706],
          "hex": "#7c2d12"
        }
      },
      "950": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.2627, 0.0784, 0.0275],
          "hex": "#431407"
        }
      }
    }
  }
}

import SwiftUI

enum Palette {
    static let orange50 = Color(.sRGB, red: 1.000, green: 0.969, blue: 0.929, opacity: 1)
    static let orange100 = Color(.sRGB, red: 1.000, green: 0.929, blue: 0.835, opacity: 1)
    static let orange200 = Color(.sRGB, red: 0.996, green: 0.843, blue: 0.667, opacity: 1)
    static let orange300 = Color(.sRGB, red: 0.992, green: 0.729, blue: 0.455, opacity: 1)
    static let orange400 = Color(.sRGB, red: 0.984, green: 0.573, blue: 0.235, opacity: 1)
    static let orange500 = Color(.sRGB, red: 0.976, green: 0.451, blue: 0.086, opacity: 1)
    static let orange600 = Color(.sRGB, red: 0.918, green: 0.345, blue: 0.047, opacity: 1)
    static let orange700 = Color(.sRGB, red: 0.761, green: 0.255, blue: 0.047, opacity: 1)
    static let orange800 = Color(.sRGB, red: 0.604, green: 0.204, blue: 0.071, opacity: 1)
    static let orange900 = Color(.sRGB, red: 0.486, green: 0.176, blue: 0.071, opacity: 1)
    static let orange950 = Color(.sRGB, red: 0.263, green: 0.078, blue: 0.027, opacity: 1)
}

import androidx.compose.ui.graphics.Color

object Palette {
    val Orange50 = Color(0xFFFFF7ED)
    val Orange100 = Color(0xFFFFEDD5)
    val Orange200 = Color(0xFFFED7AA)
    val Orange300 = Color(0xFFFDBA74)
    val Orange400 = Color(0xFFFB923C)
    val Orange500 = Color(0xFFF97316)
    val Orange600 = Color(0xFFEA580C)
    val Orange700 = Color(0xFFC2410C)
    val Orange800 = Color(0xFF9A3412)
    val Orange900 = Color(0xFF7C2D12)
    val Orange950 = Color(0xFF431407)
}