CSS3 ve HTML Dersleri | Renk (Color) Özellikleri

CSS Renk Stil Uygulamaları

CSS ve HTML’de Renk Özellikleri

CSS’de ekitelere veya elementlere atanacak (uygulanacak) renkler bir kaç genel kullanım yöntemleri ile uygulanabilir.

  • Doğrudan renk ismi belirterek,
  • HEX Renk kodları kullanılarak,
  • RGB Renk kodları kullanılarak.

HTML Renk İsmi

Renk isimleri HTML ve CSS’de doğrudan yazılarak uygulanabilir. Örneğin color:red; deklarasyonunda hangi elemente uygulanmışsa rengi kırmızı olacaktır. HTML’de kullanabileceğimiz 140 adet renk ismi mevcuttur. Bu isimlere ulaşmak için https://htmlcolorcodes.com/color-names/ adresini ziyaret edebilirsiniz.


p{color: green;
background-color: white;
}

RGB Renk Kodları

RGB teriminin açılımı Red (Kırmızı) Green (Yeşil) Blue (Mavi) dir. RGB renk kodlarında her bir renk 0-255 arasında bir değer alır. Mantığına bakacak olursak doğadaki renkler 3 ana renkten oluşur. Bu ana renkler Kırmızı Mavi ve Sarı’dır. Bunların açık, koyu, doygun ve soluk olmasını sağlayan yardımcı renkler ise beyaz ve siyahtır. Bu 5 renk elinizde olduğunda karıştırma veya içinden çıkartma şeklinde düşünürsek doğadaki tüm renkleri elde etme olanağına sahip oluruz.

RGB mantığı da kısaca şu şekilde çalışır. Rgb(255,0,0) şeklinde verilmiş olan renk kodunun içinde en doygun vaziyette kırmızı renk vardır ve değeri 255’dir. Bu değer 255 den 0’a doğru değer aldıkça kırmızının renginin koyulaştığını göreceksiniz. Düşünüldüğünde rengi çıkarttığımızda yani sayısı düşürdüğümüzde beyaza yaklaşır gibi düşünülürken tam tersi beyazdan eksiltiyoruz. Bu sebepten renk koyulaşmaya başlıyor.

Diğer bir örnekle açıklamak gerekirse rgb(255,0,255) değerinin göstereceği renk mor olacaktır. Kırmızı tam doygunlukta, mavi tam doygunlukta ikisinin karışımı mor rengi verecektir. Peki rgb(255,255,0) değerinde, yani kırmızının tam doygun yeşilin tam doygun olduğunda hangi rengi verecektir? Tabiki sarı. Ama sakın bunu kırmızı ile yeşili karıştırırsak sarı rengi elde ederiz diye düşünmeyin. Bu örnekleri verirken anlamanızı daha etkin kılmak için olumsuzdan başladım. Aslında rgb içinde bütün renkleri barındıran bir yapıdadır. Kırmızı ve Mavi ana renk olarak verilmişken ortada bulunan yeşilin faktörü maviden yeşilin çıkartılması ile sarının ortaya çıkmasını ve 3 ana renk olan kırmızı sarı ve mavinin karışımı mantığına dayanmaktadır.


p{
color: rgb(37,167,59);
background-color: rgb(255,255,255);
}

HEX Renk Kodları

HEX renk kodları 16’lık sayı sistemi baz alınarak elde edilmiştir. değerler 0 dan başlar 16 ya kadar ilerler, fakat 10 değeri ile birlikte A, B, C, D, E, F değerleri alır. A 10 ve sırasıyla gidildiğinde F 16ncıyı işaret eder. CSS ve HTML’de hex renk kodlarının gösterimi #25A73B şeklindeki bir örnekle açıklayalım. # işaretinden sonra bu yapıyı ikişer ikişer olarak 3 parçaya bölerek 25, A7 ve 3B şeklinde ayırdığımızda ilk iki karakter grubu rgb deki gibi kırmızı (red) rengi tanımlar. İkinci grup olan A7 yeşil (green) rengi tanımlar ve sonuncu grup olan 3B ise mavi (Blue) rengini tanımlar.

Biraz eski matematik bilgilerimizi hatırlayarak HEX (onaltılık sayı sistemi)’nin bizim yaşantımızda kullandığımız 10’luk sayı sistemine (decimal) dönüşümünü nasıl gerçekleştiririz kısaca gösterelim.

Hex Renk Özellikleri


p{
color: #25a73b;
background-color: #ffffff;
}

HSL Renk Kodları (Hue-Renk, Saturation-Doygunluk, Lightness-Açıklık)

HSL’nin açılımı başlıktata yazıldığı gibi Hue Saturation Lightness kelimelerinin baş harfleridir. Aşağıdaki resmi inceleyerek bir HSL renk paletinin nasıl olduğunu anlamaya çalışalım.

hsl renk özelliği

Görüldüğü üzere yukarıdaki palet bir silindire benziyor. Hue değeri 0-360 değerleri alabilir ki malumunuz bu bir dairenin derecesel değeridir. Saturation ve Lightness değerleri ise yüzdesel (%) ifade ile gösterilir. Örnek vermek gerekirse #25a73b hex renk kodu rgb(37,167,59) değerine ve hsl(130,64%,40%) değerine eşittir. HSL silindirik renk paletinde 130° ye denk gelen yeşil tonunda bir renk ve doygunluğu %64 değerinde. Silindirin merkezinde dış sınırına kadar olan uzaklığın %64 üne denk gelecek doygunlukta ve %40’lık bir açıklığa (lightness) sahip. Açıklıkta silindirin siyah olan tabanından beyaza doğru gidilecek %40’lık mesafeyi işaret eder ki, rengimiz orta koyulukta bir yeşil tonu elde etmiş oluruz.


p{

color: hsl(130, 64%, 40%);
background-color: hsl(0, 0, 100%);

}

hsl renk özelliği

Alpha Saydamlık Parametresi

RGB ve HSL’den farkı renk kodu içindeki 3 parametre sayısı 4’e çıkarılarak fonksiyon isimlerinin sonun alpha (a) harfi gelmesiyle oluşmuşlardır. Rgba(255,0,0,0.5) veya Hsla(0,100%,50%,0.5) örneklerinde son parametre 0.5 değerini alırki %50’lik bir saydamlık (alpha veya opacity) uygulanmış anlamına gelir. Bu renk ortamları sadece dijital ortamlarda kullanılabilir.


p{

color: rgba(255, 0, 0, 1);
background-color: hsla(130, 64%, 40%, 0.5)

}

Diğer Renk Kodları ve Kullanım Alanları

Farklı meslek alanlarında kullanılan bir çok çeşit renk paletleri veya renk uzayları bulunmaktadır. Dijital ortamlarda hex, rgba, hsla çoğunlukla tercih edilirken renkli baskılarda bu paletler genellikle kullanılmazlar. Matbaa işlerinde genellikle CMYK renk paleti kullanılır. Konumuzla ilgili olmamakla birlikte RGB nin nerden geldiğinede ışık tutmak adına yardımcı olacaktır. Aşağıdaki resmi incelediğimizde,

renk özellikleri CMYK

CMYK harflerinin açılımını Cyan Magenta Yellow ve Black’dir. Genellikle yazıcıların baskı mantığında da bu renk sistemi kullanılır. Renkli bir yazıcınız varsa muhtemel içindeki renkler yukarıdaki resimdeki renkleri içeriyordur. Renklerin açık veya koyu olmasını sağlayan yegane unsur bu sistemde siyahtır. Kesişim bölgesinde gördüğünün Red, Green, Blue RGB mantığını açıklar.

Konu anlatımı;

Olmalısın giriş yapmış yorum yazmak için

Proudly powered by WordPress   Premium Style Theme by www.gopiplus.com