Tailwind rose 11 shades, 50 to 950

:root {
  --color-rose-50: #fff1f2;
  --color-rose-100: #ffe4e6;
  --color-rose-200: #fecdd3;
  --color-rose-300: #fda4af;
  --color-rose-400: #fb7185;
  --color-rose-500: #f43f5e;
  --color-rose-600: #e11d48;
  --color-rose-700: #be123c;
  --color-rose-800: #9f1239;
  --color-rose-900: #881337;
  --color-rose-950: #4c0519;
}

// tailwind.config.js — rose is built in; this pins the v3.4 values.
module.exports = {
  theme: {
    extend: {
      colors: {
        rose: {
          50: '#fff1f2',
          100: '#ffe4e6',
          200: '#fecdd3',
          300: '#fda4af',
          400: '#fb7185',
          500: '#f43f5e',
          600: '#e11d48',
          700: '#be123c',
          800: '#9f1239',
          900: '#881337',
          950: '#4c0519',
        },
      },
    },
  },
};

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

@theme {
  /* v4 has its own rose; these pin the v3 values. */
  --color-rose-50: oklch(0.969 0.015 12.4);
  --color-rose-100: oklch(0.941 0.030 12.6);
  --color-rose-200: oklch(0.892 0.056 10.0);
  --color-rose-300: oklch(0.810 0.106 11.6);
  --color-rose-400: oklch(0.719 0.169 13.4);
  --color-rose-500: oklch(0.645 0.215 16.4);
  --color-rose-600: oklch(0.586 0.222 17.6);
  --color-rose-700: oklch(0.514 0.198 16.9);
  --color-rose-800: oklch(0.455 0.171 13.7);
  --color-rose-900: oklch(0.410 0.150 10.3);
  --color-rose-950: oklch(0.271 0.101 12.1);
}

{
  "color": {
    "rose": {
      "50": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [1, 0.9451, 0.949],
          "hex": "#fff1f2"
        }
      },
      "100": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [1, 0.8941, 0.902],
          "hex": "#ffe4e6"
        }
      },
      "200": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9961, 0.8039, 0.8275],
          "hex": "#fecdd3"
        }
      },
      "300": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9922, 0.6431, 0.6863],
          "hex": "#fda4af"
        }
      },
      "400": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9843, 0.4431, 0.5216],
          "hex": "#fb7185"
        }
      },
      "500": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9569, 0.2471, 0.3686],
          "hex": "#f43f5e"
        }
      },
      "600": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.8824, 0.1137, 0.2824],
          "hex": "#e11d48"
        }
      },
      "700": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.7451, 0.0706, 0.2353],
          "hex": "#be123c"
        }
      },
      "800": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.6235, 0.0706, 0.2235],
          "hex": "#9f1239"
        }
      },
      "900": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.5333, 0.0745, 0.2157],
          "hex": "#881337"
        }
      },
      "950": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.298, 0.0196, 0.098],
          "hex": "#4c0519"
        }
      }
    }
  }
}

import SwiftUI

enum Palette {
    static let rose50 = Color(.sRGB, red: 1.000, green: 0.945, blue: 0.949, opacity: 1)
    static let rose100 = Color(.sRGB, red: 1.000, green: 0.894, blue: 0.902, opacity: 1)
    static let rose200 = Color(.sRGB, red: 0.996, green: 0.804, blue: 0.827, opacity: 1)
    static let rose300 = Color(.sRGB, red: 0.992, green: 0.643, blue: 0.686, opacity: 1)
    static let rose400 = Color(.sRGB, red: 0.984, green: 0.443, blue: 0.522, opacity: 1)
    static let rose500 = Color(.sRGB, red: 0.957, green: 0.247, blue: 0.369, opacity: 1)
    static let rose600 = Color(.sRGB, red: 0.882, green: 0.114, blue: 0.282, opacity: 1)
    static let rose700 = Color(.sRGB, red: 0.745, green: 0.071, blue: 0.235, opacity: 1)
    static let rose800 = Color(.sRGB, red: 0.624, green: 0.071, blue: 0.224, opacity: 1)
    static let rose900 = Color(.sRGB, red: 0.533, green: 0.075, blue: 0.216, opacity: 1)
    static let rose950 = Color(.sRGB, red: 0.298, green: 0.020, blue: 0.098, opacity: 1)
}

import androidx.compose.ui.graphics.Color

object Palette {
    val Rose50 = Color(0xFFFFF1F2)
    val Rose100 = Color(0xFFFFE4E6)
    val Rose200 = Color(0xFFFECDD3)
    val Rose300 = Color(0xFFFDA4AF)
    val Rose400 = Color(0xFFFB7185)
    val Rose500 = Color(0xFFF43F5E)
    val Rose600 = Color(0xFFE11D48)
    val Rose700 = Color(0xFFBE123C)
    val Rose800 = Color(0xFF9F1239)
    val Rose900 = Color(0xFF881337)
    val Rose950 = Color(0xFF4C0519)
}