ColorLab, Blogger platformu için sıfırdan özel olarak geliştirilmiş, ultra modern ve tam donanımlı bir renk kodu öğrenme aracı temasıdır. Glass morphism tasarım anlayışıyla hazırlanmış olup, kullanıcıların HEX, RGB, HSL ve CMYK renk kodlarını kolayca öğrenmesini, resimlerden renk almasını ve profesyonel renk paletleri oluşturmasını sağlar.



ÖNE ÇIKAN ÖZELLİKLER

Renk Kodu Araçları:
  • HEX, RGB, HSL, CMYK renk kodlarını anlık görüntüleme
  • Tek tıkla kopyalama (ana kopyala butonu + her format için ayrı)
  • 9 farklı renk tonu paleti (açıktan koyuya)
  • Renk ismi veritabanı (HTML renk isimleri)
  • Tam ekran renk önizleme
Resimden Renk Alma:
  • Sürükle-bırak veya tıklayarak resim yükleme
  • PNG, JPG, WEBP format desteği (10MB limit)
  • Piksel piksel renk yakalama (büyüteç benzeri hedefleme imleci)
  • Otomatik baskın renk bulucu (resimdeki en çok kullanılan 5 renk)
  • Anlık renk önizleme ve kopyalama
Kullanıcı Deneyimi:
  • Aydınlık/Karanlık mod (localStorage ile tercih hatırlama)
  • Ana Sayfa menüsü (sabit navigasyon bar)
  • Bildirim sistemi (site tanıtımı için modal popup)
  • Çerez politikası banner'ı (Google resmi URL'si ile)
  • Tam mobil uyumlu (3 kırılma noktası: 768px, 480px, 370px)
  • Toast bildirimleri (işlem geri bildirimleri)
Tasarım:
  • Glass morphism (cam efekti, blur arka plan)
  • Gradient animasyonlar (başlık, butonlar, kartlar)
  • Modern kart tasarımı (her formata özel renkli gradient çizgi)
  • İkonlu butonlar (emoji tabanlı, hızlı yükleme)
  • CSS animasyonları (float, pulse, shake, spin efektleri)
TEKNİK ÖZELLİKLER
  • CSS Framework: Yok (sıfırdan yazıldı, 0 bağımlılık)
  • JavaScript: Vanilla JS (jQuery yok)
  • Harici Kaynak: Sadece Google Fonts (Plus Jakarta Sans)
  • CSS Boyutu: Yaklaşık 15KB (inline, sıkıştırılmış)
  • JS Boyutu: Yaklaşık 8KB (minimal)
  • Toplam Yük: Yaklaşık 25KB (resimler hariç)
SEO VE PAGESPEED OPTİMİZASYONU
  • Dinamik meta etiketleri (Blogger ayarlarından otomatik)
  • Open Graph ve Twitter Card desteği
  • Canonical URL (yinelenen içerik önleme)
  • Semantik HTML5 yapısı
  • ARIA erişilebilirlik etiketleri
  • Lazy loading (resimler için)
  • DNS Prefetch ve Preconnect
  • Font-display: swap (metin hemen görünür)
  • CSS Containment (render performansı)
  • Core Web Vitals uyumlu (LCP, FID, CLS optimize)
MOBİL UYUMLULUK
  • Masaüstü (>768px): Tam uyumlu
  • Tablet (768px): Tam uyumlu
  • Mobil (480px): Tam uyumlu
  • Küçük Mobil (370px): Tam uyumlu
  • Tüm butonlar minimum 32-36px dokunma alanına sahip
İndirme Linki için buraya tıklayabilirsiniz.

Kaynak