Fargepaletter

Tailwind CSS-fargen amber

De 11 nyansene av Tailwind CSS-fargen amber, fra amber-50 (lysest) til amber-950 (mørkest). Klikk på en verdi for å kopiere den.

Nyanser av amber

HEX og RGB fra Tailwind v3; OKLCH fra Tailwind v4. Klikk på en verdi for å kopiere den.

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

Kopier hele paletten

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

Flere Tailwind-farger

slategrayzincneutralstoneredorangeyellowlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose

Vanlige spørsmål

Hva er HEX-koden for Tailwind amber-500?

I Tailwind v3 er amber-500 #F59E0B, altså rgb(245, 158, 11). I Tailwind v4 er den definert som oklch(76.9% 0.188 70.08).

Hvordan bruker jeg Tailwind amber i prosjektet mitt?

Med klasser som bg-amber-500, text-amber-700 eller border-amber-200. I Tailwind v4 kan du også bruke CSS-variabelen var(--color-amber-500) i din egen CSS.

Andre rammeverk

Tailwind CSS fargepalettMaterial Design fargepalettBootstraps fargepalettFargepaletter fra rammeverk

Tailwind CSS, Material Design og Bootstrap er varemerker som tilhører sine respektive eiere. Verdiene kommer fra dokumentasjonen og de offentlige pakkene deres: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.