Renk Paletleri

Tailwind CSS yellow rengi

Tailwind CSS yellow renginin 11 tonu: en açık yellow-50'den en koyu yellow-950'ye kadar. Kopyalamak için herhangi bir değere tıkla.

yellow tonları

HEX ve RGB Tailwind v3'ten, OKLCH Tailwind v4'ten. Kopyalamak için bir değere tıkla.

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

Paletin tamamını kopyala

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 değişkenleri (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;
}

Diğer Tailwind renkleri

slategrayzincneutralstoneredorangeamberlimegreenemeraldtealcyanskyblueindigovioletpurplefuchsiapinkrose

Sıkça sorulan sorular

Tailwind yellow-500 için HEX kodu nedir?

Tailwind v3'te yellow-500 değeri #EAB308, yani rgb(234, 179, 8). Tailwind v4'te ise oklch(79.5% 0.184 86.047) olarak tanımlanır.

Tailwind yellow rengini projemde nasıl kullanırım?

bg-yellow-500, text-yellow-700 veya border-yellow-200 gibi sınıflarla. Tailwind v4'te kendi CSS'inde var(--color-yellow-500) CSS değişkenini de kullanabilirsin.

Diğer framework'ler

Tailwind CSS renk paletiMaterial Design renk paletiBootstrap renk paletiFramework renk paletleri

Tailwind CSS, Material Design ve Bootstrap, ilgili sahiplerinin markalarıdır. Değerler, bu projelerin dokümantasyonundan ve herkese açık paketlerinden alınmıştır: Tailwind CSS 4.3.3 / 3.4.19, material-colors, Material Web (tokens), Bootstrap 5.3.8 / 4.6.2.