Modern Renk Seçici ve Renk Paleti Oluşturma ( Şık Modern Tasarım )

merhaba sizlere kendim için yaptığım renk düzenleme web uygulamasını sizinle'de paylaşmak istedim. . açık kaynak olarak github linki veriyorum sizlerde projelerinizde kullanabilrsiniz.








github linki

🎨 Modern Renk Seçici

🌟 Özellikler

Modern Renk Seçici, tasarımcılar, geliştiriciler ve renk tutkunları için geliştirilmiş kapsamlı bir renk yönetim aracıdır. Aşağıdaki özellikleri sunar:

• 🎯 Gelişmiş Renk Seçici: HEX, RGB, HSL ve CMYK formatlarında renk seçimi
• 📊 Renk Bilgileri: Kontrast oranı ve parlaklık değerleri
• 🖼️ Görselden Renk Seçme: Yüklenen görsellerden piksel bazlı renk seçimi
• 📝 Renk Geçmişi: Seçilen renklerin otomatik kaydedilmesi
• ⭐ Popüler Renkler: Sık kullanılan renkleri kaydetme ve hızlı erişim
• 🎨 Renk Paletleri: Renk gruplarını palet olarak kaydetme ve yönetme
• 🌈 Gradient Oluşturucu: Renk paletlerinden gradient oluşturma
• 📚 Gradient Kataloğu: Oluşturulan gradientleri kaydetme ve yönetme
• 📥 Veri İçe/Dışa Aktarma: Renk paletleri ve gradientleri JSON formatında içe/dışa aktarma
• 📱 Responsive Tasarım: Mobil ve masaüstü cihazlarda sorunsuz çalışma
• 🖱️ Sağ Tık Menüsü: Renk kutuları için özel sağ tık menüsü

📖 Kullanım Kılavuzu

🎨 Renk Seçici

Renk Seçici, uygulamanın temel özelliğidir. Renk seçmek için aşağıdaki adımları izleyin:

1. Renk Seçme:
   • Renk seçiciyi kullanarak istediğiniz rengi seçin
   • Veya görselden renk seçme özelliğini kullanarak bir görselden renk seçin
2. Renk Formatı:
   • Açılır menüden renk formatını seçin (HEX, RGB, HSL, CMYK)
   • Seçilen renk otomatik olarak seçilen formatta görüntülenir
3. Renk Değeri:
   • Renk değeri otomatik olarak güncellenir
   • Kopyala butonuna tıklayarak renk değerini panoya kopyalayabilirsiniz
4. Renk Önizleme:
   • Seçilen rengin önizlemesi anında görüntülenir
   • Renk bilgileri (kontrast oranı ve parlaklık) otomatik olarak hesaplanır
5. Renk Kaydetme:
   • "Kaydet" butonuna tıklayarak rengi geçmişe ekleyebilirsiniz
   • "Sıfırla" butonuna tıklayarak renk geçmişini temizleyebilirsiniz

🎨 Renk Paletleri

Renk paletleri, renk gruplarını kaydetmenizi ve yönetmenizi sağlar:

1. Palet Oluşturma:
   • İstediğiniz renkleri seçin ve "Kaydet" butonuna tıklayın
   • "Palet Kaydet" butonuna tıklayın
   • Palet için bir isim girin
   • Palet otomatik olarak kaydedilir ve listelenir
2. Palet Kullanma:
   • Kaydedilen paletler "Renk Paletleri" bölümünde listelenir
   • Palet üzerindeki fırça ikonuna tıklayarak paleti gradient oluşturucuda kullanabilirsiniz
   • Palet üzerindeki çöp kutusu ikonuna tıklayarak paleti silebilirsiniz
3. Palet Yönetimi:
   • Paletleri JSON formatında dışa aktarabilirsiniz
   • Dışa aktarılan paletleri içe aktarabilirsiniz
   • "Her Şeyi Sıfırla" butonuna tıklayarak tüm paletleri silebilirsiniz

🌈 Gradient Oluşturucu

Gradient oluşturucu, renk paletlerinden gradient oluşturmanızı sağlar:

1. Gradient Oluşturma:
   • Açılır menüden bir renk paleti seçin
   • "Gradient Oluştur" butonuna tıklayın
   • Gradient açısını ayarlamak için kaydırıcıyı kullanın
2. Gradient Kaydetme:
   • "Gradient Kaydet" butonuna tıklayın
   • Gradient için bir isim girin
   • Gradient otomatik olarak kaydedilir ve katalogda listelenir
3. Gradient Kullanma:
   • Kaydedilen gradientler "Gradient Kataloğu" bölümünde listelenir
   • Gradient üzerindeki fırça ikonuna tıklayarak gradienti kullanabilirsiniz
   • Gradient üzerindeki kalem ikonuna tıklayarak gradient ismini değiştirebilirsiniz
   • Gradient üzerindeki çöp kutusu ikonuna tıklayarak gradienti silebilirsiniz
4. Gradient Kopyalama:
   • "Kopyala" butonuna tıklayarak gradient CSS kodunu panoya kopyalayabilirsiniz

📊 Veri Yönetimi

Modern Renk Seçici, verilerinizi yönetmeniz için çeşitli araçlar sunar:

1. Veri İçe Aktarma:
   • Navbar'daki "İçe Aktar" butonuna tıklayın
   • Açılan menüden içe aktarmak istediğiniz veri türünü seçin:
     • Renk Paletleri: Sadece renk paletlerini içe aktarır
     • Gradientler: Sadece gradientleri içe aktarır
     • Tüm Veriler: Tüm verileri (renk geçmişi, paletler, popüler renkler, gradientler ve renk isimleri) içe aktarır
   • JSON dosyasını seçin
   • Veriler otomatik olarak içe aktarılır ve arayüz güncellenir
2. Veri Dışa Aktarma:
   • Navbar'daki "Dışa Aktar" butonuna tıklayın
   • Açılan menüden dışa aktarmak istediğiniz veri türünü seçin:
     • Renk Paletleri: Sadece renk paletlerini dışa aktarır
     • Gradientler: Sadece gradientleri dışa aktarır
     • Tüm Veriler: Tüm verileri (renk geçmişi, paletler, popüler renkler, gradientler ve renk isimleri) dışa aktarır
   • JSON dosyası otomatik olarak indirilir
3. Veri Sıfırlama:
   • "Her Şeyi Sıfırla" butonuna tıklayın
   • Onay mesajını onaylayın
   • Tüm veriler (renk geçmişi, paletler, popüler renkler, gradientler ve renk isimleri) silinir

🖱️ Sağ Tık Menüsü

Renk kutuları için özel bir sağ tık menüsü sunulur:

1. Menüyü Açma:
   • Herhangi bir renk kutusuna sağ tıklayın
   • Özel sağ tık menüsü açılır
2. Menü Seçenekleri:
   • Renk Değerini Kopyala: Renk değerini panoya kopyalar
   • Renk İsmini Değiştir: Renk için özel bir isim belirler
   • Renk İsmini Sil: Renk için belirlenen ismi siler

⌨️ Kısayollar

Modern Renk Seçici, kullanımı kolaylaştırmak için çeşitli kısayollar sunar:
KısayolİşlevCtrl+CRenk değerini kopyalarCtrl+SSeçilen rengi kaydederCtrl+RRenk geçmişini sıfırlarCtrl+Shift+RTüm verileri sıfırlarCtrl+EGradient oluştururCtrl+GGradient kopyalar

❓ Sık Sorulan Sorular

Renk geçmişi nasıl temizlenir?

Renk geçmişini temizlemek için "Sıfırla" butonuna tıklayın ve onay mesajını onaylayın. Tüm renk geçmişi silinecektir.

Renk paletleri nasıl kaydedilir?

Renk paletlerini kaydetmek için:

1. İstediğiniz renkleri seçin ve "Kaydet" butonuna tıklayın
2. "Palet Kaydet" butonuna tıklayın
3. Palet için bir isim girin

Gradientler nasıl kaydedilir?

Gradientleri kaydetmek için:

1. Bir renk paleti seçin ve gradient oluşturun
2. "Gradient Kaydet" butonuna tıklayın
3. Gradient için bir isim girin

Veriler nasıl yedeklenir?

Verileri yedeklemek için:

1. Navbar'daki "Dışa Aktar" butonuna tıklayın
2. "Tüm Veriler" seçeneğini seçin
3. JSON dosyası otomatik olarak indirilir

Veriler nasıl geri yüklenir?

Verileri geri yüklemek için:

1. Navbar'daki "İçe Aktar" butonuna tıklayın
2. "Tüm Veriler" seçeneğini seçin
3. Yedeklediğiniz JSON dosyasını seçin

📝 Lisans

Bu proje MIT lisansı altında lisanslanmıştır. Daha fazla bilgi için LICENSE dosyasına bakın.

👥 Katkıda Bulunma

Katkıda bulunmak isterseniz, lütfen bir pull request gönderin. Büyük değişiklikler için, lütfen önce bir issue açarak neyi değiştirmek istediğinizi tartışın.

📞 İletişim

paylaşım için teşekkürler hocam sub domaine kurarak müşterilerimizin renk seçimlerine sizlerin sayesinde yardımcı olacağız iyi çalışmalar dilerim.

rica ederim iyi çalışmalar