הצבע teal ב-Tailwind CSS

הגוונים של teal

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

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

Tailwind v4 (CSS, @theme)

העתקה@theme {
  --color-teal-50: oklch(98.4% 0.014 180.72);
  --color-teal-100: oklch(95.3% 0.051 180.801);
  --color-teal-200: oklch(91% 0.096 180.426);
  --color-teal-300: oklch(85.5% 0.138 181.071);
  --color-teal-400: oklch(77.7% 0.152 181.912);
  --color-teal-500: oklch(70.4% 0.14 182.503);
  --color-teal-600: oklch(60% 0.118 184.704);
  --color-teal-700: oklch(51.1% 0.096 186.391);
  --color-teal-800: oklch(43.7% 0.078 188.216);
  --color-teal-900: oklch(38.6% 0.063 188.416);
  --color-teal-950: oklch(27.7% 0.046 192.524);
}

Tailwind v3 (tailwind.config.js)

העתקהmodule.exports = {
  theme: {
    extend: {
      colors: {
        teal: {
          50: '⁦#f0fdfa⁩',
          100: '⁦#ccfbf1⁩',
          200: '⁦#99f6e4⁩',
          300: '⁦#5eead4⁩',
          400: '⁦#2dd4bf⁩',
          500: '⁦#14b8a6⁩',
          600: '⁦#0d9488⁩',
          700: '⁦#0f766e⁩',
          800: '⁦#115e59⁩',
          900: '⁦#134e4a⁩',
          950: '⁦#042f2e⁩'
        }
      }
    }
  }
}

משתני CSS (HEX)

העתקה:root {
  --teal-50: ⁦#F0FDFA⁩;
  --teal-100: ⁦#CCFBF1⁩;
  --teal-200: ⁦#99F6E4⁩;
  --teal-300: ⁦#5EEAD4⁩;
  --teal-400: ⁦#2DD4BF⁩;
  --teal-500: ⁦#14B8A6⁩;
  --teal-600: ⁦#0D9488⁩;
  --teal-700: ⁦#0F766E⁩;
  --teal-800: ⁦#115E59⁩;
  --teal-900: ⁦#134E4A⁩;
  --teal-950: ⁦#042F2E⁩;
}

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