Színpaletták

Tailwind CSS szín: teal

A Tailwind CSS 11 árnyalata ebből a színből (teal): teal-50 a legvilágosabb, teal-950 a legsötétebb. Kattints egy értékre a másoláshoz.

Árnyalatok: teal

HEX és RGB a Tailwind v3-ból, OKLCH a Tailwind v4-ből. Kattints egy értékre a másoláshoz.

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

A teljes paletta másolása

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-változók (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;
}

További Tailwind színek

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldcyanskyblueindigovioletpurplefuchsiapinkrose

Gyakori kérdések

Mi a Tailwind teal-500 HEX-kódja?

A Tailwind v3-ban: teal-500 = #14B8A6, vagyis rgb(20, 184, 166). A Tailwind v4-ben ugyanez a szín így van megadva: oklch(70.4% 0.14 182.503).

Hogyan használom a Tailwind teal színt a projektemben?

Olyan osztályokkal, mint a bg-teal-500, a text-teal-700 vagy a border-teal-200. A Tailwind v4-ben a var(--color-teal-500) CSS-változót is használhatod a saját CSS-edben.

Más keretrendszerek

Tailwind CSS színpalettaMaterial Design színpalettaA Bootstrap színpalettájaKeretrendszerek színpalettái

A Tailwind CSS, a Material Design és a Bootstrap a tulajdonosaik védjegyei. Az értékek a dokumentációjukból és nyilvános csomagjaikból származnak: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.