Renk Paleti Oluşturucu

Renk teorisine dayalı uyumlu paletler oluşturun — tamamlayıcı, üçgen, analojik ve daha fazlası

Paylaş:
Click any color swatch to copy its hex code
Copied!

Renk Paleti Oluşturucu Neden Kullanılır?

Uyumlu renkler seçmek, renk teorisi bilgisi gerektirir. Oluşturucumuz, HSL matematiğini kullanarak herhangi bir temel renkten otomatik olarak uyumlu paletler hesaplar; böylece tasarımcılar ve geliştiriciler saniyeler içinde profesyonel renk şemaları oluşturabilir.

🎨

6 Uyum Modu

Tamamlayıcı, üçgen, analojik, bölünmüş tamamlayıcı, dörtlü, monokromatik tonlar

👁️

Renk Örneği Önizleme

Bir örneğe tıklayın; onaltılık kodu anında panoya kopyalanır

📋

CSS Değişkeni Dışa Aktarma

Paletini özel CSS özellikleri olarak dışa aktarın — stil sayfanıza yapıştırmanız yeterli

3 Adımda Palet Oluşturma

1

Temel Rengi Seçin

Renk seçiciyi kullanın veya marka/başlangıç renginizi ayarlamak için onaltılı kod girin

2

Uyum Türünü Seçin

Tasarımınıza uygun tamamlayıcı, üçgen veya analojik gibi uyumu seçin

3

Kopyalayın ve Kullanın

Onaltılı kodu kopyalamak için örneğe tıklayın veya tüm paleti 'CSS Değişkeni Olarak Kopyala' ile dışa aktarın

Renk Paleti Kullanım Alanları

🌐

Web Tasarımı

Marka birincil renginizi temel alarak web sitesi için eksiksiz renk sistemi oluşturun

🏢

Marka Kimliği

Birincil, ikincil ve vurgu renkleri içeren profesyonel marka paleti geliştirin

📱

UI/UX Tasarımı

Uygulama düğmeleri, metinleri ve arka planları için erişilebilir tutarlı renkler oluşturun

📊

Veri Görselleştirme

Grafik, tablo ve analiz panoları için ayırt edilebilir kategori renkleri oluşturun

Renk Tasarımı En İyi Uygulamaları

✓ Renk Kontrastını Doğrulayın (WCAG)

Metin/arka plan çiftlerinin erişilebilirlik için WCAG AA kontrast oranını (normal metin 4,5:1) karşıladığından emin olun.

✓ Paleti Sınırlayın

3-5 renkle sınırlayın: 1 birincil, 1 ikincil, 1-2 vurgu, nötr. Çok fazla renk görsel gürültüye yol açar.

✓ Renk Psikolojisini Gözetin

Mavi=güven/profesyonellik, yeşil=büyüme/başarı, kırmızı=aciliyet/enerji, sarı=iyimserlik. Markayı mesajla hizalayın.

✓ Karanlık Modda Test Edin

Karanlık mod çeşitleri için parlaklık değerlerini ayarlayın. Saf siyah (#000) veya saf beyaz (#fff) genellikle ideal değildir.

❓ Sık Sorulan Sorular

Tamamlayıcı renk şeması nedir?
Tamamlayıcı renkler, renk çemberinde karşı taraflarda yer alır (mavi-turuncu, kırmızı-yeşil gibi). Yüksek kontrast ve görsel enerji yaratır; CTA düğmeleri ve vurgular için idealdir.
Analojik renk şemasını ne zaman kullanmalıyım?
Analojik şema, renk çemberinde komşu 3 rengi kullanır. Düşük kontrastlı, uyumlu ve sakin bir tasarım yaratır; arka planlar, geçişler ve yumuşak UI için idealdir.
HSL, RGB ve Hex arasındaki fark nedir?
Üçü de aynı rengi farklı biçimde ifade eder. Hex(#6366f1) CSS'te kullanılır. RGB(99, 102, 241) kırmızı/yeşil/mavi kanallarına atıfta bulunur. HSL(237°, %84, %67) ton, doygunluk ve parlaklık kullanır; uyumlu palet oluşturmada sezgiseldir.
Karanlık mod için renk paleti nasıl oluşturulur?
Karanlık modda parlaklık değerlerini önemli ölçüde düşürün (ör. L:%60 → L:%30) ve metin/arka plan rollerini değiştirin. Benzer ton ve doygunluğu koruyarak koyu arka planda okunabilirlik için parlaklığı ayarlayın.