# Resimden Renk Kodu Bulma Görseli bırakın; baskın renkler çıksın, büyüteçle tek piksel seçin, üstüne yazılacak metnin okunurluğunu ölçün. Ücretsiz SEO Araçları · Kaynak: https://kobiseo.com/araclar/renk-secici/ Son güncelleme: 2026-08-29 > Aracın etkileşimli bölümü bu düz metin sürümünde yer almaz; kullanmak için yukarıdaki adrese bakın. Aşağıdaki bölüm aracın ne yaptığını ve arkasındaki kuralları anlatan kalıcı içeriktir. Logonuzun tam olarak hangi renk olduğunu bilmek şaşırtıcı biçimde zor. Tabelacı bir kod istiyor, sitenin şablonu başka bir kod, sosyal medya kapağı bir üçüncüsü. Dosya elinizde ama sayı yok. Bu araç görselden o sayıyı çıkarıyor: baskın renkleri kendisi buluyor, istediğiniz tek pikseli büyüteçle seçtiriyor, **HEX, RGB, HSL ve CMYK** karşılıklarını veriyor. Bir adım daha atıyor. Aldığınız rengin üstüne yazı yazılacaksa o yazının okunup okunmadığını **WCAG** ölçütüne göre hesaplıyor. ## Görselden renk seçmek ne demek? Ekrandaki her renk üç sayıdan oluşuyor: kırmızı, yeşil ve mavi kanalların değeri. Bir görselden renk seçmek, işaret ettiğiniz pikselin bu üç sayısını okuyup yazıya dökmek demek. İngilizce kaynaklarda bu işi yapan araçlara **color picker from image**, **image color picker** ya da **eyedropper** deniyor. Aynı renk birden çok biçimde yazılıyor ve her biri ayrı yerde işe yarıyor. **HEX** web için (`#0f766e`), **RGB** ekran için, **HSL** ton ve doygunlukla oynamak için, **CMYK** ise baskı için. Araç dördünü birden veriyor; tabelacıya CMYK, geliştiriciye HEX gidiyor. Türkçede bu araca **resimden renk kodu bulma**, **renk kodu bulucu** ya da **pipet aracı** deniyor. Tasarım programlarındaki damlalık simgesinden geliyor: nereye dokunursanız oradaki rengi alıyor. Baskın renkleri bulmak ayrı bir iş. Bir fotoğrafta neredeyse hiçbir piksel bir diğerinin aynısı değil, dolayısıyla "en çok geçen rengi say" yöntemi çalışmıyor. Renk uzayı kutulara bölünüp her kutunun ortalaması alınıyor; buna **medyan kesme** deniyor. ## Asıl mesele: o rengin üstünde yazı okunuyor mu? Marka renginizi bulmak işin kolay yarısı. Zor olan, o rengin üstüne düşen yazının okunması. Ölçüt tahmine bırakılmış değil. **WCAG 2.2** iki renk arasındaki parlaklık farkını bir orana çeviriyor ve eşik koyuyor: normal boy metin için en az **4,5 kat**, iri metin (24 punto ya da 18,5 punto kalın) için en az **3 kat**. Daha katı olan AAA seviyesinde bu sayılar 7 ve 4,5’a çıkıyor. Araç seçtiğiniz rengin beyaz ve siyahla, ayrıca paletteki diğer renklerle oranını hesaplayıp her birini örnek metinle birlikte gösteriyor. Geçen ve geçmeyen eşleşmeler ayrı işaretleniyor. Hesap, kanalların gama düzeltmesi geri alınarak yapılıyor. Bu adım atlanınca oran olduğundan iyi çıkıyor ve okunmayan bir eşleşme geçer görünüyor; internetteki basit hesaplayıcıların bir kısmı bu hatayı yapıyor. ## Rengin SEO ile ne ilgisi var? Doğrudan bir sıralama sinyali değil, dolaylı ama gerçek bir etkisi var. Okunmayan metin ziyaretçiyi geri gönderiyor. Sayfada geçirilen sürenin düşmesi, aramaya dönüp başka bir sonuca tıklanması, formun doldurulmadan bırakılması: bunların hepsi arama motorunun gördüğü davranışlar. Bir de erişilebilirlik tarafı var. Düşük kontrast, otomatik denetim araçlarının ilk yakaladığı sorunlardan biri. Lighthouse ve benzeri araçlar bunu erişilebilirlik puanında doğrudan düşürüyor. Marka tutarlılığının da payı var. Sitede, işletme profilinde ve sosyal hesaplarda aynı rengin kullanılması, arama sonuçlarında ve haritada işletmenizi tanınır kılıyor. Bunun için önce rengin sayısını bilmek gerekiyor. ## Büyüteç neden var? Bir pikselin ekrandaki karşılığı çoğu zaman imlecin ucundan küçük. Küçültülmüş bir görselde "şu turuncuyu almak istiyorum" deyip tıkladığınızda komşu piksellerin harmanlanmasıyla oluşmuş, görselde aslında hiç bulunmayan bir renk alabiliyorsunuz. Araç bu yüzden iki şey yapıyor. Piksel okuması ekranda görünen küçültülmüş hâlden değil, **tam çözünürlükten** yapılıyor. Ve imlecin çevresi büyütülüp yumuşatma kapalı çiziliyor; ortadaki kare tam olarak hangi pikselin okunacağını gösteriyor. Logo gibi keskin kenarlı görsellerde fark belirgin oluyor: kenara bir piksel yakın tıklamak, markanızın rengi yerine arka planla karışmış bir ara tonu veriyor. ## Çıkan renkleri nerede kullanacaksınız? Sitenizin şablonunda: araç paleti hazır **CSS değişkeni** olarak kopyalıyor, tema dosyanıza olduğu gibi yapıştırabilirsiniz. Google İşletme Profili kapak görselinde, sosyal medya paylaşım kartlarında ve tabelada. CMYK karşılığı tam da bunun için veriliyor. Bir uyarı: paletteki en baskın renk her zaman marka rengi değil. Fotoğrafta gökyüzü geniş yer kaplıyorsa mavi başa çıkıyor. Araç payları gerçek ölçümle veriyor, seçimi size bırakıyor. --- ## Sık sorulanlar ### Paletteki yüzdeler ne anlama geliyor? O rengin görselde kapladığı alanın oranı. Örneklenen her piksel kendisine en yakın palet rengine atanıp baştan sayılıyor, bu yüzden yüzdeler toplamı yüze çıkıyor. İlk sürümde paylar kutu nüfusundan geliyordu ve toplamları yüzü bulmuyordu; kafa karıştırdığı için değiştirdik. ### Neden bazen altıdan az renk çıkıyor? Birbirine çok yakın tonlar birleştiriliyor. Az renkli bir logoda altı ayrı kutu üretmek, aynı turuncunun altı tonunu yan yana dizmekten başka bir işe yaramıyor. Birleştirme eşiği düz sayısal farka göre değil: aynı sayısal farkı kırmızıda görüyoruz, mavide görmüyoruz. Kanallar ortalama kırmızı seviyesine göre ağırlıklandırılıyor. ### Saydam PNG yükleyebilir miyim? Evet. Tamamen saydam pikseller palete katılmıyor; katılsalardı bütün paleti griye çekerlerdi. Yarı saydam pikseller alttaki beyaz zeminle karışmış hâlleriyle okunuyor. Logonuzun kenarlarında yumuşak geçiş varsa oradan renk almak yerine gövdesinden almak daha doğru sonuç veriyor. ### Kontrast oranı kaç olmalı? Gövde metni için en az 4,5 kat. Bunun altı, normal boy yazıda WCAG AA seviyesinde geçmiyor. Büyük başlıklarda ve düğme yazılarında 3 kat yeterli sayılıyor, ancak yalnız yazı gerçekten iriyse: 24 punto ya da 18,5 punto kalın. Süsleme amaçlı, okunması gerekmeyen metinlerde (arka plandaki dev bir yazı gibi) eşik aranmıyor. Ama bir bilgi taşıyorsa aranıyor. ### Görselim yükleniyor mu? Yüklenmiyor. Görsel tuvale çiziliyor ve piksel okuması bellekte yapılıyor. Doğrulamak isterseniz tarayıcının geliştirici araçlarında Ağ sekmesini açıp görsel bırakın; dışarı giden hiçbir istek görmeyeceksiniz. ## Kaynaklar - [WCAG 2.2 Başarım Ölçütü 1.4.3: Contrast (Minimum)](https://www.w3.org/WAI/WCAG22/Understanding/contrast-minimum.html), W3C — resmî kaynak - [WCAG: Bağıl parlaklık tanımı](https://www.w3.org/WAI/GL/wiki/Relative_luminance), W3C — resmî kaynak - [MDN: CanvasRenderingContext2D.getImageData()](https://developer.mozilla.org/en-US/docs/Web/API/CanvasRenderingContext2D/getImageData), Mozilla — resmî kaynak