Resimden Renk Paleti Çıkarma – Fotoğraftan Baskın Renkleri Bulun (HEX, RGB, HSL)

Resimden renk paleti nedir, ne işe yarar?

Bir fotoğrafta ya da logoda yüz binlerce piksel bulunur, ama bizim gözümüz o görüntüyü birkaç baskın renkle hatırlar: gün batımındaki turuncu ile lacivert, bir kahve markasındaki koyu kahve ile krem, bir spor ayakkabıdaki neon yeşil. Renk paleti çıkarmak, bu kalabalığı birkaç temsilci renge indirgemektir. Web tasarımcısı bir ürün fotoğrafından site için vurgu rengi seçer; sosyal medya yöneticisi kampanya görselinin renklerine uyan bir şablon hazırlar; iç mimar bir ilham fotoğrafından boya tonu arar; öğrenci sunum slaytlarını bir resmin renklerine uydurur. Bu araç, seçtiğiniz resmin en baskın 5, 8 ya da 12 rengini bulur ve her biri için HEX, RGB ve HSL kodunu hazır verir. Hepsi tarayıcınızda hesaplanır; resminiz hiçbir sunucuya gönderilmez.

Nasıl kullanılır?

Resmi seçin. Resmi yukarıdaki alana sürükleyin ya da "Resim seç" düğmesine tıklayın. JPG, PNG ve WebP desteklenir; telefon fotoğrafları da çalışır.
Renk sayısını belirleyin. 5, 8 ya da 12 renk arasından seçin. Palet anında yenilenir; sayıyı değiştirmek resmi yeniden yüklemenizi gerektirmez.
Kodları kopyalayın. Her renk kartında HEX, RGB ve HSL satırı vardır; satıra tıklamanız kopyalamak için yeterlidir. Renk kutusuna tıklamak HEX kodunu alır.
Damlalığı kullanın. Paletin dışında belirli bir noktanın rengi gerekiyorsa resme tıklayın. İsterseniz bu rengi tek düğmeyle palete ekleyebilirsiniz.
Paleti dışa aktarın. CSS değişkenleri, SCSS, JSON ya da HEX listesi olarak tek tıkla kopyalayın; sunuma ya da tasarım dosyasına eklemek için PNG olarak indirin.

Palet nasıl hesaplanıyor? Medyan kesme yöntemi

Araç önce resmi en uzun kenarı en fazla 200 piksel olacak şekilde küçültür. Bu küçük örnek, renk dağılımını bozmadan hesabı hızlandırır; küçültülmüş bir görüntü bile on binlerce piksel taşır ve baskın renkleri güvenle yansıtır. Sonra "medyan kesme" (median cut) yöntemi çalışır. Tüm pikseller, kırmızı-yeşil-mavi uzayında tek bir kutu gibi düşünülür. Kutunun en geniş aralığa sahip kanalı bulunur, pikseller o kanala göre dizilir ve ortadaki piksele (medyana) en yakın değer sınırından ikiye bölünür. İstediğiniz sayıda kutu oluşana kadar, sırayla en kalabalık ya da renk uzayında en geniş kutu yeniden bölünür. Her kutunun içindeki piksellerin ortalaması paletin bir rengi olur; o rengin yanındaki yüzde, kutuya düşen piksel oranıdır.

Yöntem belirleyicidir: aynı resim ve aynı renk sayısı her seferinde aynı paleti verir. Bölme, aynı renkteki pikselleri hiçbir zaman ayırmaz; bu yüzden düz renkli bir logoda aynı renk iki ayrı kart olarak çıkmaz. Resimde zaten az sayıda ayrı renk varsa (örneğin dört renkli bir görsel) araç boş yere yapay renk üretmez ve istediğinizden az renk gösterip bunu bildirir. Tamamen saydam pikseller hesaba katılmaz; saydam PNG'lerde yalnızca görünen kısmın renkleri sayılır.

Damlalık: resimdeki tek bir pikselin rengini almak

Palet genel resmi özetler; ama bazen tam olarak "şu noktadaki" renk gerekir: bir düğmenin kenarı, bir logonun harfi, bir ürünün gölgesi. Resim yüklendikten sonra üzerine tıklamanız yeterlidir; tıklanan pikselin HEX, RGB ve HSL değerleri yan panelde belirir ve resimde bir halka işareti görünür. Fare kullanmıyorsanız resme Tab tuşuyla odaklanın ve ok tuşlarıyla işareti kaydırın; Shift tuşu adımı büyütür, renk her harekette güncellenir. Beğendiğiniz noktayı "Palete ekle" ile paletin sonuna ekleyebilir, dışa aktarırken diğer renklerle birlikte kullanabilirsiniz.

Damlalıkla okunan renk, ekranda gördüğünüz resmin rengidir. JPEG gibi kayıplı biçimlerde komşu pikseller sıkıştırma yüzünden birkaç birim farklı çıkabilir; kesin değer için PNG kaynak kullanın ya da birkaç komşu noktayı deneyin. Çok büyük resimler tuvale sığması için ekran boyutuna yakın bir ölçüye küçültülür; bu, ayrıntı miktarını etkiler, renk okumasını değil.

HEX, RGB ve HSL: hangisini ne zaman kullanmalı?

HEX (#E63946): web'in ortak dilidir. Kısa, kopyalaması kolaydır ve CSS, Figma, Canva gibi hemen her araçta kabul edilir.
RGB (rgb(230, 57, 70)): ekranın ışıkla renk üretme biçimine en yakın gösterimdir. Saydamlık gerektiğinde rgba biçimine genişletmek kolaydır; kodla çalışan yazılımcılar için doğaldır.
HSL (hsl(355, 78%, 56%)): rengi ton, doygunluk ve açıklık olarak ayırır. "Aynı rengin biraz daha koyusu" gibi insan isteklerini sayıya çevirmenin en kolay yoludur; hover ve odak durumları için ton ölçeği üretirken işinize yarar.

Üçü de aynı rengi anlatır; dönüşümde yalnızca yuvarlamadan doğan birer birimlik farklar olabilir. Her iki yönde dönüştürmek ya da CMYK değerine bakmak isterseniz Renk Seçici aracını kullanabilirsiniz.

En açık, en koyu ve en doygun etiketleri

Palette birden fazla renk varsa kartlarda üç etiket görebilirsiniz. "En açık" ve "en koyu", renklerin göreli parlaklığına göre belirlenir; yani gözün algıladığı açıklığa bakılır. "En doygun" ise kırmızı, yeşil ve mavi kanalların en büyük ile en küçük değeri arasındaki farka göre seçilir. Bu ölçü, neredeyse siyah ya da beyaz tonların HSL doygunluğunda yanıltıcı biçimde yüksek çıkmasını engeller. Etiketler tasarımda rol seçerken pratik bir kısayoldur: en açık ton genellikle zemin, en koyu ton metin, en doygun ton ise vurgu ve düğme için iyi bir adaydır.

Paleti projenize aktarmak

CSS biçimi, renkleri --renk-1, --renk-2 gibi özel özellikler olarak üretir; doğrudan :root bloğuna yapıştırıp var(--renk-1) ile çağırabilirsiniz. SCSS biçimi aynı sırayla $renk-1 değişkenlerini verir. JSON, her renk için HEX, RGB, HSL ve piksel oranını içerir; tasarım sistemi araçlarına ya da kendi betiğinize veri olarak verebilirsiniz. PNG çıktısı ise her renk için bir şerit ve altında kodlarını gösteren bir görseldir: bir müşteriye "bu renkleri kullanalım" demek, sunuma ya da moodboard'a eklemek için uygundur. Dosya adı, yüklediğiniz resmin adından türetilir.

Daha iyi palet için ipuçları

Logo ve ikonlarda 5 renk genellikle yeterlidir; fotoğraflarda 8 ya da 12 renk atmosferi daha iyi yakalar.
Resmin kenarlarında boşluk, çerçeve ya da beyaz arka plan varsa baskın renk olarak öne çıkabilir. Sonuç beklediğiniz gibi değilse resmi önce kırpın.
Kontrastı mutlaka ölçün. Paletten seçtiğiniz bir renk metin için kullanılacaksa zeminle arasındaki oran en az 4,5:1 olmalıdır; bunu Renk Kontrast Hesaplama aracında deneyebilirsiniz.
Paleti bir kural olarak 60-30-10 oranında kullanın: baskın renk yüzde 60, ikincil renk yüzde 30, vurgu rengi yüzde 10.
Başkasına ait bir fotoğraf ya da marka logosundan çıkardığınız renklerin o markanın kimliğini oluşturduğunu unutmayın; yalnızca kendi projelerinizde ve izin verilen kapsamda kullanın.

Neden Bilişim Ajans aracı?

Resminiz yüklenmez. Hesap, tarayıcınızdaki bir tuvalde yapılır; sayfa yüklendikten sonra internet bağlantısı olmadan da çalışır.
Kod hazır. HEX, RGB ve HSL satırlarına tıklayarak kopyalarsınız; CSS, SCSS ve JSON çıktıları ek çalışma gerektirmez.
Klavyeyle de kullanılır. Damlalık ok tuşlarıyla çalışır; tüm kopyalama düğmeleri odaklanılabilir.
Gerçekten ücretsiz. Kayıt, filigran ya da günlük sınır yoktur.

Sık sorulan sorular

Yüklediğim resim bir sunucuya gidiyor mu?

Hayır. Resim yalnızca tarayıcınızın belleğinde açılır ve renkler orada hesaplanır. Hiçbir ağ isteği yapılmaz; sayfa yüklendikten sonra internetinizi kapatsanız bile araç çalışmaya devam eder. Bu yüzden kişisel fotoğraflarınızı ya da henüz yayımlanmamış tasarımlarınızı güvenle kullanabilirsiniz.

Palet her seferinde aynı mı çıkıyor?

Evet. Medyan kesme belirleyici bir yöntemdir: aynı resim ve aynı renk sayısı her zaman aynı sonucu verir. Farklı bir görünüm isterseniz renk sayısını değiştirebilir ya da resmi kırparak yeniden yükleyebilirsiniz.

Neden istediğimden az renk gösterildi?

Resimde istediğiniz kadar ayrı renk yoksa araç yapay renk üretmez. Örneğin dört düz renkten oluşan bir görselde 8 renk istenirse dört renk gösterilir ve bu bilgi paletin üstünde yazılır. Aynı renkteki pikseller tek karta toplanır.

5, 8 ya da 12 renkten hangisini seçmeliyim?

Logo, ikon ve düz renkli görsellerde 5 renk çoğunlukla yeterlidir. Fotoğraflarda 8 renk dengeli bir başlangıçtır; gökyüzü, gölge ve ten tonları gibi ayrıntıları da yakalamak istiyorsanız 12 renge çıkın. Çok sayıda renk birbirine yakın tonlar üretebilir, tasarımda kullanacağınız rolleri düşünerek seçin.

HEX, RGB ve HSL arasındaki fark nedir?

Üçü de aynı ekran rengini farklı biçimde yazar. HEX ve RGB kırmızı, yeşil ve mavi kanalları; HSL ise ton, doygunluk ve açıklığı kullanır. Web tasarımında en yaygın olanı HEX'tir; ton ölçeği üretirken HSL kolaylık sağlar. Dönüşümlerde bilgi kaybı olmaz, yalnızca yuvarlamadan doğan bir birimlik farklar çıkabilir.

Damlalıkla aldığım renk neden bazen biraz farklı çıkıyor?

Üç etken olabilir. JPEG gibi kayıplı biçimler komşu pikselleri sıkıştırma sırasında hafifçe değiştirir. Çok büyük resimler tuvale sığması için küçültülür ve küçültme birkaç pikseli ortalayabilir. Ayrıca ekranınızın renk profili görüntüyü etkileyebilir. Kesin değer için PNG kaynak kullanın ve birkaç noktayı deneyin.

Saydam PNG'lerde ne olur?

Büyük oranda saydam pikseller palet hesabına katılmaz; yalnızca görünen pikseller sayılır. Tamamen saydam bir resim yüklerseniz araç bunu bildirir. Damlalıkla saydam bir noktaya tıklarsanız "saydam piksel" uyarısı alırsınız.

En açık, en koyu ve en doygun etiketleri neye göre veriliyor?

En açık ve en koyu etiketleri, renklerin göreli parlaklığına göre verilir; doygunluk için ise kırmızı, yeşil ve mavi kanalların en büyüğü ile en küçüğü arasındaki fark kullanılır. Etiketler yalnızca palettekilerin birbirine göre durumunu gösterir ve palette en az iki renk olduğunda görünür.

Büyük bir resim ya da telefon fotoğrafı yavaşlatır mı?

Genellikle hayır; resim önce küçültüldüğü için hesap hızlıdır. Yine de 50 MB'ı aşan dosyalarda açılış yavaşlayabilir ve araç sizi uyarır. Çok büyük bir dosya belleğe sığmazsa önce Resim Küçült aracıyla boyutunu düşürüp tekrar deneyin.

İlgili araçlar

Kurumsal kimlik, logo ve web tasarımı için Bilişim Ajans ekibi yardımcı olur.