Görsel Renk Seçici ve Palet
Görsel Renk Seçici ve Palet
Görselden renk seçmek için tıklayın, baskın renkleri ve paleti otomatik çıkarın, HEX/RGB kopyalayın ve CSS değişkenleri dışa aktarın. PNG, JPG/JPEG, WebP, AVIF, HEIC/HEIF destekler.
Görseli buraya sürükleyin veya seçmek için tıklayın
Destekler: PNG / JPG / JPEG / WebP / AVIF / HEIC / HEIF
🚀 Hızlı başlangıç
- Görsel içe aktar: Sürükleyip bırakın veya seçmek için tıklayın
- Panel değiştir: Masaüstü yan panel gösterir; Mobil alt düğmeye dokunun
- Seçmek için tıkla: Görselde herhangi bir yere tıklayarak o pikselin rengini alın
- Renk kopyala: Seçtikten sonra HEX/RGB/CSS formatını kopyalayın
- Renk sayısı belirle: Kaydırıcıyı sürükleyin veya preset tıklayın (4/6/8/12/16/24/32)
- Palet çıkar: Baskın renk listesi almak için çıkarma düğmesine tıklayın
- CSS dışa aktar: Çıkarma sonrası CSS değişkenleri dosyasını dışa aktarın
- JSON dışa aktar: Çıkarma sonrası JSON veri dosyasını dışa aktarın
- Sıfırla: Mevcut görsel ve sonuçları temizle
📌 Yaygın kullanım senaryoları
- Tasarım/poster renk seçimi: Renk şeması için birincil ve vurgu renklerini çıkarın
- Tema/tasarım sistemi: Proje için CSS değişkenleri veya JSON dışa aktarın
- Bileşen stillendirme: Düğmeler, etiketler, grafikler için eşleşen renkler çıkarın
- Marka tutarlılığı: Marka varlıklarından standart renk paleti çıkarın
🎛️ Renk seçici ve palet seçenekleri
- Renk sayısı: 2–32, genellikle 8/12; fotoğraf/gradyan 16–32 önerir
- Preset düğmeleri: 4/6/8/12/16/24/32 tek tıkla geçiş
- Sıralama: Yüzdeye göre yüksekten düşüğe, en yaygın renkler önce
- Rengin yanındaki sayı: Görseldeki piksel yüzdesini gösterir
🧭 Kullanım tavsiyeleri
- Genel etkiyi görmek için 8/12 ile başlayın, sonra gerekirse 16/24/32'ye yükseltin
- Projede kullanırken --color-1'i anlamsal adlara değiştirin (örn., --color-primary)
- Büyük görselleri çıkarırken tarayıcı kısıtlamasından kaçınmak için sayfayı ön planda tutun
⚠️ Sınırlamalar ve uyumluluk
- Tek dosya sınırı 128MB, çok büyük görseller yavaşlamaya neden olabilir
- Palet çıkarma performans için otomatik downsampling yapar, sonuçlar temsili renklerdir
- HEIC/HEIF kod çözme tarayıcı desteğine bağlıdır, başarısız olursa JPG/PNG'ye dönüştürün
- Şeffaf pikseller göz ardı edilir veya gerçek RGBA olarak işlenir
🔒 Gizlilik ve güvenlik
- Tüm işleme tarayıcınızda yapılır; veriler asla cihazınızdan ayrılmaz
❓ Sıkça Sorulan Sorular
Dışa aktarılan CSS dosyası nasıl kullanılır?
Dışa aktarılan :root { --color-1: ... }'i global CSS'e koyun, sonra var(--color-1) ile referans verin.
Dışa aktarılan JSON ne için?
Script/tasarım sistemi yeniden kullanımı için, örn., Design Tokens veya tema yapılandırması oluşturma. Her renk hex/css/rgb ve count içerir.
Hangi renk sayısı öneriliyor?
Genel UI: 8 veya 12; minimal ikonlar: 4–6; fotoğraf/gradyan: 16–32. Hızlı karşılaştırma için presetleri kullanın.
Tıklanan ve palet renkleri neden farklı?
Tıklama seçimi tek piksel alır; palet genel trendi vurgulayan temsili renkler için tüm görseli kuantize eder.
Dışa aktarma düğmesi neden gri?
Önce 'Palet Çıkar' düğmesine tıklamanız gerekiyor, çıkarma tamamlandıktan sonra dışa aktarma kullanılabilir.
Dışa aktarılan dosya adı nasıl oluşturulur?
Varsayılan orijinal dosya adı (uzantısız) + .palette-sayı + .css/.json kullanır, geçersiz karakterler otomatik temizlenir.