Kısa cevap
Ekrandaki her renk kırmızı, yeşil ve mavi ışığın karışımıdır; renk kodu da bu karışımın yazılmış halidir. Resimden okumak için damlalık gerekir: tek bir piksele bakıp değerini söyleyen araç. Resmini aşağıdaki renk seçiciye ekle, büyüteç istediğin pikseli ortadaki karede gösterene kadar üzerinde gezin ve tıkla. Renk HEX, RGB ve HSL koduyla kaydedilir; koda bir kez tıklayınca kopyalanır.
Tek piksel yerine fotoğrafın genel renklerini istiyorsan aynı aracın palet bölümünü kullan: benzer pikselleri gruplar ve en çok geçen 5, 8 ya da 12 rengi kodlarıyla listeler.
Burada dene: Görselden renk seçici
Aracın tam sayfasını açHEX, RGB ve HSL ne demek?
RGB kırmızı, yeşil ve mavinin miktarını 0 ile 255 arasında üç sayıyla verir. HEX aynı üç sayıyı 16'lık tabanda, ikişer karakterle ve başına # koyarak yazar: FF 255, 80 128, 00 ise 0 demektir. Yani #FF8000 ile rgb(255, 128, 0) birebir aynı turuncudur. HSL rengi konuşur gibi anlatır: ton (renk çemberinde 0 ile 360 arası açı), doygunluk ve açıklık (yüzde). Bir rengin açık ya da koyu tonunu arıyorsan HSL işini kolaylaştırır, sadece son sayıyı değiştirirsin.
Figma, Canva ve Photoshop gibi tasarım araçları HEX'i doğrudan kabul eder, CSS üçünü de anlar. Word ve PowerPoint gibi ofis programları ise özel renk penceresinde genelde RGB ya da HEX ister.
| Renk | HEX | RGB | HSL |
|---|---|---|---|
| Saf kırmızı | #FF0000 | rgb(255, 0, 0) | hsl(0, 100%, 50%) |
| Orta gri | #808080 | rgb(128, 128, 128) | hsl(0, 0%, 50%) |
| Canlı mavi | #1A73E8 | rgb(26, 115, 232) | hsl(214, 82%, 51%) |
| Beyaz | #FFFFFF | rgb(255, 255, 255) | hsl(0, 0%, 100%) |
| Siyah | #000000 | rgb(0, 0, 0) | hsl(0, 0%, 0%) |
Bilgisayarda ve telefonda renk almanın diğer yolları
Bazen renk bir dosyada değil, ekranın bir yerindedir: bir web sitesinde, bir uygulamada, bir video karesinde. Aşağıdaki yollar, ağır bir program kurmadan çoğu durumu çözer.
- Bu araçta Ekrandan seç düğmesi (bilgisayarda Chrome ve Edge) imleci damlalığa çevirir; sadece resimde değil, ekranın her yerinde çalışır.
- Windows: Microsoft PowerToys içinde Renk Seçici var; kurduktan sonra Win+Shift+C ile açılır ve imlecin altındaki pikselin kodunu kopyalar.
- Mac: hazır gelen Dijital Renk Ölçer uygulaması (Uygulamalar, İzlenceler) imlecin altındaki değerleri gösterir. Web için kod arıyorsan değerleri sRGB olarak göstermesini seç.
- Tarayıcı geliştirici araçları: Chrome ve Edge'de herhangi bir CSS renginin yanındaki kare, sayfadan renk alan damlalıklı bir seçici açar.
- Telefon: ekran görüntüsü al, bu sayfadaki seçiciye ekle ve renge dokun. Dokunmatik ekranda büyüteç çıkmaz; alan küçükse önce sayfayı yakınlaştır.
Bulduğun kod neden biraz farklı çıkabilir?
Bir fotoğrafta yan yana iki piksel neredeyse hiç aynı değildir. JPG sıkıştırması, kamera gürültüsü, ışık ve gölge değerleri değiştirir; kırmızı bir arabanın bir pikseli #B3121B, yanındaki #A90F18 çıkabilir. Bu normal. Fotoğrafta düzgün ışık alan bir bölgeden birkaç nokta seç ve doğru görüneni al, ya da ortalamayı paletin çıkarmasına izin ver.
En sık yapılan hata kenardan seçmektir. Yazı ve logolarda kenarlar yumuşatılır; harfin sınırındaki pikseller harf ile zeminin karışımıdır. Her zaman şeklin ortasından seç, büyüteç tam bunun için var. Ölçeklenmiş, WhatsApp gibi bir uygulamadan geçmiş ya da düşük kaliteli JPG olarak kaydedilmiş ekran görüntülerinden de kaçın: her adım renkleri biraz karıştırır ya da kaydırır.
Ekranlar ve renk profilleri de işin içine girer. Birçok telefon ve Mac standart sRGB'den daha geniş bir renk aralığı gösterir, aynı dosya iki ekranda biraz farklı görünebilir. Seçici, tarayıcının çizdiği değerleri okur; bunlar web sitelerinin ve çoğu tasarım aracının kullandığı sRGB değerleridir. Saydam pikseller beyaz zemin üzerindeymiş gibi okunur.
Fotoğraftan renk paleti nasıl çıkarılır?
Beğendiğin bir fotoğraf zaten birbirine uyan renkler taşır; web sitesi, sunum ya da sosyal medya görselleri için iyi bir başlangıçtır. Palet bölümünde 5, 8 ya da 12 renk seç. Araç bütün pikselleri benzer renk gruplarına ayırır (median cut yöntemi) ve her grubun ortalamasını, en büyük grup önde olacak şekilde gösterir. Tümünü kopyala her HEX kodunu ayrı satıra yazar; CSS dosyasına ya da tasarım aracına doğrudan yapıştırabilirsin.
5 renk sade bir şema verir: genelde bir iki baskın zemin tonu, bir ana renk ve bir vurgu. 12 renk ince tonları da korur; illüstrasyonda ya da resmin gerçekte hangi renklerden oluştuğunu görmek istediğinde işe yarar. Paleti geniş bir gökyüzü ya da duvar ele geçiriyorsa fotoğrafı önce ilgilendiğin kısma kırp, sonra tekrar ekle.
- Geniş ve sakin renkleri zemine, küçük ve doygun olanları düğme ve vurgulara ver.
- Yazı kontrastını kontrol et: WCAG yönergesi normal metinle zemini arasında en az 4,5:1, büyük metinde 3:1 ister.
- Kodları tek bir yerde tut (stil rehberi ya da tasarım dosyandaki bir liste), herkes aynı değeri kullansın.
Marka rengini birebir tutturmak için ipuçları
Bir firmanın ya da ürünün tam rengini arıyorsan en güvenilir kaynak marka kılavuzu ya da logonun SVG dosyasıdır, çünkü orijinal değerler oradadır. Web sitesinden alınmış bir ekran görüntüsü ya da basılı tabelanın fotoğrafı seni ancak yaklaştırır.
Resimden seçmen gerekiyorsa logonun en geniş düz alanını kullan, yazıyı ya da ince çizgileri değil; JPG yerine PNG ya da SVG tercih et. Üç dört noktadan seç; her kanalda sadece bir iki birim fark varsa doğru rengi bulmuşsundur. Baskı renkleriyle (CMYK, Pantone) ekran renklerinin farklı tanımlandığını unutma: basılı bir şeyin fotoğrafından alınan HEX kodu, rengin ekranda nasıl göründüğüne yakın bir değerdir, resmi baskı değeri değildir.