Html Colors-Renkler

Bu dersimizde html de kullandigimiz/kullanacagimiz renklerden bahsedecegiz. renk konusu oldukca detayli olmasina ragmen html/css derslerimizde asagdaki bilgilerden yararlanacagiz.


Html Renk Isimleri- Colors Name

Simdiye kadar buyuk olcude bu yontemi kullandik yani renklerin ingilizce isimlerini(desteklenen tanimli isimleri) yazdik,red,green,blue,yellow,orange,... gibi.
Tabiki bu isimler bukadar az degil yuzlerce var diyebilirim,

<div style="background-color:blue;color:white;">Mavi Arkaplana sahip div elementi</div>
<div style="background-color:green;color:white;">Yesil Arkaplana sahip div elementi</div>
<div style="background-color:red;">Kirmizi Arkaplana sahip div elementi</div>
<div style="background-color:yellow;">Sari Arkaplana sahip div elementi</div>
<div style="background-color:black;color:white;">Siyah Arkaplana sahip div elementi</div>
<div style="background-color:orange;">Turuncu Arkaplana sahip div elementi</div>
<div style="background-color:white;">Beyaz Arkaplana sahip div elementi</div>
<div style="background-color:brown;">Brown Arkaplana sahip div elementi</div>
Mavi Arkaplana sahip div elementi
Yesil Arkaplana sahip div elementi
Kirmizi Arkaplana sahip div elementi
Sari Arkaplana sahip div elementi
Siyah Arkaplana sahip div elementi
Turuncu Arkaplana sahip div elementi
Beyaz Arkaplana sahip div elementi
Brown Arkaplana sahip div elementi

Html - RGB Degeri

RGB Renk uzayi ingilizcedeki Red,Green,Blue(Kirmizi,Yesil,Mavi) kelimelerinin bas harflerinden ismini alan bir renk uzayidir. Bu 3 rengin degisik oranlarda kullanilmasiyla renkler elde edilir.3 renkte %100 oraninda karistirilirsa beyaz,ve %0 oraninda karistirilirsa siyah elde edilir. Her renk orani 0-255 arasinda bir sayi ile ifade edilir 255 degeri ornegin %100 kullanildigini gosteririr. orneklerle daha iyi anlayacagiz:

rgb(255,0,0)=Kirmizi degeri 255 (yani%100) diger 2 renk %0
rgb(0,255,0)=Yesil degeri 255 (yani%100) diger 2 renk %0
rgb(0,0,255)=Mavi degeri 255 (yani%100) diger 2 renk %0
rgb(0,0,0)=Siyah cunku tum renkler %0 oraninda
rgb(255,255,255)=Beyaz cunku tum renkler %100 oraninda

Burda renk bilgisi devreye giriyor ornegin sari rengini nasil olusturabiliriz?
Kirmizi ve yesil rengi esit oranda(%100) karistiralim...
rgb(255,255,0)=Sari cunku kirmizi ve Yesil %100 ,mavi %0
Buraya Dikkat !
rgb(120,120,0) Sonuc sari degil cunku kirmizi ve yesil %100 oranda karismadi

rgb(165,42,42) Bu karisimdan da boyle bir renk cikti

Gri tonlari web'de bicok yerde kullaniriz. RGB degerlerinin hepsinin esit oranda karismasiyla degisik tonlarda griler elde edilebilir.
rgb(99,99,99) boyle bir gri cikti

HEX Value-Hex Degeri

Kullanim bicimi genel olarak rgb mantigindadir,fakat 16'lik sistemi kullanir.

#FF000 Kirmizi
#00FF00=Yesil
#0000FF=Mavi
#000000=Siyah
#FFFFFF=Beyaz
#FFFF00=Sari
#CCCCCC=Gri
#f2c8ff ->bu karisimdan da bu renk cikti


RGBA Colors

Yukarda RGB kullanimini gorduk,fakat RGBA Kullanimi oldukca faydali. cunku 4.parametre [0-1] araliginda degerler alarak elde edilen rengini saydamligini ayarlar.asagdaki ornek daha net konuyu anlatiyor.

<span style="background-color:rgba(255,0,0,0);">a=0</span>
<span style="background-color:rgba(255,0,0,.1);">a=.1</span>
<span style="background-color:rgba(255,0,0,.2);">a=.2</span>
<span style="background-color:rgba(255,0,0,.3);">a=.3</span>
<span style="background-color:rgba(255,0,0,.4);">a=.4</span>
<span style="background-color:rgba(255,0,0,.5);">a=.5</span>
<span style="background-color:rgba(255,0,0,.6);">a=.6</span>
<span style="background-color:rgba(255,0,0,.7);">a=.7</span>
<span style="background-color:rgba(255,0,0,.8);">a=.8</span>
<span style="background-color:rgba(255,0,0,.9);">a=.9</span>
<span style="background-color:rgba(255,0,0,1);">a=1</span>
a=0 a=.1 a=.2 a=.3 a=.4 a=.5 a=.6 a=.7 a=.8 a=.9 a=1

Bu derse ait gorus ve onerilerinizi yada farkettigniz hatalari Lutfen bana bildirin!
birbyte.net@gmail.com