Tailwind cyan 11 shades, 50 to 950

:root {
  --color-cyan-50: #ecfeff;
  --color-cyan-100: #cffafe;
  --color-cyan-200: #a5f3fc;
  --color-cyan-300: #67e8f9;
  --color-cyan-400: #22d3ee;
  --color-cyan-500: #06b6d4;
  --color-cyan-600: #0891b2;
  --color-cyan-700: #0e7490;
  --color-cyan-800: #155e75;
  --color-cyan-900: #164e63;
  --color-cyan-950: #083344;
}

// tailwind.config.js — cyan is built in; this pins the v3.4 values.
module.exports = {
  theme: {
    extend: {
      colors: {
        cyan: {
          50: '#ecfeff',
          100: '#cffafe',
          200: '#a5f3fc',
          300: '#67e8f9',
          400: '#22d3ee',
          500: '#06b6d4',
          600: '#0891b2',
          700: '#0e7490',
          800: '#155e75',
          900: '#164e63',
          950: '#083344',
        },
      },
    },
  },
};

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

@theme {
  /* v4 has its own cyan; these pin the v3 values. */
  --color-cyan-50: oklch(0.984 0.019 200.9);
  --color-cyan-100: oklch(0.956 0.044 203.4);
  --color-cyan-200: oklch(0.917 0.077 205.0);
  --color-cyan-300: oklch(0.865 0.115 207.1);
  --color-cyan-400: oklch(0.797 0.134 211.5);
  --color-cyan-500: oklch(0.715 0.126 215.2);
  --color-cyan-600: oklch(0.609 0.111 221.7);
  --color-cyan-700: oklch(0.520 0.094 223.1);
  --color-cyan-800: oklch(0.450 0.077 224.3);
  --color-cyan-900: oklch(0.398 0.066 227.4);
  --color-cyan-950: oklch(0.302 0.054 229.7);
}

{
  "color": {
    "cyan": {
      "50": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.9255, 0.9961, 1],
          "hex": "#ecfeff"
        }
      },
      "100": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.8118, 0.9804, 0.9961],
          "hex": "#cffafe"
        }
      },
      "200": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.6471, 0.9529, 0.9882],
          "hex": "#a5f3fc"
        }
      },
      "300": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.4039, 0.9098, 0.9765],
          "hex": "#67e8f9"
        }
      },
      "400": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.1333, 0.8275, 0.9333],
          "hex": "#22d3ee"
        }
      },
      "500": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0235, 0.7137, 0.8314],
          "hex": "#06b6d4"
        }
      },
      "600": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0314, 0.5686, 0.698],
          "hex": "#0891b2"
        }
      },
      "700": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0549, 0.4549, 0.5647],
          "hex": "#0e7490"
        }
      },
      "800": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0824, 0.3686, 0.4588],
          "hex": "#155e75"
        }
      },
      "900": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0863, 0.3059, 0.3882],
          "hex": "#164e63"
        }
      },
      "950": {
        "$type": "color",
        "$value": {
          "colorSpace": "srgb",
          "components": [0.0314, 0.2, 0.2667],
          "hex": "#083344"
        }
      }
    }
  }
}

import SwiftUI

enum Palette {
    static let cyan50 = Color(.sRGB, red: 0.925, green: 0.996, blue: 1.000, opacity: 1)
    static let cyan100 = Color(.sRGB, red: 0.812, green: 0.980, blue: 0.996, opacity: 1)
    static let cyan200 = Color(.sRGB, red: 0.647, green: 0.953, blue: 0.988, opacity: 1)
    static let cyan300 = Color(.sRGB, red: 0.404, green: 0.910, blue: 0.976, opacity: 1)
    static let cyan400 = Color(.sRGB, red: 0.133, green: 0.827, blue: 0.933, opacity: 1)
    static let cyan500 = Color(.sRGB, red: 0.024, green: 0.714, blue: 0.831, opacity: 1)
    static let cyan600 = Color(.sRGB, red: 0.031, green: 0.569, blue: 0.698, opacity: 1)
    static let cyan700 = Color(.sRGB, red: 0.055, green: 0.455, blue: 0.565, opacity: 1)
    static let cyan800 = Color(.sRGB, red: 0.082, green: 0.369, blue: 0.459, opacity: 1)
    static let cyan900 = Color(.sRGB, red: 0.086, green: 0.306, blue: 0.388, opacity: 1)
    static let cyan950 = Color(.sRGB, red: 0.031, green: 0.200, blue: 0.267, opacity: 1)
}

import androidx.compose.ui.graphics.Color

object Palette {
    val Cyan50 = Color(0xFFECFEFF)
    val Cyan100 = Color(0xFFCFFAFE)
    val Cyan200 = Color(0xFFA5F3FC)
    val Cyan300 = Color(0xFF67E8F9)
    val Cyan400 = Color(0xFF22D3EE)
    val Cyan500 = Color(0xFF06B6D4)
    val Cyan600 = Color(0xFF0891B2)
    val Cyan700 = Color(0xFF0E7490)
    val Cyan800 = Color(0xFF155E75)
    val Cyan900 = Color(0xFF164E63)
    val Cyan950 = Color(0xFF083344)
}