koddla

Yazılımcıları bilgi ile güçlendirir.

Renk Modelleri: RGB, HSV, HSL

Bu bölüm, RGB, HSV ve HSL renk modelleri hakkında bilgisayar grafikleri (Web sayfası, resim) perspektifinden bir giriş sağlayacak. Bu tartışmayı desteklemek için renklere de göz atacağız.

“Renk”, insan beyninin bir ışık dalga boyu bandının kombinasyonlarını öznel olarak yorumlamasını ifade eder. Ayrıca, göze hangi dalga boylarının ulaştığı hem ışık kaynağındaki dalga boylarına hem de ışığın yansıdığı nesneler tarafından hangi dalga boylarının emildiğine de bağlıdır. Neyse ki çoğu Web geliştiricisi için ekranlar, renkle çalışmayı kolaylaştıran makul ve tutarlı bir şekilde kendi ışıklarını oluşturur.

Birincil Renkler

Birincil renkler kavramı, beyaz ve siyah ile birlikte üç rengi birleştirerek herhangi bir rengin oluşturulabileceği gerçeğine dayanmaktadır. Bununla birlikte, renkler doğrudan (örneğin, bir ekran tarafından) veya yansımayla (örneğin, boya ile) oluşturulabildiğinden, hangi renk kümesinin “birincil renkler” olduğunun birden fazla tanımı vardır. Aslında, üç ana renk kümesi bulunur.

Geleneksel Renkler

Isaac Newton, 1672’de kırmızı, sarı ve maviyi kullanarak renkleri birincil renkler olarak tanımladı. Bu renk düzeni genellikle “Ressamın Renkleri” olarak adlandırılır ve hala sıklıkla kullanılır. Ne yazık ki, bu birincil renk seçimi yanlıştır ve tüm renkler bu üçü kullanılarak oluşturulamaz.

Çıkarmalı Renkler

Genellikle “Yazıcı Renkleri” olarak adlandırılan bu renk düzeni, beyaz ışığın bir yüzeyden nasıl yansıdığı üzerinden renkleri görüntüler; elde edilen renk, beyazdan “çıkarmanın” sonucudur. Birincil renkler siyan, sarı ve macenta’dır. Baskıda, bu üçü genellikle CMYK modeli için siyahla birleştirilir (siyah “K” olarak adlandırılır). Çıkarmalı (subtractive) renkler, ışığın sıçraması ve belirli dalga boylarını emdikten sonra kalan diğer tüm renkleri ekleyerek çalışır; dışarıdan bir ışık kaynağına ihtiyaç duyarlar. Tüm subtractive renkler birbirine karıştırılırsa siyah oluştururlar.

Ekleme Renkleri

Bu renk düzeni, renkleri birincil renkleri bir araya ekleme perspektifinden görüntüler; Birincil renkler kırmızı, yeşil ve mavidir. Bu yöntemi kullanmanın en yaygın örneği, herhangi bir renkte piksel oluşturmak için RGB modelini kullanan ekranlar veya monitörlerdir. Eski CRT televizyonlara veya bilgisayar monitörlerine yakından bakarsanız, ekran açıldığında bu üç rengin şeritlerini görürsünüz. Katkılı birincil renkler kendileri de birer ışık kaynağıdır. Görünür ışık spektrumunun tamamını kabaca eşit ölçüde kaplayan elektromanyetik dalgaların kaynakları (örneğin Güneş) beyaz görünecektir.

Ton

Bir ton veya “saf” renk, iki birincil renkten birinin tam yoğunlukta olduğu iki ana rengin birleşimidir. Tonlama, gölgelendirme ve ton tartışması bu kavramı daha net hale getirecektir.

Bu yazının geri kalanı için “renk” genel anlamda kullanılacak ve saf bir rengi tanımlamak için “ton” kullanılacaktır.

Renk Tekerleği

Zihnin rengi yorumlamasının ilginç yönlerinden biri de, renkler arasındaki ilişkiyi dairesel bir şekilde görmesidir. Renk tekerleği, olası tüm tonlar arasındaki ilişkilerin görsel gösterimini sağlayan bir araçtır. Birincil tonlar eşit (120 derece) aralıklarla bir daire etrafında düzenlenir. (Not: Renk tekerlekleri sık sık “Ressamın Renkleri” birincil renklerini gösterir ve bu da katkı renklerinden farklı bir renk tonu kümesine yol açar.)

İkincil ve Tamamlayıcı Renkler

İkincil renkler (teknik olarak, tonlar) tam yoğunlukta iki birincil rengin eklenmesi ile oluşturulur. Renk tekerleğinde, bu renkler her bir birincil renk çifti arasında (60 derece uzaklıkta) bulunur. İkincil renkler siyan, sarı ve macenta’dır. Bunların, çıkarmalı renkler veya yazıcı birincil renklerinin aynısı olduğunu unutmayın.

Bir tonun tamamlayıcısı, renk tekerleğinde karşısında (180 derece uzaklıkta) olan renk tonudur. Birincil renklerin her birinin tamamlayıcısı ikincil renklerden biridir. Katkı renkleri kullanarak, bir tonu ve tamamlayıcısını eşit miktarlarda karıştırmak beyaz rengi üretir.

Tamamlayıcı renk, genellikle, tamamlayıcı ton ve aynı renklendirme ve gölgelendirme derecesine sahip renktir. Bir renk ve tamamlayıcısını eşit miktarlarda eklemek grinin bir tonunu üretir.

Gölgeler, Renk Tonları, Tonlar

Gölge

Bir ton “koyulaştırılarak” gölge üretilir. Ressamlar bunu “siyah eklemek” olarak tanımlar.

Renk Tonu

Renk tonu, bir tonun “açılması” ile üretilir. Ressamlar buna “beyaz eklemek” derler.

Ton

Ton, tipik olarak ressamlar tarafından kullanılan, bir tonun “renkliliğini” azaltmanın etkilerini ifade etmek için kullanılan genel bir terimdir; ressamlar buna “gri ekleme” olarak atıfta bulunurlar. Grinin bir renk veya tek bir kavram olmadığını, ancak her üç ana rengin yoğunluklarının eşit olduğu siyah ve beyaz arasındaki tüm değer aralığını ifade ettiğini unutmayın. Daha spesifik terimler farklı renk modellerinde çakışan tanımlara sahip olduğundan, genel terim tonu burada kullanılır. Böylece, gölgeleme siyaha doğru bir ton alır, renklendirme beyaza doğru bir ton alır ve tonlar griye doğru bir ton alır. Teknik olarak, tonlar ve renk tonları, siyah ve beyazın teknik olarak grinin tonları olduğu gibi, özel ton örnekleridir.

Renk Modeli Seçme

Hiçbir renk modeli diğerinden “daha iyi” değildir. Genellikle, bir renk modelinin seçimi, grafik aracı veya CSS2 veya CSS3 standardına göre renk belirtme gereksinimi gibi dış etkenler tarafından dikte edilir. Aşağıdaki tartışma yalnızca modellerin nasıl çalıştığını, ton, gölge, renk tonu ve ton kavramlarına göre açıklar.

RGB

RGB modelinde birincil ve ikincil renkleri görüntüleyen bir renk tekerleği bulunur.

RGB modelinin renklere yaklaşımı önemlidir, çünkü:

  • “Truecolor” ekranlarının fiziksel özelliklerini doğrudan yansıtır
  • Çoğu grafik aracı, başka bir renk modelini tercih etse bile RGB’yi destekler
  • Web sayfaları için CSS2 standardında belirli bir renk belirtmenin tek yoludur. CSS’nin artık toplu olarak CSS 4 adı verilen bir dizi modüle ilerlediğini, ancak kolaylık, kodun geriye dönük uyumluluğu ve aşinalık için RGB(A) renk tanımlarının ve elde edilen CSS kodunun kullanımının daha kolay olabileceğini unutmayın.

Modelde, kırmızı, yeşil ve mavi renklerin yoğunluk düzeyleri belirterek bir renk belirlenir. Her renk için tipik yoğunluk değerleri aralığı olan 0-255 arası 32 bitlik ikili bir sayı alınıp, her biri sekiz bitlik dört bayta bölünür. Sekiz bit 0 ile 255 arasında bir değer tutabilir. Dördüncü bayt, rengin “alfasını” veya opaklığını belirtmek için kullanılır: bu bazen bir alfa kanalının dahil edilmesiyle “RGBA” olarak adlandırılan şeye yol açar; bu tanımlanmamışsa, opaklığın % 100 olduğu varsayılır. Farklı renklere sahip katmanlar istiflendiğinde Opaklık devreye girer. Üst katmandaki renk tam opak (alfa < 255) değilse, temel katmanlardan gelen rengi “gösterir” ve birleşik bir renk üretir.

RGB modelinde tonlar, bir rengin tam yoğunlukta (255), ikinci rengin değişken yoğunlukta ve üçüncü rengin sıfır yoğunlukta (0) belirtilerek temsil edilir.

Aşağıda, tam yoğunluklu kırmızı ve kısmi yoğunluklu renkler olarak yeşil kullanarak bazı örnekler verilmiştir; mavi her zaman sıfırdır:

Gölgeler, her birincil rengin yoğunluğunun 0 ile 1 aralığında gölge faktörü eksi 1 ile çarpılarak oluşturulur. 0 gölge faktörü tona hiçbir şey yapmaz, 1 gölge faktörü siyah üretir:

yeni yoğunluk = şimdiki yoğunluk * (1 – gölge faktörü)

Aşağıda turuncu kullanarak örnekler verilmiştir:

Renk tonları, birincil renklerin aşağıdaki gibi değiştirilmesi ile oluşturulur: yoğunluk artar, böylece yoğunluk ve tam yoğunluk (255) arasındaki fark, 0 ile 1 aralığındaki renk tonu faktörü tarafından azalır. 0 renk tonu faktörü hiçbir şey yapmaz, 1 renk tonu faktörü beyaz üretir:
yeni yoğunluk = şimdiki yoğunluğu + (255 – şimdiki yoğunluk) * renk tonu faktörü

Aşağıda turuncu kullanarak örnekler verilmiştir:

Tonlar hem gölge hem de renk tonu uygulanarak oluşturulur. İki işlemin gerçekleştirilme sırası önemli değildir, ancak: bir ton işlemi bir gölgede gerçekleştirildiğinde baskın rengin yoğunluğu “tam yoğunluk” haline gelir; yani, 255 yerine baskın rengin yoğunluk değeri kullanılmalıdır.

Aşağıda turuncu kullanarak örnekler verilmiştir:

RGB’den farklı olarak, HSV ve HSL için de değer aralığı çeşitli araçlar ve standartlar tarafından tanımlanır. Bir değeri yorumlamaya çalışmadan önce değer aralıklarını belirlediğimizden emin oluruz. Örneğin, ton değerleri 0 ile 360 arasında değişir, ancak Windows 7’de® bulunan “Paint” HSL modelinde 0 ile 239 aralığını kullanır. Böylece 120’ye kadar bir ton, birçok alette “yeşil” ancak Paint’te “siyan” gösterir.

CSS’de bu değerleri yazmanın yolu değişebilir: (X, Y, Z) modelini kullanabilir veya kırmızı, yeşil ve mavi miktarlarının iki basamaklı onaltılık sayılarla tanımlandığı onaltılık değerler olarak bilinen şekilde renkleri tanımlayabilirsiniz. Onaltılık sayılar (hexadecimal, hex), temel 16 sayılar için standart temel-10 basamak 0 ile 9 ve A-F ile yazılır. Örneğin, yukarıdaki (255, 128, 0) rengi #ff8000 da yazılabilir ve (0, 0, 0, 0) #0000000 olabilir.

HSV

HSV veya HSB modeli renkleri ton, doygunluk ve değer (parlaklık) açısından açıklar. Bu yöntem CSS’de kullanılmaz (aşağıya bakın).

Ton, Renk Temelleri bölümündeki ton kavramına doğrudan karşılık gelir. Ton kullanmanın avantajları şunlardır:

  • Renk çemberinin etrafındaki tonlar arasındaki ilişki kolayca tanımlanır
  • Gölgeler, renk tonları ve tonlar rengi etkilemeden kolayca üretilebilir

Doygunluk, renk temelleri bölümündeki renk tonu kavramına doğrudan karşılık gelir, ancak tam doygunluk renk tonu üretmez, sıfır doygunluk beyaz, gri veya siyah tonu üretir.

Değer, Renk Temelleri bölümündeki yoğunluk kavramına doğrudan karşılık gelir.

  • Saf renkler, tam doygunluk ve değere sahip bir ton belirtilerek üretilir
  • Gölgeler, tam doygunluğa ve kısmi değere sahip bir ton belirtilerek üretilir
  • Renk tonları, kısmi doygunluğa ve tam değere sahip bir ton belirtilerek üretilir
  • Tonlar bir ton ve kısmi doygunluk ve değer belirtilerek üretilir
  • Beyaz, tondan bağımsız olarak sıfır doygunluk ve tam değer belirtilerek üretilir
  • Siyah, ton veya doygunluğa bakılmaksızın sıfır değer belirtilerek üretilir
  • Gri tonları sıfır doygunluk ve kısmi değer belirtilerek üretilir

HSV’nin avantajı, niteliklerinin her birinin doğrudan temel renk kavramlarına karşılık gelmesidir, bu da onu kavramsal olarak basit hale getirir. HSV’nin algılanan dezavantajı, doygunluk özniteliğinin renklendirmeye karşılık gelmesidir, bu nedenle doymamış renkler toplam yoğunluğu artırmaktadır. Bu nedenle, CSS3 standardı RGB ve HSL’yi desteklemeyi planlarken, ancak HSV’yi desteklemeyi planlamaz.

HSL

HSL modeli renkleri ton, doygunluk ve açıklık (parlaklık olarak da adlandırılır) açısından tanımlar. (Not: HSL’deki doygunluk tanımı HSV’den önemli ölçüde farklıdır.) Modelin iki belirgin özelliği vardır:

  • Siyahtan beyaza geçiş simetriktir ve yalnızca parlaklığı artırarak kontrol edilir
    • Gölgelendirme ve renklendirme tek bir değerle, parlaklık ile kontrol edilir
  • Doygunluğun azaltılması, ışığa bağlı olarak grinin gölgesine geçişleri azaltır, böylece genel yoğunluğu nispeten sabit tutar
    • Tonlar tek bir değerle, doygunluk ile kontrol edilir

Yukarıda belirtilen özellikler, özellikle CSS3 renk modelinde HSL’nin geniş kullanımına yol açmıştır. HSV’de olduğu gibi, ton doğrudan Renk Temelleri bölümündeki ton kavramına karşılık gelir. Ton kullanmanın avantajları şunlardır:

  • Renk çemberinin etrafındaki tonlar arasındaki ilişki kolayca tanımlanır
  • Gölgeler, renk tonları ve tonlar rengi etkilemeden kolayca üretilebilir
  • Opaklık için ek alfa kanalı bilgileri ekleyebilirsiniz, bu nedenle bazen buna “HSLA” veya “HSL(A)” olarak da adlandırılır.

Parlaklık, Renk Temelleri bölümünden gölgelendirme ve renklendirme kavramlarını birleştirir. Tam doygunluk varsayarsak, parlaklık orta nokta değerinde nötrdür. Parlaklık orta noktanın altına indikçe gölgeleme etkisine sahiptir. Sıfır parlaklık siyah üretir. Parlaklık % 50’nin üzerine çıkarken renkleme etkisine sahiptir ve tam parlaklık beyaz üretir.

Sıfır doygunlukta, parlaklık gri tonunu kontrol eder. Sıfır değeri hala siyah üretir ve tam parlaklık hala beyaz üretir. Orta nokta değeri, RGB değeri (128.128.128) olan, grinin “orta” tonuyla sonuçlanır.

Doygunluk azaldıkça, parlaklık tarafından belirlenen grinin bir tonu üzerinde birleşen referans tonlarının renkleri üretir. Bu, toplam yoğunluğu nispeten sabit tutar. Aşağıdaki örnekler, doygunluğu azaltarak orta nokta parlaklığında kırmızı, turuncu ve sarı tonlarını kullanır.

HSL, renk çarkı boyunca tek bir sayı olarak yazılabilir ve ardından hsl (%120, %100, %50); (yeşil), hsl(%120, %100, %75); (açık yeşil), hsl(120, %100, %25); (koyu yeşil) gibi ton, doygunluk ve açıklık değerleri yazılabilir.

Adlandırılmış Renkler

Renkleri tanımlamanın üçüncü bir yöntemi de renk isimleri kullanmaktır. Önceden tanımlanmış bazı İngilizce terimler CSS renkleri olarak standartlaştırılmıştır. Tabii ki, hiçbir renk farklı cihazlarda tamamen aynı olmayacaktır, ancak adlandırılmış renklerin (özellikle CSS 1’den gelenlerin) çok benzer olması beklenebilir.

CSS 1 renkleri:

CSS 2.1 renkleri:

CSS 3 renkleri:

CSS 4 renkleri:

CSS 4’te, transparent ve göreli tutarlılığı korumak için kullanılan currentcolor seçenekleriniz de vardır.

Bir yanıt yazın

E-posta adresiniz yayınlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir

Back to top