Tailwind CSS Renkleri vs Algısal Renk Skalası

Tailwind CSS, modern web gelistirmenin en populer utility-first CSS framework'u. Renk sistemi -- blue-50'den blue-950'ye uzanan 11 adimlik skala -- binlerce projede standart haline geldi. Ama bu skalanin nasil olusturuldugunu hic dusundunuz mu? Ve daha onemlisi: her adim arasindaki algisal fark gercekten esit mi?

Bu yazida Tailwind'in elle olusturulmus renk skalasini inceliyoruz, adimlar arasindaki algisal esitsizligi olcuyoruz ve Helmlab ile ayni temel renkten algisal olarak duzgun skalalar uretmenin nasil mumkun oldugunu gosteriyoruz.

Tailwind'in 50-950 Skalasi Nasil Olusturuldu?

Tailwind CSS'in renk skalasi bir algoritmadan cikmiyor. Adam Wathan ve Steve Schoger, Tailwind'in renk paletini elle, goz karari ile olusturdu. Her bir renk degeri (blue-50, blue-100, ..., blue-950), tasarimcilar tarafindan tek tek secilip hassas sekilde ayarlandi.

Bu yaklasimin bazi avantajlari var:

• Gorusel cekicilik -- Deneyimli tasarimcilar tarafindan her renk degeri goze hos gorunecek sekilde secildi.
• Pratik kullanilabilirlik -- Her adim, UI komponentlerinde iyi calisan bir deger olarak dogrulandi.
• Marka uyumu -- Renkler birbiriyle harmonik gorunecek sekilde duzenlendi.

Ancak elle olusturulan bir skalanin kacinilmaz bir sorunu var: adimlar arasi algisal fark sabit degil. 300'den 400'e gecis ile 700'den 800'e gecis, gozunuzun hissettigi "farklilik" acisindan birbirinden tamamen farkli olabilir.

Adimlar Arasi Algisal Esitsizlik: Olcumler

Tailwind'in blue skalasindaki ardisik adimlar arasindaki algisal mesafeyi Helmlab'in deltaE fonksiyonuyla olcebiliriz. Daha yuksek deltaE = daha buyuk algisal fark demektir:

import { Helmlab } from 'helmlab';

const hl = new Helmlab();

// Tailwind CSS blue skalasi (gercek hex degerleri)
const tailwindBlue = {
  '50':  '#eff6ff',
  '100': '#dbeafe',
  '200': '#bfdbfe',
  '300': '#93c5fd',
  '400': '#60a5fa',
  '500': '#3b82f6',
  '600': '#2563eb',
  '700': '#1d4ed8',
  '800': '#1e40af',
  '900': '#1e3a8a',
  '950': '#172554',
};

// Ardisik adimlar arasindaki algisal mesafe
const levels = Object.keys(tailwindBlue);
for (let i = 0; i < levels.length - 1; i++) {
  const a = tailwindBlue[levels[i]];
  const b = tailwindBlue[levels[i + 1]];
  const dE = hl.deltaE(a, b);
  console.log(`${levels[i]} → ${levels[i+1]}: deltaE = ${dE.toFixed(3)}`);
}

// Sonuc:
//  50 → 100:  deltaE = 0.032
// 100 → 200:  deltaE = 0.051
// 200 → 300:  deltaE = 0.067
// 300 → 400:  deltaE = 0.087
// 400 → 500:  deltaE = 0.074
// 500 → 600:  deltaE = 0.044
// 600 → 700:  deltaE = 0.035
// 700 → 800:  deltaE = 0.042
// 800 → 900:  deltaE = 0.031
// 900 → 950:  deltaE = 0.038

Rakamlara bakin: en buyuk adim (300 → 400, dE=0.087) en kucuk adimdan (50 → 100, dE=0.032) neredeyse 3 kat daha buyuk. Bu, gozunuzun 300'den 400'e gecerken hissettigi degisimin, 50'den 100'e gecerken hissettigi degisimin uc kati oldugu anlamina gelir.

Bu durum sadece mavi icin gecerli degil. Tailwind'in her renk ailesi bu sorunu tasiyor, cunku elle ayarlama islemi perceptual mesafe olcumune dayanmiyor.

Helmlab ile Algisal Olarak Duzgun Skala Uretimi

Helmlab'in semanticScale fonksiyonu, ayni temel renkten (ornegin Tailwind blue-500) baslayarak algisal olarak esit aralikli bir 50-950 skalasi uretir. Adimlar arasindaki mesafe, 64.000 insan renk farki gozlemine dayanan 72 parametreli bir model tarafindan hesaplanir:

import { Helmlab } from 'helmlab';

const hl = new Helmlab();

// Tailwind blue-500 temel renk
const helmlabBlue = hl.semanticScale('#3B82F6');
// {
//   '50':  '#b3c7ff',
//   '100': '#aabdff',
//   '200': '#96aaff',
//   '300': '#809aff',
//   '400': '#628eff',
//   '500': '#3b82f6',
//   '600': '#0263ca',
//   '700': '#0048a2',
//   '800': '#003179',
//   '900': '#00184b',
//   '950': '#000b2f',
// }

// Adimlar arasi algisal mesafeyi olc
const levels = Object.keys(helmlabBlue);
for (let i = 0; i < levels.length - 1; i++) {
  const a = helmlabBlue[levels[i]];
  const b = helmlabBlue[levels[i + 1]];
  const dE = hl.deltaE(a, b);
  console.log(`${levels[i]} → ${levels[i+1]}: deltaE = ${dE.toFixed(3)}`);
}

// Sonuc: tum adimlar birbirine yakin (+/-%5 icinde)

Fark anlasilir: Helmlab'in olceginde her adim arasindaki algisal mesafe neredeyse ayni. Gozunuz 300'den 400'e gecerken hissettigi "farklilik" ile 700'den 800'e gecerken hissettigi "farklilik" esit.

Yan Yana: Tailwind Blue vs Helmlab Blue

Ayni temel renk (#3B82F6) icin iki skalayı karsilastirin:

Dikkat edin: Tailwind skalasinda acik tonlar arasindaki gecis cok yavas (50-100-200 arasinda az fark), ama orta tonlarda (300-400-500) ani bir sicrama var. Helmlab skalasinda ise her adim gorusel olarak esit bir fark yaratiyor.

Tasarim Sistemlerindeki Etkisi: Renkler Arasi Tutarlilik

Tek bir renk ailesi icin esitsizlik sinirli bir sorun gibi gorunebilir. Ama bir tasarim sistemi dusunun: mavi, kirmizi, yesil, sari, mor -- her renk ailesinin 50-950 skalasi var. Tailwind'in yaklasiminda:

• Farkli renkler, farkli esitsizlik paternleri -- Blue-300 ile blue-400 arasindaki algisal atlama, red-300 ile red-400 arasindaki atlamadan farkli. Dolayisiyla "300" ve "400" kavramlari renkten renge farkli seyler ifade eder.
• Gri yuzeylerle uyumsuzluk -- gray-200 arka plan uzerine konan blue-700 ile red-700 metni, farkli algisal kontrast oranina sahip olabilir -- ayni numara olmarina ragmen.
• Dark mode gecislerinde tutarsizlik -- Light mode'da blue-100 arka plan kullaniyorsaniz, dark mode'da "karsiligi" olan blue-800 ile ayni algisal iliskiyi korumak zordur.

Helmlab ile bu sorunlar ortadan kalkar, cunku her renk ailesinin her adimi ayni algisal modele dayanir. Mavi-400 ile mavi-500 arasindaki algisal fark, kirmizi-400 ile kirmizi-500 arasindaki fark ile tutarlidir.

Birden Fazla Renk Icin Duzgun Skalalar

import { Helmlab } from 'helmlab';

const hl = new Helmlab();

// Tasarim sistemi icin tum renk aileleri
const system = {
  blue:   hl.semanticScale('#3B82F6'),
  red:    hl.semanticScale('#EF4444'),
  green:  hl.semanticScale('#22C55E'),
  amber:  hl.semanticScale('#F59E0B'),
  purple: hl.semanticScale('#8B5CF6'),
  gray:   hl.semanticScale('#6B7280'),
};

// Her rengin 400→500 adimindaki algisal mesafe ayni
const blueStep = hl.deltaE(system.blue['400'], system.blue['500']);
const redStep  = hl.deltaE(system.red['400'],  system.red['500']);
const greenStep = hl.deltaE(system.green['400'], system.green['500']);
console.log(`Blue 400→500:  ${blueStep.toFixed(3)}`);
console.log(`Red 400→500:   ${redStep.toFixed(3)}`);
console.log(`Green 400→500: ${greenStep.toFixed(3)}`);
// Tum degerler birbirine yakin

Helmlab ile Tailwind-Uyumlu Skala Uretmek

Helmlab, Tailwind'in beklenen 50-950 formatinda dogrudan cikti uretir. Bunu Tailwind konfigurasyonunuza entegre etmek birkaç satir suruyor:

// scripts/generate-colors.mjs
import { Helmlab } from 'helmlab';

const hl = new Helmlab();

// Marka renklerinizi tanimlayin
const brandColors = {
  primary:   '#3B82F6',  // mavi
  secondary: '#8B5CF6',  // mor
  success:   '#22C55E',  // yesil
  danger:    '#EF4444',  // kirmizi
  warning:   '#F59E0B',  // sari
  neutral:   '#6B7280',  // gri
};

// Her marka renginden algisal olarak duzgun skala uret
const scales = {};
for (const [name, hex] of Object.entries(brandColors)) {
  scales[name] = hl.semanticScale(hex);
}

// Tailwind config formatinda JSON ciktisi
console.log(JSON.stringify(scales, null, 2));

Tailwind Konfigurasyonunda Kullanim

// tailwind.config.js
import { Helmlab } from 'helmlab';

const hl = new Helmlab();

/** @type {import('tailwindcss').Config} */
export default {
  theme: {
    colors: {
      // Helmlab ile algisal olarak duzgun skalalar
      primary:   hl.semanticScale('#3B82F6'),
      secondary: hl.semanticScale('#8B5CF6'),
      success:   hl.semanticScale('#22C55E'),
      danger:    hl.semanticScale('#EF4444'),
      warning:   hl.semanticScale('#F59E0B'),
      neutral:   hl.semanticScale('#6B7280'),

      // Ozel renkler
      white: '#ffffff',
      black: '#000000',
      transparent: 'transparent',
    },
  },
};

Bu konfigurasyonla, bg-primary-200, text-danger-700, border-success-400 gibi tum Tailwind class'lari calismaya devam eder -- ama artik her adim algisal olarak dogrulanmistir.

Neden Onemli: Sayi Konusan

Sorunun boyutunu somutlastiralim. Tailwind'in tum renk aileleri uzerinde adim esitsizligini olcersek:

Tailwind'de en buyuk adim ile en kucuk adim arasinda 2-3 kat fark var. Helmlab'da bu oran neredeyse 1'e yakin -- yani adimlar gercekten esit.

Sonuc

Tailwind CSS, harika bir framework ve renk skalasi pek cok proje icin yeterli. Ancak elle ayarlanmis skalalar, dogalari geregi algisal olarak esit olamaz. Bir tasarim sistemi kuruyorsaniz veya farkli renk aileleri arasinda tutarlilik istiyorsaniz, Helmlab bu sorunu kokeninden cozuyor.

Helmlab'in 72 parametreli modeli, 64.000 insan gozlemine dayanarak her adimin algisal mesafesini hesaplar. Sonuc: Tailwind'in biclendirme gucunu, bilimsel olarak dogrulanmis renk skalalarıyla birlestirmek mumkun.

npm install helmlab

Kaynak kod: GitHub | Paket: npm

Bu yazi, Helmlab serisinin 5. yazisidir. Bir sonraki yazida: Helmholtz-Kohlrausch etkisi -- doygun renklerin neden beklenenden daha parlak gorundugunun bilimi.