הצבע amber ב-Tailwind CSS

הגוונים של amber

ערכי HEX ו-RGB מ-Tailwind v3, וערכי OKLCH מ-Tailwind v4. לחץ על ערך כדי להעתיק אותו.

העתקת הפלטה המלאה

Tailwind v4 (CSS, @theme)

העתקה@theme {
  --color-amber-50: oklch(98.7% 0.022 95.277);
  --color-amber-100: oklch(96.2% 0.059 95.617);
  --color-amber-200: oklch(92.4% 0.12 95.746);
  --color-amber-300: oklch(87.9% 0.169 91.605);
  --color-amber-400: oklch(82.8% 0.189 84.429);
  --color-amber-500: oklch(76.9% 0.188 70.08);
  --color-amber-600: oklch(66.6% 0.179 58.318);
  --color-amber-700: oklch(55.5% 0.163 48.998);
  --color-amber-800: oklch(47.3% 0.137 46.201);
  --color-amber-900: oklch(41.4% 0.112 45.904);
  --color-amber-950: oklch(27.9% 0.077 45.635);
}

Tailwind v3 (tailwind.config.js)

העתקהmodule.exports = {
  theme: {
    extend: {
      colors: {
        amber: {
          50: '⁦#fffbeb⁩',
          100: '⁦#fef3c7⁩',
          200: '⁦#fde68a⁩',
          300: '⁦#fcd34d⁩',
          400: '⁦#fbbf24⁩',
          500: '⁦#f59e0b⁩',
          600: '⁦#d97706⁩',
          700: '⁦#b45309⁩',
          800: '⁦#92400e⁩',
          900: '⁦#78350f⁩',
          950: '⁦#451a03⁩'
        }
      }
    }
  }
}

משתני CSS (HEX)

העתקה:root {
  --amber-50: ⁦#FFFBEB⁩;
  --amber-100: ⁦#FEF3C7⁩;
  --amber-200: ⁦#FDE68A⁩;
  --amber-300: ⁦#FCD34D⁩;
  --amber-400: ⁦#FBBF24⁩;
  --amber-500: ⁦#F59E0B⁩;
  --amber-600: ⁦#D97706⁩;
  --amber-700: ⁦#B45309⁩;
  --amber-800: ⁦#92400E⁩;
  --amber-900: ⁦#78350F⁩;
  --amber-950: ⁦#451A03⁩;
}

צבעים נוספים ב-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.