Renk Paletleri

Tailwind CSS blue rengi

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

blue tonları

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

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

Paletin tamamını kopyala

Tailwind v4 (CSS, @theme)

@theme {
  --color-blue-50: oklch(97% 0.014 254.604);
  --color-blue-100: oklch(93.2% 0.032 255.585);
  --color-blue-200: oklch(88.2% 0.059 254.128);
  --color-blue-300: oklch(80.9% 0.105 251.813);
  --color-blue-400: oklch(70.7% 0.165 254.624);
  --color-blue-500: oklch(62.3% 0.214 259.815);
  --color-blue-600: oklch(54.6% 0.245 262.881);
  --color-blue-700: oklch(48.8% 0.243 264.376);
  --color-blue-800: oklch(42.4% 0.199 265.638);
  --color-blue-900: oklch(37.9% 0.146 265.522);
  --color-blue-950: oklch(28.2% 0.091 267.935);
}

Tailwind v3 (tailwind.config.js)

module.exports = {
  theme: {
    extend: {
      colors: {
        blue: {
          50: '#eff6ff',
          100: '#dbeafe',
          200: '#bfdbfe',
          300: '#93c5fd',
          400: '#60a5fa',
          500: '#3b82f6',
          600: '#2563eb',
          700: '#1d4ed8',
          800: '#1e40af',
          900: '#1e3a8a',
          950: '#172554'
        }
      }
    }
  }
}

CSS değişkenleri (HEX)

:root {
  --blue-50: #EFF6FF;
  --blue-100: #DBEAFE;
  --blue-200: #BFDBFE;
  --blue-300: #93C5FD;
  --blue-400: #60A5FA;
  --blue-500: #3B82F6;
  --blue-600: #2563EB;
  --blue-700: #1D4ED8;
  --blue-800: #1E40AF;
  --blue-900: #1E3A8A;
  --blue-950: #172554;
}

Diğer Tailwind renkleri

slategrayzincneutralstoneredorangeamberyellowlimegreenemeraldtealcyanskyindigovioletpurplefuchsiapinkrose

Sıkça sorulan sorular

Tailwind blue-500 için HEX kodu nedir?

Tailwind v3'te blue-500 değeri #3B82F6, yani rgb(59, 130, 246). Tailwind v4'te ise oklch(62.3% 0.214 259.815) olarak tanımlanır.

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

bg-blue-500, text-blue-700 veya border-blue-200 gibi sınıflarla. Tailwind v4'te kendi CSS'inde var(--color-blue-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.