Färgpaletter

Tailwind CSS-färgen teal

De 11 nyanserna av Tailwind CSS-färgen teal, från teal-50 (ljusast) till teal-950 (mörkast). Klicka på ett värde för att kopiera det.

Nyanser av teal

HEX och RGB från Tailwind v3; OKLCH från Tailwind v4. Klicka på ett värde för att kopiera det.

teal-50
teal-100
teal-200
teal-300
teal-400
teal-500
teal-600
teal-700
teal-800
teal-900
teal-950

Kopiera hela paletten

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-variabler (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;
}

Fler Tailwind-färger

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldcyanskyblueindigovioletpurplefuchsiapinkrose

Vanliga frågor

Vad är HEX-koden för Tailwind teal-500?

I Tailwind v3 är teal-500 #14B8A6, alltså rgb(20, 184, 166). I Tailwind v4 definieras den som oklch(70.4% 0.14 182.503).

Hur använder jag Tailwind teal i mitt projekt?

Med klasser som bg-teal-500, text-teal-700 eller border-teal-200. I Tailwind v4 kan du också använda CSS-variabeln var(--color-teal-500) i din egen CSS.

Andra ramverk

Tailwind CSS färgpalettMaterial Design färgpalettBootstraps färgpalettFärgpaletter från ramverk

Tailwind CSS, Material Design och Bootstrap är varumärken som tillhör respektive ägare. Värdena kommer från deras dokumentation och offentliga paket: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.