Bir görseldeki rengin HEX kodunu nasıl alabilirim?

Görseli yükleyin, ardından üzerinde gezinin veya bir piksele tıklayın — büyüteç tam pikseli vurmanıza yardımcı olur. HEX kodu (örneğin #4f46e5) anında gösterilir ve tek bir tıklamayla kopyalanır.

HEX kodu, bir rengi # işaretini takip eden altı onaltılık basamakla yazar — #4f46e5 örneğinde olduğu gibi kırmızı, yeşil ve mavi için ikişer basamak. CSS, HTML ve çoğu tasarım aracının beklediği biçim budur.

Yalnızca HEX değil, RGB ve HSL değerlerini de alabilir miyim?

Evet — seçtiğiniz her piksel HEX kodunun yanı sıra RGB ve HSL değerlerini de gösterir ve her biri tek bir tıklamayla kopyalanabilir.

Görselden HEX Renk Kodu Al — Renk Kodu Seçici

Görselden Hex Rengi Alma Aracı: HEX, RGB ve HSL Çıktılarıyla Hassas Renk Seçimi

Bir görselin üzerindeki belirli bir pikselin rengini almak, özellikle web tasarımı ve CSS çalışmalarında sık ihtiyaç duyulan bir işlemdir. Bu sayfa, yüklediğiniz bir görselin herhangi bir pikseline tıklayarak o pikselin HEX (altı haneli), RGB ve HSL değerlerini anında gösterir. Çıktılar arasında birincil format hex olduğu için bu sayfa, CSS’te color: #1E90FF gibi doğrudan kullanılabilecek bir renk kodu elde etmek isteyenler için tasarlanmıştır. Aşağıda aracın nasıl çalıştığını, hangi durumlarda farklılaştığını ve kullanırken karşılaşabileceğiniz sınırlamaları detaylandırıyoruz.

Bu Sayfayı Diğerlerinden Ayıran Özellik

Sitede aynı temayı paylaşan ancak farklı renk modellerine odaklanan başka sayfalar da bulunur. Örneğin bir sayfa yalnızca RGB fonksiyonel gösterimini (rgb(255, 0, 0)) verirken, bir başkası HSL değerlerini ön plana çıkarır. Bu sayfanın temel farkı, hex kodunun birincil çıktı olmasıdır. Altı haneli hex (#1E90FF) veya üç haneli kısa yazım (#19F) web standartlarında rengi ifade etmenin en yaygın yoludur. CSS’de color, background-color, border-color gibi hemen her özellikte parantez veya ek sözdizimi gerektirmez.

Bir diğer önemli fark da alfa kanalı ile ilgilidir. Hex gösterimi altı haneli halinde alfa değerini kodlamaz. Bu nedenle sayfa, saydam piksellerin alfa bilgisini ayrı bir metin olarak sunar: “Alpha %35 – this pixel is partly transparent.” (Arayüz İngilizce olarak tasarlanmıştır; kullanıcıya yansıyan mesajlar İngilizcedir, ancak teknik terimler korunur.) Bu, RGB ve HSL sayfalarında alfa kanalının doğrudan fonksiyon içinde gösterilmesinden farklı bir yaklaşımdır ve hex odaklı kullanıcılar için net bir ayrım sağlar.

Nasıl Çalışır: Girdiler, Çıktılar ve Kullanım

Desteklenen Dosya Biçimleri

Araç şu biçimlerdeki görselleri kabul eder: PNG, JPG, WebP, GIF, AVIF, HEIC. MIME türü olarak image/jpeg, image/png, image/webp, image/gif, image/avif, image/heic, image/heif türlerini tanır. Desteklenmeyen bir dosya sürüklendiğinde ekranda “That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.” uyarısı belirir. Açılamayan bozuk dosyalar için ise “That image could not be opened. It may be corrupted or in an unsupported format.” mesajı gösterilir.

Görsel Yükleme ve Ölçeklendirme

Görsel yüklendiğinde hemen ortadaki pikselin renk değerleri ve koordinatları görüntülenir. Görselin en uzun kenarı 4096 pikseli aşarsa, tarayıcı yüklenmeden önce bu sınıra indirgenir. Bu sayede büyük görsellerle çalışırken performans sorunu yaşanmaz, ancak ölçeklendirme piksel değerlerini değiştirmez; yalnızca görüntü boyutunu küçültür.

Fare ve Klavye ile Piksel Seçimi

Fareyi görselin üzerinde gezdirdiğinizde, imlecin altındaki pikselin x, y koordinatları ve o piksele ait HEX, RGB, HSL değerleri anlık olarak güncellenir. Daha hassas seçim için bir büyüteç alanı (magnifier) bulunur; bu alan, tıklamadan önce tam hangi piksele odaklandığınızı görmenizi sağlar. Tıklamak, o anda seçili olan rengi kaydeder. Kaydedilen renk, “Saved #1E90FF to your picks.” şeklinde bir bildirimle doğrulanır.

Klavye kullanıcıları için de tam destek vardır: Yön tuşları (ok tuşları) ile bir artı işareti (crosshair) görsel üzerinde hareket ettirilebilir. Her tuş basışı 1 piksel kaydırır. Shift tuşuna basılıyken yön tuşlarına basmak, hareketi 10 piksel artırır. Seçili pikseli kaydetmek için Enter veya Space tuşuna basmanız yeterlidir. Bu özellik, özellikle ince ayrıntılarda fare kullanmak istemeyen veya erişilebilirlik ihtiyacı olan kullanıcılar için önemlidir.

Çıktı Değerleri

Tüm değerler görselin üzerinde aşağıdaki gibi listelenir:

Görsel boyutları (genişlik × yükseklik)
Seçili pikselin koordinatları (x, y)
HEX: Altı haneli hex kodu (#1E90FF)
RGB: Kırmızı, yeşil, mavi değerleri (0-255)
HSL: Ton (0-360), doygunluk (%), parlaklık (%)
Alfa bilgisi: Eğer piksel yarı saydam ise “Alpha %n – this pixel is partly transparent.” biçiminde gösterilir. Tam saydam bir pikselde alfa %0, tam opak pikselde %100 olarak raporlanır. Hex altı haneli olduğu için alfa burada kodlanmaz; ayrı bir satırda verilir.

Herhangi bir renk değerine tıklamak (HEX, RGB veya HSL) o değeri panoya kopyalar. Kopyalama başarısız olursa “Could not copy — your browser blocked clipboard access.” uyarısı çıkar.

Geçmiş (Saved Picks)

Tıklanan renklerin geçmişi, en fazla 12 öğe tutar. Aynı RGB değerlerine sahip ancak farklı alfa düzeylerine sahip pikseller ayrı ayrı kaydedilir. Geçmişteki bir renk swatch’ına tıklamak o rengi yeniden seçer (değerler ekranda görüntülenir). 12’den fazla renk tıklandığında en eskisi silinir, yerine yenisi eklenir.

“Start over” (Baştan başla) butonu görseli, geçmişi ve tüm durumu sıfırlar; araç ilk haline döner.

Pixel Seçiminde Dikkat Edilmesi Gereken Sınırlamalar

Sayfa, görselde depolanan ham piksel değerini okur. Bu durum birkaç önemli sınırlamayı beraberinde getirir:

JPEG sıkıştırması ve görüntü işleme (anti‑aliasing, renk dönüşümü) nedeniyle, gözle aynı renk gibi görünen bir alandaki komşu pikseller farklı değerlere sahip olabilir. JPEG, kayıplı bir biçim olduğu için özellikle düz renkli alanlarda hafif renk sapmaları normaldir.
Screenshot (ekran görüntüsü) pikselleri de genellikle işletim sistemi veya tarayıcı tarafından yeniden örneklenir; bu nedenle orijinal renklerden küçük farklar olabilir.
Yarı saydam pikseller, arka plandaki renk dikkate alınmadan yalnızca kendi alfa değeriyle birlikte okunur. Yani saydamlık içeren bir PNG’de bir pikselin alpha’sı %50 ise, araç o pikselin RGB değerini olduğu gibi (arka planla harmanlanmamış) verir. Bu, özellikle yumuşak kenarlar veya gölgelerle çalışırken bilinçli olunması gereken bir noktadır.
Renk uzayı farklılıkları (sRGB, Adobe RGB gibi) bu araç tarafından işlenmez; tarayıcının kullandığı renk yönetimi ayarlarına bağlıdır.

Renk Değerlerini Kopyalama ve Geçmiş Kullanımı

Kullanıcı deneyimini hızlandırmak için tüm renk değerleri tıklanabilir şekilde sunulur. Örneğin #1E90FF yazısına tıkladığınızda bu hex kodu panoya kopyalanır. Benzer şekilde rgb(30, 144, 255) veya hsl(210, 100%, 56%) değerlerine tıkladığınızda da ilgili format kopyalanır. Bu sayede herhangi bir tasarım yazılımına (Figma, Photoshop) veya bir CSS düzenleyicisine hızlıca yapıştırabilirsiniz.

Geçmiş paneli, renk swatch’larını küçük dikdörtgenler olarak gösterir. Her swatch’ın üzerinde hex kodu yazılıdır (örneğin #1E90FF). Swatch’a tıklamak, o rengi tekrar seçer ve altındaki HEX, RGB, HSL değerlerini günceller. Bu özellik, aynı görselden birkaç renk topladıktan sonra bunları karşılaştırmak veya hızlıca referans almak için kullanışlıdır.

Renk Modelleri Hakkında Kısa Bir Not: HEX, RGB, HSL ve Alfa

Bu araçta karşınıza çıkan üç renk modelini kısaca hatırlayalım:

HEX: Altı haneli onaltılık sistemde yazılan RGB değeridir. #1E90FF = Kırmızı=30, Yeşil=144, Mavi=255. CSS’te en yaygın kullanılan formattır ve alfa içermez (modern CSS’de #1E90FF80 gibi sekiz haneli yazım da vardır, ancak bu sayfa altı haneli çıktı verir).
RGB: Üç kanalın 0-255 aralığındaki tam sayılarıyla ifade edilir. Örneğin rgb(30, 144, 255).
HSL: Renk tonu (Hue) 0-360 derece, doygunluk (Saturation) ve parlaklık (Lightness) yüzde olarak. Örneğin hsl(210, 100%, 56%). HSL, insan gözünün renkleri algılama biçimine daha yakındır ve bir rengi ton değiştirerek varyasyonlar üretmek için kullanışlıdır.

Alfa değeri ayrıca raporlanır. Hex altı haneli olduğu için alfa bilgisi ek bir satırda gösterilir. Örneğin alfa %50 olan bir pikselde “Alpha 50% – this pixel is partly transparent.” yazısı çıkar. Bu, özellikle saydam katmanlar içeren bir PNG’den renk alırken, rengin opaklığını anlamanızı sağlar.

Sık Sorulan Sorular (FAQ)

Desteklenmeyen bir dosya formatı yüklemeye çalıştığımda ne olur?
Ekranda “That file type is not supported. Try a PNG, JPG, WebP, GIF, AVIF or HEIC image.” uyarısı görüntülenir.
Görsel çok büyükse hata alır mıyım?
Hayır, en uzun kenar 4096 pikseli aşan görseller otomatik olarak bu sınıra indirgenir. Renk değerleri doğru kalır, yalnızca görüntü boyutu küçültülür.
Neden yarı saydam bir pikselin hex kodu yanında alfa yüzdesi ayrıca yazıyor?
Altı haneli hex gösterimi alfa kanalını kodlamaz. Bu nedenle saydamlık bilgisi ek bir satırda “Alpha %n” olarak verilir.
Geçmişte kaç renk saklanabilir?
En fazla 12 renk. Aynı RGB değerine sahip ancak farklı alfa değerlerine sahip renkler ayrı kaydedilir. 13. renk eklendiğinde en eskisi silinir.
Bir renk değerine tıklayınca kopyalanmazsa ne yapmalıyım?
Tarayıcının pano erişimini engellemesi durumunda “Could not copy — your browser blocked clipboard access.” mesajı çıkar. Bu durumda tarayıcı ayarlarınızı kontrol edin veya değeri manuel olarak seçip kopyalayın.
“Start Over” butonu ne işe yarar?
Yüklenen görseli kaldırır, tüm renk geçmişini temizler ve aracı başlangıç durumuna döndürür.
Klavye ile piksel seçerken Shift tuşunun işlevi nedir?
Shift basılıyken yön tuşlarına basmak, artı işaretini 1 piksel yerine 10 piksel kaydırır. Böylece geniş alanlarda hızlıca hareket edebilirsiniz.
Bu araç, renkleri sRGB dışındaki renk uzaylarında da doğru gösterir mi?
Tarayıcınızın renk yönetimi ayarlarına bağlıdır. Araç, görselin içerdiği ham piksel değerini okur; renk uzayı dönüşümü uygulamaz.

SSS