Bir logonun tam rengini, bir web sitesindeki düğmenin tonunu ya da bir fotoğraftaki gökyüzü mavisini kendi tasarımında kullanmak istediğinde göz kararı seçim çoğu zaman tutmaz. Bu araç görseldeki pikselin gerçek renk değerini okur ve sana doğrudan kullanabileceğin kodlarla verir.
Kullanım alanı geniştir: bir sunumu şirket logosunun rengine uydurmak, beğendiğin bir sitenin renklerini kendi projene not almak, bir belgedeki başlık rengini başka bir belgede aynen kullanmak ya da bir kumaşın, boyanın fotoğrafından yaklaşık tonunu bulmak gibi.
Nasıl kullanılır?
- Bir görseli sürükleyip bırak, seç ya da panodan yapıştır. Ekran görüntüsü aldıysan doğrudan yapıştırman yeterli. Görsel cihazında kalır, hiçbir yere yüklenmez.
- İmleci görselin üzerinde gezdir. Büyüteç, imlecin altındaki pikselleri büyütülmüş bir ızgara olarak ve o noktanın rengini gösterir.
- İstediğin noktaya tıkla ya da dokun.
- Rengin HEX, RGB, HSL ve CMYK değerlerini yanlarındaki kopyalama düğmeleriyle al.
- Seçtiğin renkler son 12 renge kadar bir listede toplanır; listeyi CSS değişkenleri olarak topluca kopyalayabilirsin.
Tek piksel mi, alan ortalaması mı?
Araçta üç örnekleme seçeneği var: 1x1, 3x3 ve 5x5. Bu seçim, tıkladığın noktada kaç pikselin ortalamasının alınacağını belirler.
1x1 yalnızca tıkladığın pikseli okur. Logolar, simgeler ve arayüz ekran görüntüleri gibi düz renkli alanlarda doğru seçimdir.
3x3 ve 5x5 çevredeki 9 ya da 25 pikselin ortalamasını alır. Fotoğraflarda neredeyse hiçbir alan tek renk değildir; kamera gürültüsü ve JPG sıkıştırması yan yana duran pikselleri birbirinden farklı yapar. Tek pikselde rastgele bir ton yakalamak yerine ortalama almak, gözünün algıladığı renge daha yakın bir sonuç verir.
Kenarlara dikkat et. Bir yazının ya da çizginin kenarına tıklarsan, iki rengin karışımı olan yumuşatma piksellerinden birini seçebilirsin. Büyüteçte imlecin alanın ortasına denk geldiğinden emin ol.
Renk kodları hakkında
- HEX (#2F6FDB gibi) web ve tasarım programlarında en yaygın biçimdir.
- RGB kırmızı, yeşil ve mavi ışığın 0 ile 255 arasındaki değerleridir.
- HSL rengi ton, doygunluk ve açıklık olarak ifade eder. Aynı rengin açık ve koyu tonlarını üretmek için kullanışlıdır; yalnızca açıklık değerini değiştirmen yeter. Örneğin #2F6FDB yaklaşık 218 derece ton, yüzde 71 doygunluk ve yüzde 52 açıklıktır; açıklığı yüzde 35'e indirdiğinde aynı mavinin koyu bir tonunu elde edersin.
- CMYK baskıdaki mürekkep oranlarını gösterir. Buradaki değer basit bir formülle hesaplanan yaklaşık bir değerdir. Gerçek baskı rengi kâğıda, mürekkebe ve baskı yapan yerin renk profiline bağlıdır; kurumsal renkler için matbaanla ya da markanın resmi renk kılavuzuyla kontrol et.
Ekranda gördüğün rengin, görselin renk profiline ve ekranının ayarlarına göre farklılaşabileceğini de unutma. Bir görselin genel renk düzenini çıkarmak istersen Renk paleti çıkar aracı baskın renkleri tek seferde verir. Seçtiğin rengi bir görselin kenarlığında kullanmak için Kenarlık & yuvarlak köşe aracına geçebilirsin.
Sık sorulan sorular
Seçtiğim renk neden logodakinden biraz farklı?
Görsel JPG olarak sıkıştırıldıysa ya da yeniden boyutlandırıldıysa renkler hafifçe değişmiş olabilir. Düz renkli alanın ortasından 3x3 ortalamayla seçmek sonucu iyileştirir; kesin değer için markanın resmi renk kodlarına bak.
Telefonda nasıl renk seçerim?
Görselin üzerinde istediğin noktaya dokun; o noktanın rengi seçilir. İlk denemede tam istediğin yere denk gelmezse tekrar dokunman yeterli.
CMYK değeri baskı için güvenilir mi?
Yaklaşık bir başlangıç noktasıdır. Basit bir formülle hesaplandığı için baskıdaki sonucu birebir vermez.
Seçtiğim renkleri nasıl saklarım?
Son seçtiğin 12 renk listede durur. Listeyi CSS değişkenleri olarak kopyalayıp bir dosyaya, nota ya da tasarım programına yapıştırabilirsin.