Görselden Renk Seçici — HEX, RGB & HSL

Herhangi bir görselden piksel hassasiyetinde renk seçin, paletini çıkarın, HEX/RGB/HSL arasında dönüştürün ve hatta ekranınızdaki herhangi bir yerden doğrudan örnek alın — hepsi tek bir sayfada, tamamen tarayıcınızda çalışıyor. Araç ilk açılışta etkileşimli olsun diye örnek bir görselle açılıyor; istediğiniz an kendi JPG, PNG, WEBP veya AVIF dosyanızı (20 MB'a kadar) bırakın, seçici, büyüteç ve palet çıkarıcı anında ona geçer. Hiçbir şey yüklenmiyor, hiçbir sunucu dosyanızı işlemiyor, örneklediklerinizi izleyen telemetri yok.

Görselin üzerinde gezinmek imlecin yanında 9×9'luk bir büyüteç açıyor; ortadaki kırmızı çerçeveli hücre o anda örneklenen pikseldir ve sağ panelde tam HEX kodu olarak gösterilir. Tıklamak rengi sabitler (pin), böylece kaybetmeden düzenleyebilir ve kopyalayabilirsiniz; başka bir yere tıklayınca yeniden sabitlenir. Büyüteç görselin yüksek çözünürlüklü bir kopyasından (en uzun kenar 1600 pikseli aşmaz) okuma yapar, dolayısıyla seçilen renk küçültülmüş bir yaklaşıma değil, ekranda gördüğünüze birebir karşılık gelir. Bir markanın paletini fotoğraftan tersine mühendislikle çıkaran tasarımcılar için bu tek özellik Photoshop'un eyedropper'ına gidip gelmenin tüm turunu ortadan kaldırıyor.

Görselin sağında seçilen renk iki swatch olarak görünüyor (büyük olan sabitlenen renk, küçük olan canlı hover örneği) ve üç metin girişi: HEX, RGB ve HSL. Girişler tamamen düzenlenebilir, dolayısıyla panel seçici olmanın yanında eksiksiz bir renk-formatı dönüştürücüsü işlevi de görüyor. HEX kodu yazın, RGB ve HSL alanları güncellenir; RGB üçlüsü yazın diğerleri ona uyar; HSL girin gerisi yakalar. Her satırda tek tıkla kopyalama düğmesi var ve formatlanmış çıktı tasarımcıların gerçekten kullandığı kurallara uyuyor: büyük harfli HEX, rgba()-stil RGB notasyonu ve virgül-ayrılmış HSL.

Seçici panelinin altındaki Renk Paleti şeridi, görselden 2 ila 12 en temsili rengi Web Worker içinde çalışan k-means kümelemesiyle otomatik çıkarıyor. Kümeleme hız için küçültülmüş bir kopyada (en uzun kenar 200 piksel) çalışıyor ama sonuç tam çözünürlüklü görsele istatistiksel olarak sadık çünkü k-means giriş yoğunluğundan bağımsız olarak aynı küme merkezlerine yakınsıyor. +/− düğmeleriyle palet boyutunu değiştirebilirsiniz; analiz milisaniyeler içinde yeniden çalışıyor. Bir swatch'a tıklayın seçili renge atayın, çift tıklayın HEX'ini kopyalayın veya +/− düğmelerinin yanındaki indirme ikonuyla paleti moodboard, sunum ve marka belgeleri için uygun düz 1200×400 PNG olarak kaydedin.

“Renk detaylarını göster” bölümü beş tint (her biri bir öncekinden beyaza biraz daha yakın) ve beş shade (her biri siyaha daha yakın) ile birlikte canlı bir okunabilirlik önizlemesi açıyor. Tint ve shade'ler seçili renk ile beyaz veya siyah arasında doğrusal interpolasyonla hesaplanıyor; bu çoğu CSS preprocessor'ın `lighten()` ve `darken()` fonksiyonları için kullandığı yöntemin aynısı. Herhangi bir tint veya shade'e tıklarsanız o renk seçili olur ve tüm çalışma alanı güncellenir — sayfadan ayrılmadan bir rengi parlaklık ekseni boyunca yukarı-aşağı yürütmenin tek tıkla yolu.

Ekrandan Seç düğmesi tarayıcının yerel EyeDropper API'sini kullanarak fiziksel ekranınızdaki herhangi bir rengi (bir sitenin butonu, başka bir sekmedeki grafik, masaüstü uygulamasındaki logo) örnekleyip seçili renge dönüştürür. EyeDropper API 2021'den beri Chrome, Edge ve Opera (Chromium ailesi) tarafından destekleniyor; Firefox ve Safari henüz göndermiyor, bu tarayıcılarda düğme otomatik devre dışı kalıp bir tooltip gösteriyor. Desteklendiğinde iş akışı oldukça etkileyici: düğmeye tıklayın, tarayıcı penceresi dışında dahil ekranın herhangi bir yerinde gezinin, tekrar tıklayın ve gösterdiğiniz şeyin tam HEX'ine sahipsiniz.

İnsanların böyle bir aracı açmasının beş yaygın sebebi var. Birincisi marka paleti tersine mühendisliği: bir tasarımcıya hero fotoğraf veriliyor ve uyumlu bir UI kurması isteniyor; fotoğraftan baskın renkleri çekip tint/shade ile yürütmek görselle organik hissettiren bir palet üretir. İkincisi e-ticaret ürün sayfası stillemesi: pazaryeri platformları (Trendyol, Hepsiburada, Amazon) ürün fotoğraflarına tonal olarak uyumlu çevre kromuna sahip sayfaları ödüllendirir; CTA buton renklerini fotoğrafın baskın tonlarına eşlemek bilinen bir dönüşüm artırma tekniği. Üçüncüsü sosyal medya tutarlılığı: ortak bir paleti paylaşan Instagram ve TikTok feed'leri daha küratörlü hissettirir; her gönderiden baskın renkleri çekip yeni içeriği bunlara göre uyumlamak içerik üreticileri arasında yaygın bir teknik. Dördüncüsü kod tarafında renk dönüşümü: geliştiriciler düzenli olarak tasarımcının HEX'ini canvas API'leri için RGB'ye veya tema manipülasyonu için HSL'ye dönüştürmek zorunda kalır; bu aracın üç yönlü dönüşümü üç ayrı yardımcı programın yerini alır. Beşincisi eski ekran görüntüsü madenciliği: bir marka kitabı eksik olduğunda ve elimizde sadece eski bir web sitesi ekran görüntüsü varsa, görsel üzerinde bir renk seçici orijinal paleti kurtarmanın en hızlı yoludur.

Teknik tarafta renk matematiği standart ve kısaca anlamaya değer. HEX, bir RGB üçlüsünün altı karakterli onaltılık temsilidir (ilk iki karakter kırmızı, sonra yeşil, sonra mavi; her biri 00 ile FF arasında). RGB aynı üçlünün 0-255 arasındaki üç ondalık sayı olarak ifadesidir. HSL ise tamamen farklı bir renk uzayıdır — hue (ton) renk çarkında 0°'den 360°'ye bir açı, saturation (doygunluk) griden tam doygunluğa bir yüzde, lightness (parlaklık) siyahtan beyaza bir yüzde. HSL sistematik renk manipülasyonu için RGB'den daha kullanışlıdır çünkü tek bir kanalı değiştirmek öngörülebilir sonuçlar üretir: lightness'i değiştirmek tint/shade'ler üretir, saturation'ı değiştirmek canlılık varyasyonları üretir, hue'yu değiştirmek tamamlayıcı veya analojik renkler üretir. Araç seçili rengi içeride RGB üçlüsü olarak saklayıp HEX ve HSL'ye talep üzerine dönüştürür; bu HSL üzerinden tekrar tekrar dönüşüm yapıldığında biriken yuvarlama hatalarını önler.

Gizlilik baş başlık avantajı ve net olmaya değer çünkü çevrimiçi renk seçicilerin çoğu sunucu tabanlıdır. Buraya bıraktığınız görsel byte'ları standart File API kullanılarak JavaScript belleğine okunur, tarayıcının yerel görsel kod çözücüsüyle çözülür ve örnekleme için bir canvas'a render edilir — bu adımların hiçbiri ağ isteği yapmaz. DevTools Ağ sekmesi örnekleme ve palet çıkarma sırasında sıfır dışa giden istek gösterir. Bulut hesabı yok, görselinizin içeriği üzerinde telemetri yok, eğitim verisi çıkarımı yok ve sunucu tarafı günlük tutma yok. Yayımlanmamış marka varlıklarını işleyen ajanslar, telif altındaki müşteri fotoğraflarıyla çalışan fotoğrafçılar veya NDA'ya tabi olan herkes için bu önemli: çoğu çevrimiçi renk seçici görselinizi backend'ine yükler, ki bu hassas materyal için yanlış araç tipidir.

Kas hafızasına emanet etmeye değer birkaç pratik kalıp. Birincisi, fotoğraftan marka paleti çıkarırken 4 yerine 6-8 renk alın — ekstra renkler paleti düz değil zengin hissettiren ikincil tonları yakalar. İkincisi, UI çalışması için baskın fotoğraf rengini seçin, sonra otomatik destek paleti üretmek için tint/shade panelinden geçirin; bu sistem genelinde matematiksel tutarlılık garanti eder. Üçüncüsü, kod için formatlar arasında dönüşüm yaparken CSS'te HEX kullanın (en okunabilir, en önbelleklenebilir), şeffaflığın önemli olduğu canvas API'leri ve CSS rgba() değerlerinde RGB kullanın, çalışma zamanında matematiksel olarak varyantları türetmeniz gerektiğinde CSS değişkenlerinde HSL kullanın. Dördüncüsü, çalışırken favori renklerinizi kaydedin — kaydedilen renkler şeridi tarayıcı oturumları arasında localStorage aracılığıyla kalıcıdır, yani çalışan bir renk paleti sekmeyi kapatsanız bile yerinde kalır.

Şeffaf olmak adına bilinmeye değer birkaç sınırlama var. K-means kümeleme tohum adımında deterministik değildir, dolayısıyla aynı görselde palet çıkarmayı iki kez çalıştırmak kapsama yüzdelerinde yüzdeden küçük varyasyonlar ve ara sıra iki bitişik rengin yer değişmesi üretebilir; gerçek dünya görsellerinde görünür palet kararlı kalır. EyeDropper API yalnızca onu gönderen tarayıcılarda çalışır (2026 itibarıyla Chromium tabanlı); Firefox ve Safari'de düğme devre dışıdır ve Ekrandan Seç yükle-ve-seç akışına döner. Büyüteç görselin 1600 piksel kopyasından örnekleme yapar, dolayısıyla sanat baskılarının çok yüksek çözünürlüklü taramaları (4000 piksel üstü) için seçilen HEX tam çözünürlüklü örneklemden kanal başına 1 birim farklı olabilir — göze imkansız ama arşiv çalışması için bilinmeye değer. Araç renk adı ataması yapmaz (Pantone, RAL, X11) çünkü bu adlandırma sistemleri lisanslı; adlandırılmış bir renge ihtiyacınız varsa HEX'i kopyalayın ve özel bir adlandırma servisinde arayın.

Bu araç Omnvert'in geri kalan görsel yardımcı programlarıyla doğal olarak eşleşir. Görsel Sıkıştırıcı aynı formatları kabul eder ve ağır bir hero görselden palet çekildikten sonra doğru sonraki adımdır — görsel boyutlarını bırakın, WebP'ye yeniden kodlayın, sayfa ağırlığı paleti değiştirmeden %60–80 düşer. Background Remover seçilen renk bir logo veya ürün fotoğrafından geliyorsa ve varlığı yeni palette yeniden kullanmak istiyorsanız kullanışlıdır. Crop aracı çıkarmadan önce görsel alanını azaltır, ki bu alakasız arka plan piksellerini hariç tutarak paleti keskinleştirir. Filtreler aracı kaynağı renklendirmek isterseniz hue/saturation ayarlarının yanında WebP/AVIF format dönüşümünü kapsar. SVG Araçları sayfası palet kaynağı bir vektör logo olduğunda doğru sonraki adımdır. Bunların hepsi aynı gizlilik garantileriyle tarayıcıda çalışır, böylece bütün bir renk-tasarım iş akışı tek bir sekmede üçüncü taraf bir hizmete tek bir byte gitmeden gerçekleşebilir.