Görselden Renk Al

Bu araç, yüklediğiniz görselin içindeki dominant (baskın) renkleri otomatik analiz eder ve her renk için HEX kodunu (isteğe bağlı RGB/HSL) üretir. Amaç; “bu görseldeki renk tam olarak ne?” sorusunu saniyeler içinde çözmek ve o renkleri tasarım, web, ürün görseli veya marka çalışmasına taşımaktır.

Görselden Renk Al

Herhangi bir görselden dominant renkleri çıkarın. Tasarım projeleriniz için renk paletleri oluşturun.

Görsel yükleyin veya sürükleyin JPG, PNG, WEBP, GIF

Değiştir

Çıkarılacak Renk Sayısı

4 6 8 10 12

Çıkarılan Renkler

Tümünü Kopyala

Renk Formatı

HEX RGB HSL

Renk Paleti

Palet İndir (PNG) CSS Değişkenleri

Misafir olarak sınırlı sayıda kullanabilirsiniz. Giriş yapın veya Ücretsiz üye olun.

Ne yapar?

• Görseldeki en baskın renkleri çıkarır (ör. 5 / 8 / 12 renk).
• Her renk için:
  • HEX (#1A73E8)
  • RGB (26, 115, 232)
  • HSL gibi formatları gösterir (isteğe bağlı)
• Tek tıkla kopyalama sağlar.
• İstersen paleti:
  • PNG/SVG palet görseli olarak indir
  • CSS değişkenleri olarak dışa aktar
  • (Opsiyonel) Tailwind config veya SCSS variables çıktısı verir

Nasıl kullanılır?

1. Görsel yükle (JPG/PNG/WebP)
2. “Kaç renk çıkarılsın?” seç (5 / 8 / 12)
3. Araç paleti üretir:
   • Dominant renkler büyük kartlarda
   • Yakın tonlar küçük swatch’larda
4. Renge tıkla → HEX kopyalanır
5. İstersen çıktı al:
   • Paleti indir
   • CSS/Tailwind değişkenlerini kopyala

Öne çıkan özellikler (ince iş)

1) Dominant renk + örnekleme (iki farklı ihtiyaç)

• Dominant renkler: genel palet (marka/tasarım için)
• Pikselden renk seçme (damlalık): görselin belirli bir noktasındaki renk (logo detayı gibi)

En iyi UX: Paletin yanında “görsel üzerinde tıkla, anlık renk al” modu.

2) Renkleri “temizleme” seçenekleri

Dominant analiz bazen çok benzer tonlar çıkarır. Şunlar işi profesyonelleştirir:

• “Benzer renkleri birleştir” (tolerans)
• “En açık / en koyu rengi sabitle”
• “Arka plan rengini yok say” (özellikle ürün fotoğraflarında)

3) Kullanım çıktıları (gerçek değer burada)

Kullanıcı sadece HEX görmek istemiyor; “hemen kullanmak” istiyor:

• CSS Variables

:root{
–c-1:#1A73E8;
–c-2:#111827;
–c-3:#F59E0B;
}

• Tailwind renk objesi
• Figma/Canva’ya kopyala-yapıştır (HEX odak)

4) Erişilebilirlik kontrolü (opsiyonel ama çok satılır)

Palet çıktıktan sonra:

• Metin rengi öner: “Bu renkte beyaz mı siyah mı okunur?”
• (Opsiyonel) Kontrast uyarısı (WCAG mantığıyla)Bu özellik “UX/SEO/kurumsal site” kitlesinde fark yaratır.

Kullanım senaryoları

• Logo / marka renklerini yakalamak
• Ürün fotoğraflarından koleksiyon renk paleti çıkarmak
• Landing page / banner için görselin tonlarına uygun UI renk seti oluşturmak
• Sosyal medya görselinden “aynı estetikte” yeni tasarım üretmek

Sık sorulan sorular

Dominant renk ne demek?

Görselde en çok görünen ve genel hissi belirleyen renklerdir (palet gibi).

Aynı görselden farklı palet çıkması normal mi?

Evet. “Kaç renk çıkar” seçimi ve benzer tonları birleştirme ayarları sonucu değiştirir.

HEX dışında RGB/HSL de verir mi?

Evet; tasarım/print akışı için format seçenekleri sunulabilir.