Bu damlalık aracı hangi renk biçimlerini destekler?

Aracımız renkleri Onaltılık (#RRGGBB), RGB (rgb(r, g, b)), HSL (hsl(h, s%, l%)) ve tek tıklamayla panoya anında kopyalanabilen baskı yaklaşımlı CMYK (cmyk(c%, m%, y%, k%)) biçimlerine çıkarır ve dönüştürür.

Bir işletim sistemi damlalığı neden bu araçtan farklı bir hex kodu verir?

İşletim sistemi damlalıkları, monitörünüzün ICC renk profili ve geniş gamlı Display P3 kalibrasyonu ile değiştirilmiş olan fiziksel monitörünüzün bileşik ekran arabelleğinden örnek alır. Aracımız ise doğrudan bellekteki ham kodu çözülmüş dosya arabelleğini okuyarak görselde depolanan gerçek, matematiksel olarak saf sRGB değerlerini döndürür.

10x büyütme büyüteci daha iyi renkler seçmeme nasıl yardımcı olur?

Yüksek çözünürlüklü grafikler kenarlarda kenar yumuşatma (anti-aliasing) kullanarak yarı saydam harmanlanmış piksellerden oluşan çok pikselli bir gradyan oluşturur. 10x yakınlaştırma büyüteci her bir kare pikseli artı kılıyla ortaya çıkararak bir kenar karışımı yerine gerçek düz renge tıklamanızı sağlar.

Renk Seçici ile Baskın Renkler arasındaki fark nedir?

Renk Seçici, belirli tek bir pikselin kesin rengini çıkarmak için kullanılan manuel bir hassas damlalıktır. [Baskın Renkler](/tr/tools/image/dominant-colors/) ise tüm görseli otomatik olarak analiz etmek ve genel temayı oluşturan en baskın 5 ila 8 rengi çıkarmak için makine öğrenimi k-ortalama kümelemesini kullanır.

Yüksek DPI özellikli Apple Retina ve 4K ekranlarda renkleri doğru şekilde seçebilir miyim?

Evet, kusursuz şekilde. Motorumuz CSS düzen koordinatlarını görselin yerel özgün çözünürlüğüne eşler, alt piksel örnekleme doğruluğunu garanti etmek için Cihaz Piksel Oranını (DPR) ve tarayıcı yakınlaştırma düzeylerini telafi eder.

Tek bir oturumda birden çok görselden renk örnekleyebilir miyim?

Evet. İstediğiniz zaman stüdyoya yeni görseller sürükleyip bırakabilirsiniz. Tüm işlemler sıfır sunucu gecikmesiyle makinenizde yerel olarak gerçekleşir ve iş akışı yinelemesini anlık hale getirir.

Özel UI taslaklarım veya müşteri logolarım herhangi bir sunucuya yükleniyor mu?

Asla. 2run.tools tavizsiz bir istemci tarafı gizlilik mimarisi altında çalışır. Tüm görsel kod çözme, piksel örnekleme ve renk dönüştürme işlemleri cihazınızın tarayıcı belleğinde %100 yerel olarak gerçekleşir. Grafikleriniz asla makinenizden ayrılmaz, bu da tam gizlilik ve güvenlik sağlar.

Resimden Renk Seçici

Teknik Rehber & İnceleme•8 dk okuma•2RUN Mühendislik Ekibi

100% İstemci Taraflı & Sıfır Veri Yükleme

Damlalık ile Renk Çıkarma: Piksel Büyüteçleri, Renk Uzayı Dönüşümleri ve Alt Piksel Örnekleme Hassasiyeti Teknik Kılavuzu

⚡3 Basit Adımda Görselden Renk Nasıl Seçilir?

1. Grafik Dosyanızı Yükleyin

JPEG, PNG, WebP, AVIF veya SVG görselinizi doğrudan renk seçici stüdyo tuvaline sürükleyip bırakın veya yerel dosyalara göz atmak için tıklayın. Görseliniz harici sunuculara tek bir bayt yüklenmeden anında yerel tarayıcı belleğine yüklenir.

2. 10x Piksel Büyüteciyle İnceleyin

Gerçek zamanlı 10x yakınlaştırma büyütecini izlerken imlecinizi tuval üzerinde gezdirin. Artı kıl hedefi bağımsız fiziksel pikselleri vurgulayarak kenar yumuşatma bulanıklığını atlamanıza ve gerçek düz dolguları yalıtmanıza olanak tanır.

3. Tıklayın ve Kesin Renk Kodlarını Kopyalayın

Örnekleme yapmak için hedef piksele tıklayın. Renk örneği denetleyicisinde anında HEX, RGB, HSL ve CMYK değerleri görünür. Kodu doğrudan sistem panonuza kopyalamak için herhangi bir biçime tıklayın.

Dijital fotoğraflardan, kullanıcı arayüzü modellerinden, marka kimliği yönergelerinden ve vektör illüstrasyonlarından kesin, tavizsiz renk değerleri çıkarmak; ön yüz yazılım mühendisleri, UI/UX tasarımcıları, dijital illüstratörler ve marka yöneticileri için günlük bir zorunluluktur. İster kurumsal bir logonun tam vurgu rengini belirlemek, ister dijital rötuş için özgün bir ten tonunu yakalamak, isterse CSS düğmelerini stillendirmek amacıyla bir e-ticaret vitrin afişinin baskın arka plan tonunu almak olsun; görsel tahminlere veya hantal manuel palet kaydırıcılarına güvenmek marka dışı tutarsızlıklara ve görsel uyumsuzluklara yol açar. Tek bir pikselin kesin 24-bit onaltılık (hex) kodunu, RGB tamsayı üçlüsünü veya CSS HSL koordinatını bulmak yüksek hassasiyetli optik araçlar gerektirir.

Bununla birlikte, standart işletim sistemi renk seçicileri ve ilkel çevrimiçi yardımcı programlar büyük teknik eksikliklerden muzdariptir: İşletim sistemi damlalıkları sıklıkla monitör ICC renk profillerine ve Display P3 geniş renk gamı dönüşümlerine maruz kalan son bileşik ekran arabelleklerinden örnekleme yapar ve kaynak dosyayla eşleşmeyen bozuk onaltılık kodlar döndürür. Dahası, büyütme olmadan yüksek çözünürlüklü görsellere tıklamak, genellikle gerçek düz dolgu yerine bitişik kenar yumuşatılmış (anti-aliased) geçiş piksellerini örnekler. Tarayıcı içi yerel Renk Seçici aracımız bu zorlukları alt piksel matematiksel hassasiyetiyle çözer. Artı kıl göstergeli etkileşimli 10x gerçek zamanlı piksel büyüteci içeren motorumuz, cihazınızın belleğindeki ham pikselleri doğrudan okur—sıfır sunucu yüklemesi, sıfır gecikme ve eksiksiz istemci tarafı veri gizliliği ile anlık HEX, RGB, HSL ve CMYK renk kodları görüntüler.

Teknik rehberin tamamını oku

Koordinat Eşleme: CSS Görünüm Alanı Pikselleri ve Yerel Özgün Tuval Koordinatları Karşılaştırması

Modern duyarlı (responsive) web geliştirmede, bir tarayıcı penceresinde görüntülenen bir görsel nadiren yerel piksel boyutlarıyla eşleşir. Yüksek çözünürlüklü fotoğraflar (ör. 6000x4000 piksel), duyarlı görünüm alanı kapsayıcılarına (ör. 800x533 CSS pikseli) sığacak şekilde CSS düzen motorları tarafından küçültülür. Dahası, yüksek DPI ekranlar (Apple Retina veya 4K masaüstü ekranlar gibi), Cihaz Piksel Oranı (DPR) ölçekleme faktörü sunarak CSS düzen koordinatlarını fiziksel ekran piksellerinden ayırır.

Bir renk seçici imlecin ekran konumunu safça okursa, özgün görsel verisi yerine küçültülmüş, bulanıklaştırılmış ekran temsilini örnekler. Motorumuz titiz koordinat eşleme dönüşümleri uygular. İmleciniz tuval üzerinde gezindiğinde, fare olayı koordinatları $(x_{\text{css}}, y_{\text{css}})$ görselin sıkıştırılmamış ham piksel arabelleğine yansıtılır: $$X_{\text{native}} = \left\lfloor \frac{x_{\text{css}} - \text{rect.left}}{\text{rect.width}} \times \text{Width}_{\text{native}} \right\rfloor$$ $$Y_{\text{native}} = \left\lfloor \frac{y_{\text{css}} - \text{rect.top}}{\text{rect.height}} \times \text{Height}_{\text{native}} \right\rfloor$$ Motorumuz, yerel piksel dizisindeki kesin tamsayı koordinatını hesaplayarak, görünüm alanı küçültmesini, CSS bulanıklık filtrelerini ve tarayıcı enterpolasyonunu tamamen atlar ve ölçeklenmemiş ana dosyadan özgün 8-bit kanal değerlerini damlalıkla çıkarır.

Alt Piksel Kenar Yumuşatma ve Büyütecin Sağladığı Avantaj

Yüksek çözünürlüklü tipografiden, ince simge çizgilerinden veya vektör kenarlıklarından renk örneklemek görsel büyütme olmadan son derece zahmetlidir. Bilgisayar monitörleri eğri vektörleri ve köşegen harf formlarını alt piksel kenar yumuşatma (anti-aliasing) kullanarak oluşturduğundan, koyu bir harf ile beyaz bir arka plan arasındaki sınır ani ikili bir kenar değildir; ara yarı saydam gri tonların kademeli çok pikselli bir rampasıdır.

Eğitimsiz bir kullanıcı büyütme olmadan siyah bir harfin kenarına tıkladığında, neredeyse her zaman gerçek #000000 çekirdek rengi yerine kenar yumuşatılmış bir geçiş pikselini (ör. #7A7A7A veya #B4B4B4) örnekler. Etkileşimli 10x büyütecimiz bu tahmin yürütme zorunluluğunu tamamen ortadan kaldırır.

İmleciniz görsel üzerinde kayarken büyüteç, imleciniz üzerinde merkezlenmiş, bağımsız piksel ızgara çizgileri ve hassas bir artı hedefi ile donatılmış 10x büyütülmüş bir piksel matrisi işler. Her bir ayrık kare pikseli görsel olarak inceleyebilir, çevre bulanıklığından zahmetsizce kaçınabilir ve tam katı çekirdek rengine kilitlenebilirsiniz.

Renk Uzayı Dönüşümleri: HEX, sRGB, HSL, HSV ve Çıkarımsal CMYK

Modern yaratıcı geliştirme, hedef ortama bağlı olarak birden çok matematiksel model genelinde renk tanımları gerektirir: 1. Onaltılık (#RRGGBB): 8-bit kanal tamsayılarını (0–255) 16 tabanlı dizelere dönüştüren, web geliştirmenin evrensel dijital standardıdır. 2. Eklemeli sRGB: Kırmızı, yeşil ve mavi ekran yayıcılarının yoğunluğunu temsil eden tamsayı üçlüleridir $(R, G, B)$. 3. Silindirik HSL ve HSV: Ton (Hue), Doygunluk (Saturation) ve Açıklık (Lightness) ya da Parlaklık Değeri (Value). Ön yüz mühendisleri modern CSS tasarım sistemlerinde HSL'yi fazlasıyla tercih eder: Ton ve Doygunluğu kilitleyip Açıklığı ($L$) değiştirerek, geliştiriciler CSS değişkenleri aracılığıyla erişilebilir vurgu durumlarını, etkin düğme durumlarını ve karanlık mod belirteçlerini dinamik olarak üretebilirler. 4. Çıkarımsal CMYK: Dört renkli baskı mürekkebi sürecini yaklaştırır (Camgöbeği, Macenta, Sarı, Siyah). Aracımız standart çıkarımsal dönüşümleri hesaplar: $K = 1 - \max(R', G', B')$, $C = (1 - R' - K)/(1 - K)$, vb. Böylece matbaa üretim devir teslimleri için hızlı bir referans köprüsü sağlar.

İşletim Sistemi Gamı Tuzakları: Display P3 ve Standart sRGB Karşılaştırması

Ön yüz geliştiricileri arasında yaygın bir hayal kırıklığı, bir işletim sistemi damlalık aracının (macOS Digital Color Meter gibi) neden orijinal tasarım taslağından farklı onaltılık kodlar ürettiğidir. Bunun asıl sorumlusu ekran renk yönetimidir.

Modern dizüstü bilgisayarlar (Apple MacBook'lar gibi), standart sRGB'den %25 daha fazla renk görüntüleyebilen geniş gamlı Display P3 ekranlara sahiptir. İşletim sistemi P3 bir ekranda sRGB bir görsel oluşturduğunda, işletim sistemi pencere yöneticisi renk değerlerini etkin bir monitör ICC profili aracılığıyla çevirir. Ekranı bir işletim sistemi yardımcı programıyla örneklerseniz, orijinal sRGB dosya baytı yerine monitör tarafından telafi edilmiş P3 değerini yakalarsınız!

Tarayıcı içi Renk Seçicimiz, herhangi bir işletim sistemi monitör profili renk eşlemesi gerçekleşmeden önce doğrudan JavaScript belleğindeki kodu çözülmüş görsel arabelleğini okur. Dosyada kodlanmış kesin, matematiksel olarak saf renk baytlarını alırsınız; bu da geliştirme, hazırlık (staging) ve üretim ortamları arasında %100 eşlik sağlar.

Kapsamlı Tasarım Sistemi Entegrasyon Hattı

Renk çıkarma, uyumlu görsel kimlik tasarımına açılan ilk kapıdır. Renk Seçici'yi 2run.tools paketindeki bitişik yardımcı programlarla eşleştirin: 1. Renk Seçici ile Hassas Örnekleme: 10x büyüteçle referans görselin üzerine gelin ve birincil, ikincil ve nötr HEX kodlarını kopyalamak için tıklayın. 2. Baskın Renkler ve Palet Oluşturucu ile Otomatik Palet Üretimi: Tam uyumlu renk şemalarını, üçlü (triadic) uyumları ve tamamlayıcı rampaları çıkarın. 3. Renk Tonu ile Marka Varlık Uyumu: [Renk Tonu](/tr/tools/image/color-tint/) kullanarak arka plan fotoğraflarını aynı marka renk atmosferine büründürün. 4. Kenarlık Ekleme ile Çerçeveleme ve Vurgular: [Kenarlık Ekleme](/tr/tools/image/add-border/) içinde tam olarak örneklenen marka renklerini kullanarak vitrin grafiklerini çerçeveleyin. 5. Gizlilik Temizliği ve Dağıtım: [EXIF Temizleme](/tr/tools/image/strip-exif/) ile hassas kamera meta verilerini temizleyin, ardından [Görsel Sıkıştırma](/tr/tools/image/compress/) veya [PNG'den WebP'ye Dönüştürme](/tr/tools/image/convert-png-to-webp/) kullanarak web varlıklarını optimize edin.

💡Kusursuz Renk Örnekleme İçin Uzman İpuçları

•Logo kenarlarındaki ara kenar yumuşatılmış geçiş piksellerini örneklemekten kaçınmak için her zaman 10x yakınlaştırma büyütecinin artı kılına güvenin.
•Yalnızca Açıklık (L) parametresini ayarlayarak fareyle üzerine gelme (hover) ve etkin düğme durumlarını zahmetsizce oluşturmak için CSS tasarım sistemlerinde HSL sözdizimini kopyalayın.
•Aracımız, işletim sistemi ekran damlalıklarında yaygın olan Display P3 ve gama bozulma sorunlarından kaçınarak yerel bitmap arabelleklerini doğrudan inceler.
•Marka vurgularını ve birincil tonları yan yana karşılaştırmak için stüdyo tepsisinde örneklediğiniz renklerin çalışan bir geçmişini tutun.
•Mükemmel renk uyumuna sahip pazarlama grafikleri oluşturmak için örneklediğiniz HEX kodlarını Kenarlık Ekleme veya Renk Tonu araçlarına aktarın.

🛡️Tuval Belleği Doğrudan Arabellek Erişimi ve 120 FPS Örnekleme Mimarisi

Renk Seçici motorumuz, HTML5 Canvas 2D bağlamlarındaki ham, sıkıştırılmamış 32-bit RGBA piksel arabelleklerine karşı doğrudan alt piksel örnekleme yürütür. Motorumuz, `ctx.getImageData()` aracılığıyla yinelenen maliyetli DOM geri okumaları yapmak yerine, ilk yüklemede görselin ham `Uint8ClampedArray` dizisini yerel tarayıcı belleğinde önbelleğe alır. Bir kullanıcı üzerine geldiğinde veya tıkladığında, eşlenen özgün koordinat $(X, Y)$ doğrudan bitişik arabellek ofset aritmetiği aracılığıyla değerlendirilir: $$\text{offset} = (Y \times \text{Width} + X) \times 4$$ $$R = \text{buffer}[\text{offset}], \quad G = \text{buffer}[\text{offset}+1], \quad B = \text{buffer}[\text{offset}+2], \quad A = \text{buffer}[\text{offset}+3]$$ Tip atanmış dizi (typed array) belleğinden dört ardışık baytı okumak 50 nanosaniyeden daha kısa sürdüğünden, büyüteç ve renk okumaları ProMotion özellikli yüksek yenileme hızlı ekranlarda farenizi kesintisiz 120 FPS yenileme hızında takip eder. En önemlisi, tüm arabellek önbelleğe alma, koordinat eşleme ve renk dönüştürme işlemleri tarayıcınızın özel bellek korumalı alanında (sandbox) %100 yerel olarak yürütülür. Yayınlanmamış kullanıcı arayüzü tel kafesleri, tescilli marka yönergeleri ve gizli müşteri varlıkları hiçbir zaman harici bulut sunucularına temas etmez. Tam istemci tarafı gizliliği ve anlık performans garantilidir.

Teknoloji: WebAssembly • Çok İş Parçacıklı Web Worker • HTML5 Canvas API

Gizlilik: Dosyalar cihazınızdan çıkmaz, bulutta tutulmaz; analitik yalnızca izninizle çalışır.