Resimler arasında gezindiğinizi ve mükemmel rengi, bir sonraki tasarım projeniz için tam olarak ihtiyacınız olan rengi bulduğunuzu hayal edin. İnternette herhangi bir uygulama veya web sitesinde belirli renkleri belirlemenize yardımcı olacak harika araçlar var. En iyi seçeneklerden bazılarına bir göz atalım.
1. Geliştirici Araçlarını Chrome Web Tarayıcısında Kullanma
Deneyebileceğiniz bir seçenek, Chrome Geliştirici aracıdır. Chrome, geliştiriciler için görevlerin yapılmasını çok daha kolay hale getiren birçok yararlı özellikle birlikte gelir. Herhangi bir uygulama veya web sitesinde belirli renkleri belirlemek için aşağıdaki adımları kullanabilirsiniz.
- Renk belirlemek istediğiniz web sitesini Chrome web tarayıcısında açın
- Chrome'un sağ üst köşesindeki üç nokta simgesine tıklayın. Bir dizi seçenek içeren bir açılır pencere görünecektir.
- "Diğer Araçlar"ı tıklayın ve ardından ortaya çıkan açılır pencereden "Geliştirici araçları"nı seçin.
- Yukarıdaki adımları atlamak istiyorsanız Ctrl + Shift + I tuşlarını kullanın
- Şimdi, pencere iki ekrana bölünür – soldaki web sitesi ve sağdaki web sitesinin kodu
- Klavyenizde Ctrl + Shift + C yazın. Bu, fare imlecimizi öğelerin üzerine getirdiğimizde, web sitesindeki belirli bir öğenin tüm ayrıntılarını gösterir.
- Diğer faydalı bilgilerle birlikte öğenin renk kodunu da bulabilirsiniz.
Örnek
Aşağıdaki web sitesindeki bazı öğeler için belirli renk kodlarıyla ilgilendiğinizi varsayalım:
Ekranınızın köşesindeki üç noktaya tıklayarak geliştirici araçlarını seçebilirsiniz. Açılır menüde Diğer araçlar'ı ve ardından Geliştirici araçları'nı seçin.
Ekran görsel olarak iki sayfaya bölünecektir. Solda web sitesini ve sağda sitenin kodunu göreceksiniz.
Komutu yazın ve “Ctrl + Shift + C” kısayolunu yazın ve fare imlecini web sitesinin öğelerinin üzerine getirin. Bu, diğer yararlı bilgilerle birlikte o öğenin rengini gösterecektir. Aşağıda, gezinme çubuğunun rengini ve arama aracının altında bir gösterge tablosunu bulduğumuz iki örnek bulunmaktadır.
Burada, gezinme çubuğu için açılır pencerede renk kodunu bulabiliriz. Renk kodu #333333'tür.
Gösterge panelinin rengi, diğer faydalı ayrıntılarla birlikte bulunabilir. Renk: #333333, Arka plan rengi: #5D4A8E. Başlangıçta biraz korkutucu görünse de, programın kullanımı biraz pratikle çok daha kolay hale geliyor.
2. Göz Damlalığı Krom Uzantısı
Eye Dropper, herhangi bir web sitesinde veya uygulamada belirli renkleri bulmanıza yardımcı olmak için popüler ve yaygın olarak kullanılan bir Chrome uzantısıdır.
Göz Damlalığı uzantı aracını kullanarak bir web sitesinde veya uygulamada belirli renkleri belirlemek için aşağıdaki adımları izleyin.
- Chrome Web Tarayıcısında herhangi bir web sitesini veya uygulamayı açın
- Göz Damlalığı uzantısı simgesine tıklayın
- "Web sayfasından renk seç"i seçin ve fare imlecinizi uygulama veya web sitesindeki farklı öğelerin üzerine getirin.
Listelenen öğelerin renk kodunu web sayfasının sağ alt kısmında bulabilirsiniz.
Örnek
Tamam, gerçek hayattan bir örnekte damlalık uzatma aracını kullanalım. Bir web sitesi açıp Eye Dropper uzantısı simgesine basarak başlayacağız.
İmlecinizi web sitesinin çeşitli öğelerinin üzerine getirdiğinizde, ekranın sağ alt kısmındaki bir bölümde renk kodlarının görüntülendiğini görebilirsiniz.
İmlecimi V şeklindeki simgenin üzerine getirdiğimde, renk kodunu belirtildiği gibi alt pencerede görebiliyorum. Bu aracın avantajı, öğenin altıgen renk koduyla birlikte RGB kodunu da bulabilmenizdir. Yöntem, favori renklerinin kodlarını almak için basit ve hızlı bir yol isteyenler için esnektir.