لون cyan في Tailwind CSS

درجات cyan

قيم HEX وRGB من Tailwind v3، وقيم OKLCH من Tailwind v4. اضغط على أي قيمة لنسخها.

انسخ اللوحة كاملة

Tailwind v4 (CSS، @theme)

نسخ@theme {
  --color-cyan-50: oklch(98.4% 0.019 200.873);
  --color-cyan-100: oklch(95.6% 0.045 203.388);
  --color-cyan-200: oklch(91.7% 0.08 205.041);
  --color-cyan-300: oklch(86.5% 0.127 207.078);
  --color-cyan-400: oklch(78.9% 0.154 211.53);
  --color-cyan-500: oklch(71.5% 0.143 215.221);
  --color-cyan-600: oklch(60.9% 0.126 221.723);
  --color-cyan-700: oklch(52% 0.105 223.128);
  --color-cyan-800: oklch(45% 0.085 224.283);
  --color-cyan-900: oklch(39.8% 0.07 227.392);
  --color-cyan-950: oklch(30.2% 0.056 229.695);
}

Tailwind v3 (tailwind.config.js)

نسخ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⁩'
        }
      }
    }
  }
}

متغيرات CSS (HEX)

نسخ:root {
  --cyan-50: ⁦#ECFEFF⁩;
  --cyan-100: ⁦#CFFAFE⁩;
  --cyan-200: ⁦#A5F3FC⁩;
  --cyan-300: ⁦#67E8F9⁩;
  --cyan-400: ⁦#22D3EE⁩;
  --cyan-500: ⁦#06B6D4⁩;
  --cyan-600: ⁦#0891B2⁩;
  --cyan-700: ⁦#0E7490⁩;
  --cyan-800: ⁦#155E75⁩;
  --cyan-900: ⁦#164E63⁩;
  --cyan-950: ⁦#083344⁩;
}

ألوان أخرى في Tailwind

أطر عمل أخرى

Tailwind CSS وMaterial Design وBootstrap علامات تجارية مملوكة لأصحابها. القيم مأخوذة من الوثائق الرسمية والحزم المنشورة لكل مشروع: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.