Bir ekran görüntüsü çoğu zaman elinizdeki tek şeydir. Sitenin CSS'ini açamazsınız, uygulamayı inceleyemezsiniz, tasarım dosyanız yok — ama renkleri ekranda görebilirsiniz ve bir ekran görüntüsü onları örnekleyebileceğiniz bir görsele dondurur. İşte bir tanesinden tam renk kodlarını nasıl çıkaracağınız.
Bir ekran görüntüsü neden dürüst kaynaktır
İşlenmiş bir sayfanın ya da uygulamanın ekran görüntüsünü aldığınızda, renkleri gerçekte göründükleri gibi yakalarsınız — her degrade, katman ve opaklık uygulandıktan sonra. Bu, çoğu zaman kaynak değerden daha doğrudur. Gri bir arka plan üzerinde %90 opaklıkta #000000 olarak tanımlanan bir kart, ekranda siyah değildir; belirli bir koyu gridir. Kodu incelemek size tarifi verir; ekran görüntüsünü örneklemek size bir kullanıcının gerçekten gördüğü rengi verir. O görünümü eşleştirirken, okumak isteyeceğiniz şey ekran görüntüsüdür.
Üç adımda bir renk seçin
- Ekran görüntüsünü alın ve yükleyin. Ekranı (ya da önemsediğiniz bölgeyi) yakalayın ve görseli seçiciye bırakın.
- Piksele gelin. İmlecinizi takip eden bir büyüteç mercek, altındaki alanı büyütür, böylece ince bir kenarda ya da küçük bir ikonda bile tam olarak isabet ettirebilirsiniz.
- Kaydetmek için tıklayın, sonra kopyalayın. Her tıklama, rengi HEX, RGB ve HSL'iyle, her biri bir kopyalama düğmesiyle bir örnek olarak tutar. İhtiyacınız olan formatı kopyalayın ve stil sayfanıza ya da tasarım aracınıza yapıştırın.
Ekran görüntüsüne özgü dikkat edilecek şeyler
Ekran görüntülerinin bir renk örneğini şaşırtabilecek tuhaflıkları vardır ve bunları bir kez bildiğinizde kaçınmak kolaydır:
- JPEG değil PNG olarak kaydedin. JPEG sıkıştırması, özellikle kenarların yakınında ve düz alanlarda renkleri hafifçe bulaştırır, dolayısıyla örneklenmiş bir değer gerçek olandan sapabilir. PNG kayıpsızdır ve her pikseli tam tutar — çoğu işletim sistemi ekran görüntüsü aracı zaten varsayılan olarak PNG'ye ayarlıdır.
- Yakınlaştırma düzeyine dikkat edin. %100 dışında bir tarayıcı ya da işletim sistemi yakınlaştırmasında alınan bir ekran görüntüsü ölçeklenir ve ölçekleme komşu pikselleri harmanlar. En temiz örnek için %100'de yakalayın.
- Kenarlardan ve metinden kaçının. Kenar yumuşatma, herhangi bir kenar boyunca piksellerin gerçek renk değil harmanlar olduğu anlamına gelir. Düz bir alanın ortasından örnekleyin — mercek, bulanık sınırdan uzakta olduğunuzu görmenize yardımcı olur.
- Alt piksel metin rengine dikkat edin. İşlenmiş metne yakınlaştırın ve metnin gerçek değeri olmayan renk saçakları görürsünüz. Renkleri harf çizgilerinden değil, dolgulardan ve arka planlardan seçin.
HEX, RGB ve HSL'i okuma
Her örnek üç formatı da aynı anda gösterir:
- HEX (
#3A7BD5) — CSS ve tasarım araçları için varsayılan. - RGB (
rgb(58, 123, 213)) — kanal değerleri,rgbaşeffaflığına ihtiyacınız olduğunda kullanışlı. - HSL (
hsl(215, 65%, 53%)) — ton, doygunluk, açıklık, rengi tam olarak kopyalamak yerine ince ayar yapmak istediğinizde en iyisi.
Değiştirmek için yeniden örneklemezsiniz — aynı renk üçünde de zaten oradadır.
Bütün bir şemayı tek seferde alın
Tek bir ekran görüntüsünden bütün bir renk şemasını yeniden kurabilirsiniz: başlık rengine, düğmeye, bağlantıya, arka plana, silik metne tıklayın. Her biri listede birikir, böylece tam seti tek bir oturumda çekebilir ve sırayla kopyalayabilirsiniz.
Bunun yerine bir görselin genel paletinin sizin için özetlenmiş halini isterseniz — baskın tonların bir avucu — bu ayrı bir iştir ve img.diy'nin palet aracı onları otomatik çıkarır. Bu seçici, ekran görüntüsündeki belirli bir piksele işaret etmek içindir; palet aracı görseli bir bütün olarak nitelemek içindir.
Hiçbir şey makinenizden ayrılmaz
Ekran görüntüleri çoğu zaman yüklemek istemeyeceğiniz şeyler içerir — dahili bir kontrol paneli, özel bir taslak, bir müşterinin yayınlanmamış arayüzü. Burada görsel bir canvas üzerinden tarayıcınızda yerel olarak okunur: hiçbir yere hiçbir şey gönderilmez, hesap yok ve ilk yüklemeden sonra çevrimdışı çalışır. Ekran görüntüsü cihazınızdan hiç ayrılmadan renkleri elde edersiniz.
Ekran görüntüsünü alın, piksele gelin, tıklayın ve kopyalayın.