Färgpaletter

Tailwind CSS-färgen yellow

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

Nyanser av yellow

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

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

Kopiera hela paletten

Tailwind v4 (CSS, @theme)

@theme {
  --color-yellow-50: oklch(98.7% 0.026 102.212);
  --color-yellow-100: oklch(97.3% 0.071 103.193);
  --color-yellow-200: oklch(94.5% 0.129 101.54);
  --color-yellow-300: oklch(90.5% 0.182 98.111);
  --color-yellow-400: oklch(85.2% 0.199 91.936);
  --color-yellow-500: oklch(79.5% 0.184 86.047);
  --color-yellow-600: oklch(68.1% 0.162 75.834);
  --color-yellow-700: oklch(55.4% 0.135 66.442);
  --color-yellow-800: oklch(47.6% 0.114 61.907);
  --color-yellow-900: oklch(42.1% 0.095 57.708);
  --color-yellow-950: oklch(28.6% 0.066 53.813);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        yellow: {
          50: '#fefce8',
          100: '#fef9c3',
          200: '#fef08a',
          300: '#fde047',
          400: '#facc15',
          500: '#eab308',
          600: '#ca8a04',
          700: '#a16207',
          800: '#854d0e',
          900: '#713f12',
          950: '#422006'
        }
      }
    }
  }
}

CSS-variabler (HEX)

:root {
  --yellow-50: #FEFCE8;
  --yellow-100: #FEF9C3;
  --yellow-200: #FEF08A;
  --yellow-300: #FDE047;
  --yellow-400: #FACC15;
  --yellow-500: #EAB308;
  --yellow-600: #CA8A04;
  --yellow-700: #A16207;
  --yellow-800: #854D0E;
  --yellow-900: #713F12;
  --yellow-950: #422006;
}

Fler Tailwind-färger

slategrayzincneutralstoneredorangeamberlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose

Vanliga frågor

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

I Tailwind v3 är yellow-500 #EAB308, alltså rgb(234, 179, 8). I Tailwind v4 definieras den som oklch(79.5% 0.184 86.047).

Hur använder jag Tailwind yellow i mitt projekt?

Med klasser som bg-yellow-500, text-yellow-700 eller border-yellow-200. I Tailwind v4 kan du också använda CSS-variabeln var(--color-yellow-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.