Renk Paleti Oluşturucu (bir ana renkten 5 şema)

Beş renk teorisi şeması

Tamamlayıcı: renk çemberinin karşı uçlarındaki iki renk (180° aralıklı). Yüksek kontrast, canlı. Vurgular, eylem çağrısı düğmeleri ve odak noktaları oluşturmak için kullanılır.

Analogous: çemberde komşu üç renk (30° aralıklı). Uyumlu ve hoş, düşük kontrast. Doğada yaygın; arka planlar ve UI yüzeyleri için harika.

Üçlü: eşit aralıklı üç renk (120° aralıklı). Canlı ve dengeli. Oyunbaz veya enerjik tasarımlarda kullanılır.

Dörtlü (dikdörtgen): dikdörtgen oluşturan dört renk (90° aralıklı). Zengin palet ama dengelemesi daha zor — genellikle birini baskın olarak, diğerlerini vurgu olarak kullan.

Monokromatik: tek bir tonun tonları, açık ve koyu varyantları. Sofistike ve birleşik. Minimalist tasarımlarda ve kurumsal markalaşmada yaygın.

Başlangıç rengi seçme

Marka renkleri: çoğu proje mevcut bir logo veya marka renginden başlar. Tasarımın için en iyi uyumu bulmak üzere onu tüm 5 şema boyunca ana renk olarak test et.

İlham: fotoğraf, sanat veya doğadan bir renk seç. Canlı renkler (yüksek doygunluk, orta parlaklık) ana renk olarak en iyi çalışır; çok açık veya çok koyu renkler soluk paletler üretir.

Erişilebilirlik: nihai paletin metin için yeterli kontrasta sahip olduğundan emin ol. Ön plan/arka plan çiftlerinin WCAG AA'yı (normal metin için 4,5:1) karşıladığını doğrulamak için kontrast kontrolü aracımızı kullan.

Paleti kullanma

CSS değişkenleri: palet renklerini :root değişkenleri olarak tanımla (--renk-birincil, --renk-vurgu vb.) böylece temaları tek bir yerden değiştirerek taşıyabilirsin.

Tasarım araçları: Figma, Sketch veya Adobe XD'nin renk kütüphanelerine hex değerleri yapıştır. Çoğu araç hex'i doğrudan kabul eder; bazıları HSL veya adlandırılmış CSS renkleri de kabul eder.

Kullanımı sınırla: 5 renkle bile gerçek tasarımlar genellikle 2-3 rengi belirgin biçimde ve geri kalanını az kullanır. 60-30-10 kuralı (%60 baskın, %30 ikincil, %10 vurgu) yararlı bir başlangıç dengesidir.