Kolor yellow w Tailwind CSS

11 odcieni koloru yellow w Tailwind CSS, od yellow-50 (najjaśniejszego) do yellow-950 (najciemniejszego). Kliknij dowolną wartość, aby ją skopiować.

Odcienie yellow

HEX i RGB z Tailwind v3; OKLCH z Tailwind v4. Kliknij wartość, aby ją skopiować.

yellow-50

yellow-100

yellow-200

yellow-300

yellow-400

yellow-500

yellow-600

yellow-700

yellow-800

yellow-900

yellow-950

Skopiuj całą paletę

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'
        }
      }
    }
  }
}

Zmienne CSS (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;
}

Inne kolory Tailwind

slate gray zinc neutral stone red orange amber lime green emerald teal cyan sky blue indigo violet purple fuchsia pink rose

Najczęściej zadawane pytania

Jaki jest kod HEX Tailwind yellow-500?

W Tailwind v3 yellow-500 to #EAB308, czyli rgb(234, 179, 8). W Tailwind v4 jest zdefiniowany jako oklch(79.5% 0.184 86.047).

Jak użyć Tailwind yellow w moim projekcie?

Za pomocą klas takich jak bg-yellow-500, text-yellow-700 czy border-yellow-200. W Tailwind v4 możesz też użyć zmiennej CSS var(--color-yellow-500) we własnym CSS.

Inne frameworki

Tailwind CSS, Material Design i Bootstrap są znakami towarowymi ich właścicieli. Wartości pochodzą z ich dokumentacji i publicznych pakietów: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.