REACT UI STYLING
Renk Modelleri (RGB, CMY, HSV, HSL)
Renk kodlamalarında kullanılan modeller sizinde kafanızı karıştıyor mu? Bu yazıda renk modellerini anlatmaya çalışacağım. RGB, RGBA, Hex, HSV, HSL, HSI gibi farklı renk modellerinin nasıl çalıştığını analiz edeceğiz.
Renk bize küçüklüğümüzden beri öğretilen tanımı ile, ışığın cisimlerden yansıyarak insan gözünde oluşturduğu algıdır. Hatta yansıma olayını siyah renkler yansıtmaz, beyaz renkler en çok yansıtır. Yazın kafamıza beyaz şapka takmayı tercih etmemizin arka planında şapka üzerindeki renklerin ışığı farklı seviyelerde emdiğini veya yansıttığını bildiğimizden bu tercihleri yaparız.
Hatta ilkokulda prizma ile deneyler yapar, gökkuşağının nasıl oluştuğunu bu model üzerinden anlamaya çalışırdık.
Yukarıda ki resimde ışığın dalga boylarına göre nasıl kırıldığını ve farklı renkler oluşturduğunu görebilirsiniz. Işığun dalga genişliği azaldıkça frekans artıyor ve ışığın kırılması daha fazla artıyor. Kırmızı en az kırılan renk iken menekşe(violet) rengi en çok kırılan renk oluyor yani
Kırmızı → Sarı,Yeşil → Mavi dalga boyu küçülüyor.
Peki gözümüz bu renkleri nasıl algılıyor ?
Işık iristen gözümüzün içerisine grip retinaya çarptığında gözün arka çeperinde bulunan Cone(Koni) hücreler ile Rod(Çubuk) hücreleri bulunur.
Çubuk hücreler (siyah ve beyaz) rengi algılarken, Koni hücreler
- kısa dalga boyu olan (mavi),
- orta uzunluktaki dalga boyu (yeşil)
- uzun dalga boyu (kırmızı) farklı sinyaller olacak şekilde beyne farklı sinyaller iletir ve beynimizde renkler üzerinden görüntüyü oluşturur.
Oyunlarda, Metaverse ve 3 Boyutta Renk Değerlerinin Hesaplanması.
Burada bilgisayarda gerçek dünyayı simule etmek için farklı ışık modellerinden faydalanırlar, bazen OpenGL deki gibi sınırlı kaynak ile en iyi performansı elde etmek için Blinn Phong Shading Modeli uygular.
- Ambient Lighting
- Diffuse Lighting
- Specular Lighting
- Emissive Lighting
Bazende gerçek hayatı simule eden çok gerçekçi ışık hesaplamarı istediğimizde ray-tracing gibi benzeri algoritmalar kullanılır.
Web Sayfasında Pratik Kullanım
Bir web sayfasında rengi alabilmek için input HTML Elementi kullanmanız yeterli
<input type="color"/> dediğimizde bu color paletini kullanabiliriz.
- Hex (#B04040)
- RGB(176,64,64)
- HSL(0, 47%, 47%)
Palet içerisindeki renk değişimlerini aşağıdaki kod ile kolaylıkla elde edebilirsiniz.
<input type="color" onClick={e => console.log(e.target.value)} />Peki arka planda bu Color dönüşümleri neye göre gerçekleşiyor, Hex, RGB ve HLS modelleri neyi ifade ediyor.
Renk Modelleri (Color Models)
- RGB Model (Red, Green, Blue) Color Model,
- CMY Model (Cyan, Magenta, Yellow) Color Model
- HSV (Hue, Saturation, Value) Color Model
- HSL (Hue, Saturation, Lightness) Color Model
Öncelikle Hex Code diye ayrı bir renk modeli yok. RGB yani Red, Green, Blue her bir değeri 255 lik değer sıkalası içerisinde tutulur [0..255] arasında değer alabilir. Hex ise RGB renk modelinde tutulan değerlerin 16 lık sisteme dönüştürülmüş hali.
Örneğin : Aşağıdaki tabloya bakarsanız renk dönüşümlerinin B0 → 11x16 , 40 → 4x16 olduğunu görebilirsiniz.
RGB Modeli (Additive)
Red, Green, Blue yani göz koni hücrelerimizin algıladığı tonları üzerinden model oluşturma yöntemidir. Bu model ana renklerin birbiri üzerine eklenmesi ile (additive) ışığın birbirine karıştırılması, üst üste bindirilmesi üzerine kurgulanan bir renk modelidir.
Burada Grassmann yasalarına göre algebric matematiksel kurallar işletilerek renk değerleri birbirine eklenir. Bu ekleme sonucunda
Kırmızı + Mavi = Magenta (Cırtlak Pembe)
Kırmızı + Yeşil = Sarı
Yeşil + Mavi = Cam Göbeği
Kırmızı + Mavi + Yeşil = Beyaz Rengi
Siyah aslında bir renk değil. Işık değeri 0 çünkü.Aşağıda bu renk yapısını 2 boyutlu düzlemde veya 3 boyutlu küp olarak gözlemleyebilirsiniz.
3 Boyutlu düzlemde gördüğünüz gibi ana eksenler R, G, B iken bu eksenlerin birleşimi olan yerlerde renklerin C(Cyan), M(Magenta) ve Y(Yellow) olduğunu görebilirsiniz.
Burada RGB modelinin Bilgisayar ekranları, Monitor gibi sistemlerde sıkça kullanıldığımız elektron tabancasıyla ışık oluşturup, bu ışığı bir cam, perde vb yapılar üzerinde düşürdüğümüz sistemler için çok anlamlıdır.
CMY Color Model(Subractive)
Ana renklerin Cyan, Magenta ve Yellow renkleri üzerinden tanımlayan model. Özellikle kağıt çıktılarda, hard-copy dediğimiz yapılar üzerinde görüntü oluşturmak istediğimiz durumlarda kullanacağımız bir modeldir. Çünkü burada ışıklar yerine renklerin kağıt ile karışması (birleşmesi) ve bu birleşme üzerinden ışığın yansıyarak gözümüze gelmesi ile oluşan bir durum ile karşı karşıya kalırız. Burada subractive process işletecek bir yapının olması gerekmektedir.
Burada aslında beyaz ışığın olduğu ortamdan R(Kırmızı), G(Yeşil), B(Mavi) değerleri vektörel olarak çıkartılarak CMY renkleri bulunur.
Bu modelde kağıt üzerinde alacağımız renkler üzerindeki pigmentlerin birbiri ile karışması ile oluşur. Yani tüm renkleri karıştırdığımızda siyahı elde ederiz çünkü pigmentler karışınca yansıma bu bölgede 0 olacaktır. Yani additive sistemin aksine subractive ile çıkararak renkleri oluştururuz.
Blue = 1 - (Magenta + Cyan)
Yeşil = 1 - (Sarı + Cyan)
Kırmızı + Mavi + Yeşil = (1 - Beyaz Rengi)
Beyaz kagıda herhangi bir renk bazılmaz ise zaten beyaz renktir :)
HSV veya HSL Color Modeli
Hue, Saturation Value Renk modeli ise ressamların renk paletlerini kullanma yöntemlerinden yola çıkarak oluşturulmuştur. Sezgisel renk oluşturma modeli özellike renk paletleri oluşturmak ve ilişkili karşıt renkli yapılar oluşturmak açısından oldukça önemlidir.
Ressam önce ana renk tonlarını paletine ekler. Nedir bu ana renkler. 0 (Red) ile başlayıp → Yellow → Green → Cyan → Blue → Magenta renk ve aralıkları ile 360 derece de tanımlanan ana renkler tonlarıdır.
Ressam farklı renk tonları oluşturabilmek için Ana rengi Hue tablosundan seçtikten sonra (Not: Dereceyi belirledikten sonra). Bu rengi karartmak için renge siyah pigment ekler. Açmay içinse beyaz pigment ekler. Bu karartma işlemine(shade) açma işleminede(tint) denir.
Hue kavramını anladıysak Saturation(Doygunluk) Kavramı üzerinde duralım.
Saturation (Doygunluk), bir rengin en canlı görünümünden gri görünüme nasıl geçiş yaptığını tanımlar. Yüksek derecede doygun bir renk, canlı, saf bir renk tonudur. Rengi doygunluğunu azalttıkça gri ve soluk görünmeye başlar.
Hue ve Saturation aynı şekilde olsada bu renk modellerinin üzerine oturtulduğu geometrik yapılar birbirinden farklı olduğu için HSV tek bir koni, HSL 2 koninin üst üste bindirilmiş hali. Bu yapıları silindire dönüştürdüğümüzde Light ve Value değerinin aşağıdaki resimlerde olduğu gibi etki yaptığını görebilirsiniz.
Alpha Değeri Nedir ?
Aslında Alpha color tanımlamalarında kullansakta
- Hex+Alpha(ffaa2248)
- RGB+Alpha(255,125,12,0.3)
aslında renk ile ilgili bir durum değil gerçek hayattaki saydamlık/opaklığı simüle eden bir durumdur. Yani bazı nesneler saydamdır ve arkasındaki cisimleri göstermeleri gerekir. İşte biz burda renk tanımlaması yaparken arka planda bulunan cisimlerin renkleri ile mevcut öndeki cismin renklerinin birbirine karışması için Alpha Channel kullanırız. Bu renk tanımlamasına verdiğimiz 4ncü parametre olur.
OpenGL, DirectX veya Native OS Graphics Engine bu yapıları algıladığında verilen işlemler doğrultusunda renkleri arka plandaki renk ile mevcut rengin ne miktarda karışacağına saydamlık/opaklığı (0…1) arasında tanımlamalara bakarak, bunları bir Z-Index (Z Buffer) üzerinde dizerek karıştırma işlemini gerçekleştirir.
Aslında nihai olarak arka plan rengi ile karıştığında oluşan renktir bizim için. Ama bilgisayar bunu dinamik olarak hesaplayabildiği için bu sayede statik bir renk almak yerine örneğin hareket eden saydam renkli bir katman arkaplandaki renklere göre sürekli güncellenerek gösterilebilir.
Referaslar
- Color Theory (Alter Spark)
- Colors (Wikipedia)
- Computer Graphics (Donald Hearn)
- HSL ve HSV (Wikipedia)
Okumaya Devam Et 😃
Bu yazının devamı veya yazı grubundaki diğer yazılara erişmek için bu linke tıklayabilirsiniz.
