Bir Görselin Renk Kodu Nasıl Bulunur

Bir rengin tam kodunu belirlemek tasarımda sürekli karşılaşılan bir ihtiyaç: referans bir logonun rengini birebir tutturmak, ilham veren bir fotoğraftan palet çıkarmak, bir görsel kimliğin farklı parçaları arasında tutarlılığı korumak. En verimli yöntem bağlama göre değişir — dosyaya erişiminiz var mı, renk çevrimiçi bir görselde mi, bir sitede mi, yoksa telefonla çekilmiş bir fotoğrafta mı?

Renk kodu biçimlerini tanımak

Yöntemlere geçmeden önce, renkleri dijital olarak göstermek için en çok kullanılan üç biçimi tanımakta fayda var:

HEX ile RGB aynı bilgiyi farklı biçimlerde gösterir — birinden diğerine dönüştürmek her zaman mümkün. HSL rengi ton, doygunluk ve parlaklık olarak tarif eder; elle ayar yapmak için daha sezgiseldir. CMYK ise yalnızca baskıya özgüdür.

1. Yöntem: Online renk ayıklayıcı (en hızlısı)

Bir görselin tamamındaki baskın renkleri belirlemek ya da belirli bir pikseli isabetle yakalamak için en doğrudan çözüm online bir renk ayıklayıcıdır. Görseli yüklemeniz yeterli; araç en çok geçen renkleri otomatik olarak bulur ve HEX kodlarını kopyalamaya hazır sunar.

ImageTools'un Renkleri Ayıkla aracı her fotoğrafı ya da görseli inceler ve baskın renkleri HEX kodlarıyla birlikte verir. Her şey doğrudan tarayıcıda çalışır — görsel cihazınızdan çıkmaz.

1. Renkleri Ayıkla aracını açın.
2. Görseli yükleyin ya da dosyayı belirtilen alana sürükleyin.
3. Araç, görselde en çok geçen renkleri otomatik olarak belirler.
4. HEX kodunu kopyalamak için herhangi bir renge tıklayın.

2. Yöntem: Tarayıcının damlalığı (Chrome DevTools)

Bulmak istediğiniz renk bir sitedeyse — sayfa arka planında, bir düğmede, bir logoda — Chrome'un bunun için yerleşik bir aracı var.

1. Siteyi Google Chrome'da açın.
2. F12 tuşuna basın (ya da sağ tıklayıp "İncele" seçeneğini seçin).
3. DevTools panelinde sol üst köşedeki imleç simgesine tıklayın (ya da Ctrl+Shift+C tuşlarına basın).
4. Fareyi sayfadaki herhangi bir öğenin üzerine getirin — DevTools, HEX ya da RGB renkler dahil CSS özelliklerini gösterir.
5. Görsel renk seçiciyi açmak için CSS panelindeki herhangi bir renk değerinin yanındaki renkli kareye tıklayın.

Chrome DevTools'un yerleşik bir Color Picker aracı da var: CSS stilleri panelindeki renk karesine tıkladığınızda, spektrumda gezinmenizi ve HEX, RGB, HSL ile HSLA değerlerini aynı anda görmenizi sağlayan bir seçici açılır.

3. Yöntem: Canva'nın damlalığı

Canva'da çalışıyorsanız ve projenizde zaten duran bir görselden renk almak istiyorsanız:

1. Dolgusunu değiştirmek istediğiniz öğeyi seçin (bir metin, şekil ya da arka plan).
2. Renk seçicisini açmak için yan paneldeki öğe rengine tıklayın.
3. Seçicide damlalık (eyedropper) simgesine tıklayın.
4. O pikselin tam rengini almak için tuvaldeki görselin herhangi bir noktasına tıklayın.
5. HEX kodu, seçicinin metin alanında görünür.

4. Yöntem: Photoshop ve Illustrator'da damlalık

Photoshop

Görsel açıkken Damlalık aracını seçin (kısayol: I tuşu). Görselin herhangi bir noktasına tıklayın — alınan renk, araç panelindeki renk kutusunda görünür. HEX kodunu görmek için renk kutusuna çift tıklayın (Color Picker açılır); HEX değeri sağ alttaki alanda yer alır.

Illustrator

Dosya açıkken bir nesne seçin, ardından araç panelinde dolgu ya da kontur rengine tıklayın. Açılan Color Picker penceresinde HEX kodu alttaki alanda durur. Alternatif olarak, tuvaldeki herhangi bir noktadan renk almak için Damlalık aracını (kısayol: I) kullanın.

5. Yöntem: Tarayıcı eklentisi — ColorZilla

ColorZilla eklentisi (Chrome ve Firefox için mevcut) tarayıcınıza kalıcı bir damlalık ekler. Kurduğunuzda şunları yapabilirsiniz:

• Herhangi bir sitedeki herhangi bir pikselin rengini tek tıkla almak.
• Kodu HEX, RGB ve HSL olarak anında görmek.
• Değeri tek tıkla kopyalamak.
• Son alınan renklerin geçmişine ulaşmak.

Sitelerden sık sık renk alması gerekenler için en pratik çözüm bu; her seferinde DevTools açmaya gerek kalmıyor.

6. Yöntem: Telefonda renk yakalama uygulaması

Fiziksel nesnelerin renklerini — bir duvarın, bir ürünün, bir ambalajın rengini — ya da telefondaki görsellerin rengini belirlemek için özel uygulamalar var:

• Color Grab (Android) — kamerayı herhangi bir yüzeye doğrultun, HEX kodunu anlık olarak yakalasın.
• Palette Cam (iOS/Android) — anlık çekilen ya da galerideki fotoğraflardan renk paletinin tamamını çıkarır.
• Canva (iOS/Android) — Canva mobilin damlalığı içe aktarılan görsellerde çalışır.

Ayıklanan renk kodları nasıl kullanılır

Bir rengin HEX kodunu belirledikten sonra en yaygın kullanımlar şunlar:

CSS'te / web geliştirmede

Doğrudan kodda kullanın: color: #3ecf8e; ya da background-color: #3ecf8e;. Daha açık veya koyu varyantlar için HSL kullanın — parlaklığı ayarlamak, HEX değerlerini elle kurcalamaktan çok daha sezgisel.

Canva, Figma ya da Adobe'de

HEX kodunu herhangi bir öğenin renk alanına yapıştırın. Başlıca tasarım araçlarının hepsi HEX'i doğrudan kabul eder.

Eksiksiz bir palet oluşturmak için

Temel renk belli olduğunda, Renk Paleti aracı uyumlu kombinasyonları — tamamlayıcı, analog, üçlü ve monokrom — otomatik üretir; HEX, RGB ve HSL kodlarının hepsi projede kullanılmaya hazır gelir.

Baskı için

Matbaaya göndermeden önce HEX'i CMYK'ye çevirin. Ekran renkleri (RGB/HEX) ile baskı renkleri (CMYK) farklı gamutlara sahiptir — monitörde aynı görünen şey baskıda gözle görülür biçimde kayabilir. Adobe Illustrator ve Affinity Designer gibi araçlar baskı için dışa aktarırken bu dönüşümü kendiliğinden yapar.

Ayıklanan renk neden istediğiniz renk olmayabilir

Önemli bir ayrıntı: fotoğraflarda bir alanın rengi nadiren tamamen tekdüzedir. Fotoğrafta düz bir mavi gibi duran yüzeyde, aydınlatma, JPG sıkıştırması ve kamera gürültüsü yüzünden pikselden piksele onlarca ince fark bulunabilir. Damlalık, belirli bir pikselin tam rengini alır — bu da yakalamaya çalıştığınız "genel mavi"den biraz farklı olabilir.

Fotoğraf alanlarında en iyisi, tek bir piksel almak yerine bir bölgenin baskın rengini hesaplayan bir araç kullanmak — Renkleri Ayıkla tam olarak bunu yapıyor. Sonuç, tasarımda kullanmak için daha temsili ve daha işe yarar bir renk oluyor.

Sıkça sorulan sorular