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:
- 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
- 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
- Renk Değeri:
- Renk değeri otomatik olarak güncellenir
- Kopyala butonuna tıklayarak renk değerini panoya kopyalayabilirsiniz
- Renk Önizleme:
- Seçilen rengin önizlemesi anında görüntülenir
- Renk bilgileri (kontrast oranı ve parlaklık) otomatik olarak hesaplanır
- 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:
- 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
- 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
- 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:
- 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
- Gradient Kaydetme:
- "Gradient Kaydet" butonuna tıklayın
- Gradient için bir isim girin
- Gradient otomatik olarak kaydedilir ve katalogda listelenir
- 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
- 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:
- 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
- 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
- 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:
- Menüyü Açma:
- Herhangi bir renk kutusuna sağ tıklayın
- Özel sağ tık menüsü açılır
- 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:
- İstediğiniz renkleri seçin ve "Kaydet" butonuna tıklayın
- "Palet Kaydet" butonuna tıklayın
- Palet için bir isim girin
Gradientler nasıl kaydedilir?
Gradientleri kaydetmek için:
- Bir renk paleti seçin ve gradient oluşturun
- "Gradient Kaydet" butonuna tıklayın
- Gradient için bir isim girin
Veriler nasıl yedeklenir?
Verileri yedeklemek için:
- Navbar'daki "Dışa Aktar" butonuna tıklayın
- "Tüm Veriler" seçeneğini seçin
- JSON dosyası otomatik olarak indirilir
Veriler nasıl geri yüklenir?
Verileri geri yüklemek için:
- Navbar'daki "İçe Aktar" butonuna tıklayın
- "Tüm Veriler" seçeneğini seçin
- 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