Bir logodan, bir ekran görüntüsünden, bir fotoğraftan ya da bir tasarım referansından tam rengi mi lazım? Görseli yükleyin, rengi bir büyüteç altında önizlemek için imlecinizi üzerinde gezdirin ve kaydetmek için tıklayın. Kaydedilen her renk, tek tıkla kopyalama düğmeleriyle HEX, RGB ve HSL'ini gösterir.
Pikselleri doğrudan tarayıcınızdaki görselden okur, böylece seçim anlıktır ve dosya asla yüklenmez — rastgele bir siteye göndermek istemeyeceğiniz marka renkleri için kullanışlı.
Nasıl kullanılır
- Bir görsel ekleyinRenk almak istediğiniz resmi ya da ekran görüntüsünü sürükleyin.
- Üzerine gelin ve tıklayınBüyüteç tam pikseli büyütür; rengi kaydetmek için tıklayın.
- Değeri kopyalayınKaydettiğiniz her renk için HEX, RGB ya da HSL'i alın.
Bazen bir görselden tek bir renk gerekir ve başka hiçbir şey uymaz — bir logodaki tam mavi, bir ekran görüntüsünde bir düğmenin arkasındaki gri, yeniden kullanmak istediğiniz bir fotoğraftaki bir ton. Gözünüz bir ekrandan hex kodu okuyamaz ve doğru görünen renk genellikle birkaç hane şaşkındır. Bu seçici, bir görsel yüklemenizi, imlecinizin altındaki pikselleri büyüten bir büyüteç loupe'uyla üzerinde gezinmenizi ve istediğiniz tam pikseli bir renk örneği olarak kaydetmek için tıklamanızı sağlar — HEX, RGB ve HSL birlikte gösterilir, her birinde bir kopyalama düğmesiyle.
Pikselleri tarayıcınızda bir tuvalden yerel olarak okur: hiçbir şey yüklenmez, hesap yoktur ve ilk yüklemeden sonra çevrimdışı çalışır. Görsel yayınlanmamış bir mockup, bir müşterinin marka varlığı ya da dahili bir ekran görüntüsü olduğunda bu önemlidir. Bir nokta örnekleyicidir — her tıklama tek bir piksel okur, ki bu temiz bir logo ya da düz bir arayüz için tam doğrudur ve gürültülü bir fotoğrafta biraz daha özen ister. Bir görselin tüm baskın renklerinin sizin için otomatik çekilmesini tercih ederseniz, ayrı palet aracı bunun içindir; bu araç belirli bir piksele işaret etmek ve değerini almak içindir.
İnsanlar bunu ne için kullanıyor
Spesifikasyon kaybolduğunda eski bir logodan bir markanın tam rengini geri kazanın
Bir düğmeyi ya da başlığı, beğendiğiniz bir sitenin ekran görüntüsündeki renge uydurun
Bir logodan birincil, vurgu ve metin renklerini tek geçişte çekin
Bir arka plan ya da vurgu olarak kullanmak için bir fotoğraftan bir ton alın
Bir ekran görüntüsünden yarı saydam bir öğenin gerçek ekran rengini okuyun
Bir üzerine gelme ya da varyant durumu için açabilmek ya da soluklaştırabilmek üzere bir rengi HSL olarak kopyalayın
Yakın bir renk değil, tam rengi istediğinizde
Bir markayı yeniden inşa ediyorsunuz ve tek referans eski bir logo. Bir düğmeyi beğendiğiniz bir sitenin ekran görüntüsüne uyduruyorsunuz. Bir fotoğrafta bir tonu fark ettiniz ve onu kendi tasarımınızda kullanmak istiyorsunuz. Her durumda sorun aynı: gözünüz bir ekrandan bir hex kodu okuyamaz. "O deniz mavisi" aslında bir düzine hafifçe farklı deniz mavisidir ve monitörler onları daha da kaydırır. Pikselin gerçekte tuttuğu sayıya ihtiyacınız var.
Bu araç bunu yapar. Bir görsel yükleyin, üzerinde gezinin ve bir büyüteç loupe imlecinizi izleyerek altındaki pikselleri, tam istediğinize inebilmeniz için büyütülmüş olarak gösterir. Tıklayın ve o renk bir renk örneği olarak kaydedilir. Her renk örneği HEX, RGB ve HSL değerini her birinin yanında bir kopyalama düğmesiyle listeler; böylece görseldeki bir pikselden doğrudan panonuzdaki bir koda geçersiniz.
Görsel makinenizden asla ayrılmaz. Pikseller tarayıcıda bir tuvalden yerel olarak okunur — hiçbir şey yüklenmez, hesap yok ve sayfa bir kez yüklendikten sonra ağ kapalıyken çalışmaya devam eder. "Görsel" piyasaya sürülmemiş bir taslak, bir müşterinin marka varlığı ya da rastgele bir web aracına vermemeniz gereken dahili bir ekran görüntüsü olduğunda işin özü budur.
Pratikte nasıl çalışır
- Loupe hassasiyet içindir. Logoların ve arayüzün, rengin tek bir piksel üzerinde değiştiği keskin kenarları vardır — kenar yumuşatma, yandaki pikselin bulanık bir karışım olması demektir. Büyütülmüş görünüm, taahhüt etmeden önce tam olarak hangi pikselde olduğunuzu görmenizi sağlar; böylece kenarı değil, düz marka rengini seçersiniz.
- Her tıklama bir renk örneği saklar. Örnekleme tek-seferde-ve-gitti değildir. Görselin etrafında tıklayın ve her renk bir listede yığılır; böylece bir logonun birincilini, vurgusunu ve metin rengini tek geçişte çekip yan yana karşılaştırabilirsiniz.
- Üç format, bir seçim. Her renk örneği HEX, RGB ve HSL'i aynı anda gösterir. Formatı değiştirmek için yeniden örneklemezsiniz — aynı renk her üçünde de zaten orada oturur, her biri kendi kopyalama düğmesiyle.
HEX, RGB, HSL — hangisini kopyalamalı
Bunlar aynı rengi yazmanın üç yoludur ve doğru olanı nereye gideceğine bağlıdır.
- HEX (
#3A7BD5) web için varsayılandır — CSS, çoğu tasarım aracı, marka belgeleri. Derli toplu ve evrensel olarak yapıştırılabilir. Aksine bir nedeniniz yoksa bunu kopyalayın. - RGB (
rgb(58, 123, 213)) kırmızı, yeşil ve mavi kanalları harf harf yazar. Bir araç kanal değerleri istediğinde, bir alfaya (rgba) ihtiyacınız olduğunda ya da bir rengin nasıl karıştırıldığı üzerine akıl yürüttüğünüzde yararlıdır. - HSL (
hsl(215, 65%, 53%)) tonu, doygunluğu ve açıklığı tanımlar. Bir rengi sadece yeniden kullanmak yerine ayarlamak istediğinizde uzanacağınız olan budur — bir üzerine gelme durumu için açıklığı itin, sessiz bir varyant için doygunluğu düşürün, tonu koruyun ve bir ölçek oluşturun.
Bir dürüst sınır ve bir kardeş araç
Bu bir nokta örnekleyicisidir: her tıklama tek bir pikseli okur. Temiz bir logoda ya da düz bir arayüzde tam olarak istediğiniz budur. Gürültülü bir fotoğrafta — gren, gradyanlar, JPEG kusurları — iki komşu piksel farklı olabilir; dolayısıyla düz bir alandan seçin ve bir aykırı değere inmemek için loupe'u kullanın. Burada bir bölge-ortalaması fırçası yoktur.
Ve hiç elle seçmek istemiyorsanız, img.diy'nin bütün bir görseli tarayan ve size baskın renklerini otomatik olarak veren ayrı bir palet aracı vardır. İkisi farklı soruları yanıtlar. Palet aracı size bu görselin hangi renklerden oluştuğunu söyler; renk seçici, tek bir belirli piksele işaret etmenize — logodaki tam bu nokta, o tek düğme — ve değerini almanıza olanak tanır. Bir görseli özetlemek için palet aracına, istediğiniz noktayı zaten bildiğinizde ise buna uzanın.
Bir görsel yükleyin, pikseli bulmak için gezinin, saklamak için tıklayın, ihtiyacınız olan formatı kopyalayın.
Neden IMG.DIY
Büyüteç
Tam pikseli tıklayabilmeniz için yakınlaştırır.
HEX / RGB / HSL
Kaydedilen her renk üç formatta.
Tek tıkla kopyala
Herhangi bir değeri doğrudan panoya kopyalayın.
Gizli
Pikseller yerel okunur — yükleme yok.