Bir manzara fotoğrafının sıcak tonlarını bir sunuma, bir ürün fotoğrafının renklerini bir sosyal medya şablonuna ya da beğendiğin bir odanın renklerini bir boya kataloğuna taşımak istediğinde bu araç işini kolaylaştırır. Renkleri tek tek seçmek yerine görselin bütününe bakar ve en çok yer kaplayan renk gruplarını çıkarır.
Nasıl kullanılır?
- Bir fotoğraf seç. Görsel tarayıcında incelenir; hiçbir sunucuya gönderilmez.
- Kaydırıcıyla kaç renk istediğini seç: 4 ile 10 arası, varsayılan 6. Sayıyı değiştirdiğinde palet anında yeniden hesaplanır.
- Renk örnekleri görseldeki paylarına göre büyükten küçüğe sıralanır; her birinin HEX ve RGB kodunu kopyalayabilirsin.
- Paletin tamamını CSS değişkenleri, JSON dizisi ya da virgülle ayrılmış liste olarak kopyala.
- İstersen paleti PNG kart olarak indir.
Baskın renkler nasıl bulunuyor?
Araç önce fotoğrafın küçültülmüş bir kopyasını oluşturur. Milyonlarca pikseli tek tek incelemek gereksiz yere yavaş olurdu ve sonucu da pek değiştirmezdi. Ardından k-ortalamalar (k-means) adı verilen bir kümeleme yöntemi uygulanır.
Yöntemin mantığı basittir. İstediğin sayıda renk merkezi belirlenir ve her piksel kendisine en yakın merkezin grubuna katılır. Sonra her merkez, grubundaki piksellerin ortalama rengine kaydırılır. Gruplar artık değişmeyene kadar bu iki adım tekrarlanır. Her grubun son rengi paletteki bir renk, grubun piksel payı da yanında yazan yüzde olur.
Bu yaklaşımın önemli bir sonucu var: yüzdeler önemi değil, alanı yansıtır. Beyaz bir duvar önünde çekilmiş kırmızı bir ayakkabı fotoğrafında paletin büyük kısmını beyaz ve gri tonlar kaplar; kırmızı ise küçük bir yüzde olarak görünür, hatta az renkli bir palette diğer tonlarla karışabilir.
Daha kullanışlı bir palet için ipuçları
- Renk sayısını artır. Küçük ama önemli bir vurgu rengi paletten kayboluyorsa 8 ya da 10 renge çık; ayrı bir grup olarak ortaya çıkma ihtimali artar.
- Önce kırp. Arka planın palete baskın çıkmasını istemiyorsan fotoğrafı ilgilendiğin bölgeye Kırp aracıyla daraltıp öyle yükle.
- Tek bir tonu doğrudan al. Paletteki bir renk tam istediğin gibi değilse, görseldeki belirli bir noktanın rengini Resimden renk seç aracıyla alabilirsin.
- Kontrastı düşün. Paletten yazı ve zemin rengi seçerken açık ve koyu tonları eşleştir; birbirine yakın iki orta ton okunaklı bir yazı sağlamaz.
Paleti bir internet sitesine ya da sunuma uygularken bütün renkleri eşit miktarda kullanmak zorunda değilsin. Yaygın bir yaklaşım, bir rengi geniş alanlarda zemin olarak, ikinci bir rengi başlık ve kutularda, en canlı rengi ise yalnızca düğme ya da vurgu gibi küçük ayrıntılarda kullanmaktır. Böylece fotoğrafın havası korunur ama tasarım kalabalık görünmez.
PNG kart, renk örneklerini kodlarıyla birlikte tek bir görselde toplar. Bir sunuma, ilham panosuna ya da ekip arkadaşına göndereceğin bir mesaja kolayca eklenir.
Sık sorulan sorular
Yüzdeler neyi gösteriyor?
Her rengin, fotoğrafın küçültülmüş kopyasındaki piksellerin yaklaşık ne kadarını temsil ettiğini. Görsel önem değil, kaplanan alan ölçülür.
Paleti tasarım programına nasıl aktarırım?
HEX kodlarını virgülle ayrılmış liste olarak kopyalayıp programın renk alanına tek tek yapıştırabilirsin. Web projeleri için CSS değişkenleri, kod içinde kullanmak için JSON dizisi daha pratiktir.
Logo ya da çizimlerde de çalışır mı?
Evet. Az renkli görsellerde renkler genellikle çok net ayrılır. Renk sayısını görseldeki gerçek renk sayısına yakın seçersen birbirine çok benzeyen tekrar tonların çıkma ihtimali azalır.
Fotoğrafım siyah-beyazsa ne olur?
Palet gri tonlardan oluşur. Bu da beklenen bir sonuçtur; araç fotoğrafta olmayan bir rengi üretmez.