Renk Paleti Jeneratörü

Uyum Şemaları

• Tamamlayıcı: renk tekerleğindeki temel renk ile tam tersi renk (180°). Yüksek kontrastlı ve canlı bir görünüm sunar; marka renginin üzerinde yer alan eyleme çağırma butonları için uygundur.
• Analog: Birbirinden 30° içinde yer alan 3–5 renk tonu. Sakin, uyumlu ve genellikle sıcak veya soğuk bir renk ailesine aittir. Tek bir renk ailesi teması taşıyan arka planlar ve illüstrasyonlar için uygundur.
• Triadik: 3 renk tonu eşit aralıklarla (120°) yerleştirilmiştir; canlı ve dengeli bir görünüm sunar. Çocuk ürünlerinde ve güçlü markalarda sıkça kullanılır.
• Bölünmüş tamamlayıcı: temel renk + tamamlayıcının iki yanındaki renk tonları (150° ve 210°). Tamamlayıcı renklere göre daha zengin bir görünüm sunar ve daha yumuşak bir etki yaratır.
• Tetradik/kare: 90° açıda yer alan 4 renk tonu. Dengelemesi daha zordur; bunlardan birini baskın olarak seçin.
• Monokromatik: tek bir renk tonu, değişken doygunluk ve parlaklık seviyeleri; zarif ve tutarlıdır; nötr bir renkle eşleştirilmedikçe belirgin bir vurgu sunmaz.

Gerçek iş için palet yapısı

Tasarım sistemleri genellikle şunları gerektirir:

• Başlıca (temel marka)
• İkincil (destekleyici marka)
• Akcent (CTA, vurgular)
• Nötr ölçek (arka planlar, metinler, kenarlar – 5–10 gri tonu)
• Semantik (başarı, uyarı, hata, bilgi)
• Yüzey (panel arka planları, üst katmanlar)

Uyum paleti size birincil, ikincil ve vurgu renklerini sağlar. Nötr renkler ile semantik renkler genellikle ayrı kurallara tabidir (çözgütlenmiş yakın gri tonlar; standartlaştırılmış semantik tonlar).

Çıkış formatları

CSS özelleştirilmiş özellikler:

:root {
  --brand-primary: #2E86AB;
  --brand-secondary: #A23B72;
  --brand-accent: #F18F01;
  --brand-neutral: #C73E1D;
}

Tayfun Konfigürasyonu:

theme: {
  extend: {
    colors: {
      brand: {
        primary: '#2E86AB',
        secondary: '#A23B72',
        accent: '#F18F01',
      }
    }
  }
}

SCSS:

$brand-primary: #2E86AB;
$brand-secondary: #A23B72;

Kontrast ve erişilebilirlik

Uyum şemaları erişilebilirliği garanti etmez. Palet kombinasyonlarını WCAG kontrast gerekliliklerine göre kontrol edin:

• Metin arka plana göre: En az 4,5:1 oranında (AA).
• Büyük metin: 3:1.
• Metinsel olmayan bileşenler (düğmeler, ikonlar, odak halkaları): 3:1

Uygun kombinasyonları bulmak için jeneratörü kontrast kontrol cihazıyla birleştirin.

İpuçları

• Rastgele değil, belirlenmiş bir temel renkle başlayın; temelin anlamlı olması (markanız, sevdiğiniz bir fotoğraf veya kültürel bir referans) uyumların daha amaçlı ve etkileyici görünmesini sağlar.
• Paleti gerçek kullanım koşullarında test edin: bir düğme üzerinde, metin üzerinde veya bir grafikte. Swatch’lerde iyi görünmesi, kullanıcı arayüzünde düzgün çalışacağını garanti etmez.
• Büyük yüzeyler için tasarlanan paletlerde doygunluğu hafifçe azaltın; tamamen doymuş arka planlar yorgunluk yaratabilir.
• Aksanları nadiren kullanın: Bir kullanıcı arayüzünün %80’i ana ve %20’si yan bileşen ise, en yüksek etkiyi elde etmek için dokunma noktalarının (%10’unu) aksan renginde gösterin.