Görsellerinizden istediğiniz rengi seçerek HEX ve RGB kodlarını saniyeler içinde görüntüleyin.
Bir renk seçici araçta imleci bir noktaya getirdiğinizde, arka planda tek bir pikselin renk değeri okunuyor. Ancak "gördüğünüz renk" ile "okunan renk" her zaman aynı şey değildir.
Görsellerde anti-aliasing uygulaması, metin kenarları ve eğri çizgiler boyunca pikselleri yumuşatmak için yarı saydam, karışım renkler kullanır. Örneğin siyah bir dairenin kenarındaki pikseller aslında #2a2a2a veya #4b4b4b gibi ara tonlardır. Bu piksellerden birini seçerseniz, hem siyah hem de arka plan renginden izler taşıyan bir kod alırsınız — ki bu muhtemelen istediğiniz şey değildir.
Benzer bir durum, JPEG sıkıştırmasının yarattığı 8x8 blok yapısı için geçerli. Düz bir mavi gökyüzünde bile pikseller arasında ±5-15 değerlik farkları oluşabilir. Bu, bir web projesinde fark edilmeyebilir; ama baskı öncesi çalışmalarda veya hassas marka rengi eşleştirmelerinde sorun yaratır.
Doğru sonucu elde etmek için, imleci yüzeyin merkezine — kenarlardan ve geçiş bölgelerinden uzak — konumlandırın ve birkaç piksel okuması yaparak değerlerin tutarlı olup olmadığını kontrol edin.
Çoğu renk seçici araç varsayılan olarak HEX kodu (#FF5733) gösterir. Bu, web geliştirme dünyasında en yaygın kullanılan formattır ve doğrudan CSS'e yazılabilir. Ancak her proje için doğru format bu değildir.
RGB formatı, programlama bağlamlarında tercih edilir — JavaScript'te renk hesaplaması yaparken, Canvas API'de piksel manipülasyonunda veya dinamik tema oluştururken. Ayrıca RGB'nin rgba() varyantı, opaklık (alpha channel) kontrolü sağlar ki bu CSS geçişleri ve yarı saydam katmanlar için kritik öneme sahiptir.
HSL (Hue, Saturation, Lightness) formatıysa, bir renkten varyasyon türetmek isteyen tasarımcılar için en kullanışlı seçenektir. Diyelim ki bir görselden hsl(210, 70%, 50%) gibi bir mavi tonu seçtiniz. Koyu varyasyonu için lightness değerini %30'a, açık varyasyonu için %80'e çekmeniz yeterli — bu, HEX formatıyla yapmak isteseniz renk teorisi bilgisi gerektiren bir işlem.
Bir görselden renk kodu alırken, kullanacağınız ortamı düşünün. CSS ve HTML'de HEX, programlama dilinde RGB, renk varyasyonu üretirken HSL — format seçimi, sonrası için ne kadar esnekliğe ihtiyacınız olduğunu belirler.
1. Küçük görselden renk seçmek. Bir web sitesindeki 300×200 piksel bir ürün fotoğrafından renk çıkarmaya çalışıyorsanız, büyük olasılıkla sıkıştırılmış ve yeniden boyutlandırılmış bir sürümle çalışıyorsunuzdur. Mümkünse görselin orijinal boyutunu bulmaya çalışın — web sitesinin kaynak kodunda genellikle daha yüksek çözünürlüklü bir sürüm bulunur.
2. Ekran parlaklığını göz ardı etmek. Telefonunuzun parlaklığını %30'a düşürüp renk seçimi yaparsanız, aynı pikseli tam parlaklıkta farklı algılarsınız. Renk hassaslığı gerektiren işlerde ekran parlaklığını sabit bir seviyeye getirin.
3. Tek piksele güvenmek. Bir kare desenli görselde tam dikiş noktasına denk gelmiş olabilirsiniz. 3×3 piksellik bir alandan ortalama almak, daha güvenilir bir sonuç verir.
4. Renk profilini görmezden gelmek. Bazı görseller Adobe RGB veya Display P3 renk alanında kaydedilmiştir. Bu görsellerden alınan piksel değerleri, sRGB ekranlarda farklı görünecektir. Profil dönüşümü yapılmadan seçilen renkler, web projelerinde tutarsızlık yaratabilir.
5. Alpha kanalını kontrol etmemek. PNG görsellerdeki yarı saydam pikseller, arka plan rengiyle birleşerek farklı görünür. Bir pikselin alpha değeri 255 (tam opak) değilse, gördüğünüz renk saf değildir — bu durumda kodu doğrudan kullanmak yanıltıcı olur.
Görselden seçtiğiniz tek bir renk kodu, genellikle bir başlangıç noktasıdır — nihai sonuç değil. Gerçek tasarım çalışması, bu rengi bir renk sistemine dönüştürdüğünüzde başlar.
Marka rengi olarak bir teal tonu (#0D9488) seçtiğinizi varsayalım. Bu rengi bir tasarım sistemi içinde kullanmak için en az dört varyasyona ihtiyacınız vardır: daha açık ton (arka planlar için), ana ton (butonlar ve vurgular), koyu ton (metin ve ikonlar) ve nötr bir eşlikçi (ikincil eylemler için).
Bu varyasyonları manuel olarak oluşturmak mümkündür ama zaman alıcıdır ve renk uyumu garantisi yoktur. Daha etkili bir yaklaşım, kaynak görselinizdeki tüm hakim renkleri bir seferde çıkarmaktır. Pixes.app'ın görselden renk paleti oluşturma aracı, bir görseli analiz edip içindeki uyumlu renkleri otomatik olarak listeler — bu sayede hem seçtiğiniz rengi hem de onun doğal olarak eşlik ettiği diğer tonları aynı anda elde edersiniz.
Palet oluşturduktan sonra, her rengin CSS box-shadow, gradient ve border gibi bileşenlerde nasıl kullanıldığını test etmek de önemlidir. Pixes.app'ın görselden CSS box-shadow oluşturma aracı bu test aşamasını hızlandırır — bir görseldeki derinlik ve gölge efektlerini CSS koduna dönüştürerek tasarım sisteminize entegre edebilirsiniz.
Bir renk kodunu kopyalamak işin en kolay kısmı. Asıl soru: bu kodu tasarım sürecinize nasıl yerleştireceğiniz.
Web geliştirme tarafında, HEX kodunu doğrudan CSS değişkenine (--primary-color: #0D9488;) kaydetmek, tüm projede tek noktadan renk yönetimi sağlar. Figma veya Adobe XD kullanıyorsanız, kopyaladığınız HEX değerini doğrudan renk paleti paneline yapıştırarak bir "style" olarak kaydedebilirsiniz.
Dikkat edilmesi gereken nokta, renk kodunun kullanıldığı bağlamda tutarlılıktır. Aynı mavi tonunu bir yerde HEX, başka bir yerde RGB olarak tanımlarsanız, gelecekteki değişikliklerde tutarsızlık riski doğar. Tüm renkleri tek bir değişken dosyasında toplayın ve tüm bileşenler bu dosyadan referans alsın.
Eğer birden fazla görselden renk topluyorsanız — örneğin bir mood board çalışması için — her renk kodunun yanına kaynağı (hangi görselden geldiği) not etmek ileride zaman kazandırır. "Bu gri ton nereden gelmişti?" sorusuna cevap aramak, tasarım sürecinin en verimsiz anlarından biridir.