Renk Paleti Oluşturucu (bir ana renkten 5 şema)
Bir ana renk seç, bir renk teorisi şeması seç ve koordineli bir palet al. Bireysel hex değerleri kopyalamak için renk örneklerine tıkla veya tasarım araçlarında ve CSS değişkenlerinde kullanmak için hepsini bir anda kopyala.
Oluşturulan palet
- #3BDFF6
- #3B82F6
- #513BF6
Nasıl çalışır
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.
Sık sorulan sorular
›Hangi şemayı kullanmalıyım?
Analogous, çoğu tasarım için en güvenli seçimdir — üç yakın renk tekdüzelik olmadan uyum yaratır. Tamamlayıcı vurgu için iyi çalışır (CTA düğmeleri). Monokromatik minimal/sofistike markalar için en iyi. Üçlü oyunbaz/enerjik his için.
›5'ten fazla renk alabilir miyim?
Bu araçtan değil — kanonik 2-5 renk şemalarını oluşturuyoruz. Daha büyük paletler için analogous çıktısını kullan ve her birinin monokromatik tonlarını oluştur (şemaları birleştir).
›Algoritma algısal olarak tek biçimli renk uzayı kullanıyor mu?
HSL matematiği kullanıyoruz; hızlı ve öngörülebilir. Algısal olarak tek biçimli sonuçlar için (erişilebilirlik ayarlı paletler için daha iyi) gelişmiş araçlar OKLCH veya CIELAB kullanır. HSL çoğu tasarım çalışması için yeterlidir.
›Paletim erişilebilir olacak mı?
Otomatik olarak değil. Renk teorisi şemaları estetik uyum garanti eder, metin için kontrast değil. Yayınlamadan önce metin-arka plan kombinasyonlarını her zaman kontrast kontrolü aracımızla doğrula.
›Favori paletlerimi kaydedebilir miyim?
Henüz değil — hex kodlarını tasarım sistemine veya notlarına kopyala. Yer imleye alınabilir palet URL'leri yol haritasında var.
›Material Design veya Tailwind paletleri hakkında ne söyleyebilirsin?
Bunlar önceden küratörlenmiş sistemlerdir. Burada bir temel şema oluştur, ardından benzer Material/Tailwind renklerine bak. Bazı uygulamalar bu sistemlerle doğrudan uyumlu hex kodları dışa aktarır.
›Paletim neden 'düz' görünüyor?
Ana rengin çok açık (yüksek parlaklık) veya çok koyu (düşük parlaklık) ise, oluşturulan paletin sınırlı dinamik aralığı vardır. Canlı sonuçlar için orta parlaklık (%40-60) ve yüksek doygunluk (%70+) olan bir ana renk seç.
›Veriler tarayıcımı terk ediyor mu?
Hayır. Tüm hesaplamalar yerel olarak çalışır; sunucuya hiçbir şey gönderilmez.
İlgili araçlar
Son güncelleme: