Merhaba..
HTML ve CSS'te tasarımın daha estetik olması ve göze daha hoş gelmesi için yazı , çizgi , tablo , div , arka plan vs için çeşitli renkler kullanıyoruz. Html sayfalarda renkleri farklı yollarla ve kodlarla seçebilyoruz..
En kolay renk belirleme yöntemidir. Ancak diğer metodlara göre daha az renk çeşitliliği elde edilir. Aşağıda bazı renkleri ve ingilizce isimlerini görebilirsiniz. Renkleri küçük yada büyük harflerle yazabilirsiniz..
Daha fazla renk için HTML - CSS RENKLERİ ve KODLARI notuna bakabilirsiniz...
<table bgcolor="red">
<body bgcolor="orange">
<div style="color:darkviolet">
<hr color="blue">
3 haneli kodlarda her hane bir ana rengi temsil eder ve 16'lık sistemde bir rakam alır , Örneğin; #49A gibi...
RGB ana renkler dizilimi RGB --> KIRMIZI - YEŞİL - MAVİ şeklindedir..
#49A
R -> RED (KIRMIZI) 0 ile F arasında değer alır..
G-> GREEN (YEŞİL) 0 ile F arasında değer alır..
B-> BLUE (MAVİ) 0 ile F arasında değer alır..
"R" İlk hane kırmızı oranını, "G" 2. Hane yeşil oranını ve "B" 3. Hane mavi oranını verir…
16'LIK (HEXADECİMAL) SAYI SİSTEMİ RAKAMLARI
16'lık sayı sisteminde 0 1 2 3 4 5 6 7 8 9 A B C D E F olmak üzere toplam 16 rakam bulunur. Harfler; A: 10 B: 11 C: 12 D: 13 E: 14 F: 15 şeklinde düşünülmelidir.
RENGİN OLUŞMASI
RGB Renk kodları 16’lık sayı sisteminde (hexadecimal) yazılır. Her hane bir rakam alır. 16’lık sistemde 16 tane rakam olduğu içi bir ana renk 16 farklı ton alabilir. 3 rengin oranlarının birleşimi ile renkler oluşur.
Renk kodlarının başına mutlaka # işareti konulur.
Her renk 16 farklı ton aldığına göre 3 haneli kodlar ile 16x16x16 = 4096 farklı renk tonu elde edilir.
ANA RENKLER
| #000 | Tüm renkler kapatıldığında SİYAH elde edilir |
| #FFF | Tüm renkler full açılırsa BEYAZ elde edilir.. |
| #F00 | Kırmızı rengi full yapıp , diğerlerini kapatırsak KIRMIZI elde edilir.. |
| #0F0 | Yeşil rengi full yapıp , diğerlerini kapatırsak YEŞİL elde edilir.. |
| #00F | Mavi rengi full yapıp , diğerlerini kapatırsak MAVİ elde edilir.. |
ARA RENKLER
Renklerin farklı oranlarda kodlanmasıyla ara renkler elde edilir. Örneğin:
GRİ SKALA
Gri renk skalası için (siyahtan - beyaza) 000 – fff arası eşit oranlı kodlar kullanılır. ( #222 , #555 , aaa gibi)
| #000 | #444 | #888 | #CCC |
| #111 | #555 | #999 | #DDD |
| #222 | #666 | #AAA | #EEE |
| #333 | #777 | #BBB | #FFF |
HEX KOD İLE SAYDAMLIK EKLEME (RGBA)
3 haneli hex kodlarının sonuna bir hane daha ekleyerek , rengin alfa değerini yani opaklığını (saydamlığını belirtebiliriz. Bu değer 0 olduğunda renk görünmez , F olduğunda tam olarak görünür. Saydamlık F'ten 0'a gidildikçe artacaktır. Saydamlık artttıkça rengin altında kalan elemanlar görünmeye başlar.
| Alfasız | Alfa'lı |
| #f00 | #F005 |
Yukarıda kırmızı rengine alfa hanesi (5) eklend. Tablo altında bir eleman olmadığı için saydamlaşan renk , altındaki renk ile karışarak görünür.
<table bgcolor="#f00"></table> <!-- rgb -->
<body bgcolor="#0f0"></body>
<div style="#ffa"></div>
<hr color="#aaa">
<div style="#ffa5"></div> <!-- rgba -->
6 haneli kodlarda her hane bir ana rengi temsil eder ve 3 haneli kodlamadan farkı renklerin bir değil iki hane ile tonlanmasıdır. RR - GG - BB. Yani her ana renk 16'lık sistemde İKİ rakam alır. RGB ana renkler dizilimi yine
RGB --> KIRMIZI - YEŞİL - MAVİ şeklindedir..
#4499AA
|
RR RED (Kırmızı) 00 ile FF arasında değer alır.. |
RR GREEN (Yeşil) 00 ile FF arasında değer alır.. |
RR BLUE (Mavi) 00 ile FF arasında değer alır.. |
"RR" İlk iki Hane kırmızı oranını, "GG" 3 ve 4. Hane yeşil oranını, "BB" son iki Hane mavi oranını verir…
16'LIK (HEXADECİMAL) SAYI SİSTEMİ RAKAMLARI
16'lık sayı sisteminde 0 1 2 3 4 5 6 7 8 9 A B C D E F olmak üzere toplam 16 rakam bulunur. Harfler; A: 10 B: 11 C: 12 D: 13 E: 14 F: 15 şeklinde düşünülmelidir.
RENGİN OLUŞMASI
RGB Renk kodlarının 16’lık sayı sisteminde (hexadecimal) yazıldığını söylemiştik.. Her rernk 2 rakam alır. 16’lık sistemde bir ana renk 00 - FF arasında 256 farklı ton alabilir. Yine bu 3 renk tonlarının birleşimi ile renkler oluşur.
Renk kodlarının başına yine mutlaka # işareti konulur.
Her renk 256farklı ton aldığına göre 3 haneli kodlar ile 256x256x256 = 16.777.216 farklı renk tonu elde edilir. 3 haneli kodlara göre çok daha fazla renk çeşitliliği elde edilir.
ANA RENKLER
| #000000 | Tüm renkler kapatıldığında SİYAH elde edilir |
| #FFFFFF | Tüm renkler full açılırsa BEYAZ elde edilir.. |
| #FF0000 | Kırmızı rengi full yapıp , diğerlerini kapatırsak KIRMIZI elde edilir.. |
| #00FF00 | Yeşil rengi full yapıp , diğerlerini kapatırsak YEŞİL elde edilir.. |
| #0000FF | Mavi rengi full yapıp , diğerlerini kapatırsak MAVİ elde edilir.. |
ARA RENKLER
Renklerin farklı oranlarda kodlanmasıyla ara renkler elde edilir. Örneğin:
Ara renk çeşitliliği için 6 haneli kodların kullanılması daha uygun olur.
GRİ SKALA
Gri renk skalası için (siyahtan - beyaza) 000 – fff arası eşit oranlı kodlar kullanılır. ( #222 , #555 , aaa gibi)
| #000000 | #444444 | #888888 | #CCCCCC |
| #111111 | #555555 | #999999 | #DDDDDD |
| #222222 | #666666 | #AAAAAA | #EEEEEE |
| #333333 | #777777 | #BBBBBB | #FFFFFF |
Daha fazla renk için HTML - CSS RENKLERİ ve KODLARI notuna bakabilirsiniz...
HEX KOD İLE SAYDAMLIK EKLEME
6 haneli hex kodlarının sonuna 2 hane daha ekleyerek , rengin alfa değerini yani opaklığını (saydamlığını belirtebiliriz. Bu değer 00 olduğunda renk görünmez , FF olduğunda tam olarak görünür. Saydamlık FF'ten 00'a gidildikçe artacaktır. Saydamlık artttıkça rengin altında kalan elemanlar görünmeye başlar.
| Alfasız | Alfa'lı |
| #ff0000 | #FF000005 |
Yukarıda kırmızı rengine alfa hanesi (05) eklend. Tablo altında bir eleman olmadığı için saydamlaşan renk , altındaki renk ile karışarak görünür.
<table bgcolor="#ff0000"></table> <!-- rrggbb -->
<body bgcolor="#00ff00"></body>
<div style="#ffffaa"></div>
<hr color="#aaaaaa">
<p style="#ffffaa55"></p> <!-- rrggbbaa -->
Renk tonlarını rgb parametresi içerisinde , her renk için onluk sistemde 3 tamsayı yazarak belirleyebiliriz.3 sayı sırasıyla; KIRMIZI - YEŞİL - MAVİ ana renk miktarlarını ifade eder, Aralarına virgül konularak birbirinden ayrılır. Sayıların alabileceği değerler 0 ile 255 arasında olur.
rgb( 165 , 80 , 128 )
Her renk 255 farklı ton aldığına göre rgb tamsyılar kodlar ile en az
256x256x256 = 16.777.216
farklı renk tonu elde edilir.
ANA RENKLER
| rgb(0,0,0) | Tüm renkler kapatıldığında SİYAH elde edilir |
| rgb( 255, 255, 255) | Tüm renkler full açılırsa BEYAZ elde edilir.. |
| rgb(255, 0, 0) | Kırmızı rengi full yapıp , diğerlerini kapatırsak KIRMIZI elde edilir.. |
| rgb( 0, 255, 0) | Yeşil rengi full yapıp , diğerlerini kapatırsak YEŞİL elde edilir.. |
| rgb(0, 0, 255) | Mavi rengi full yapıp , diğerlerini kapatırsak MAVİ elde edilir.. |
ARA RENKLER
Renklerin farklı oranlarda kodlanmasıyla ara renkler elde edilir. Örneğin:
GRİ SKALA
Gri renk skalası için (siyahtan - beyaza) rgb(0,0,0) – fff rgb(255,255,255) arası eşit sayılar kullanılır. Örneğin ;
| rgb(68,68,68) | rgb(85,85,85) | rgb(153,153,153) | rgb(238,238,238) |
<table bgcolor="rgb(255,0,0)">
<body bgcolor="rgb(0,255,255)">
<div style="rgb(168,25,89)">
<hr color="rgb(45,45,56)">
Aşağıdaki bağlantı ile W3school sitesi üzerinde RGB Kod Hesaplayıcıyı inceleyebilir , istediğiniz rengi ve RGB tamsayı kodları ile hex kodlarını orada oluşturabilirsiniz.
W3school üzerinde RGB kod hesaplayıcı
Renk tonlarını rgb parametresi içerisinde , her renk için 3 yüzde oranı yazarak belirleyebiliriz. 3 oransırasıyla; KIRMIZI - YEŞİL - MAVİ ana renk miktarlarını ifade eder, Aralarına virgül konularak birbirinden ayrılır. Oranların alabileceği değerler 0% ile 100% arasında olur, Dolayısı ile her renk 100 farklı değer alır.
rgb( 50% , 80% , 15% )
Her renk 100farklı ton aldığına göre rgb tamsyılar kodlar ile en az
100x100x100= 1.000.000
farklı renk tonu elde edilir.
ANA RENKLER
| rgb(0%,0%,0%) | Tüm renkler kapatıldığında SİYAH elde edilir |
| rgb( 100%, 100%, 100%) | Tüm renkler full açılırsa BEYAZ elde edilir.. |
| rgb(100%, 0, 0) | Kırmızı rengi full yapıp , diğerlerini kapatırsak KIRMIZI elde edilir.. |
| rgb( 0, 100%, 0) | Yeşil rengi full yapıp , diğerlerini kapatırsak YEŞİL elde edilir.. |
| rgb(0, 0, 100%) | Mavi rengi full yapıp , diğerlerini kapatırsak MAVİ elde edilir.. |
ARA RENKLER
Renklerin farklı oranlarda kodlanmasıyla ara renkler elde edilir. Örneğin:
GRİ SKALA
Gri renk skalası için (siyahtan - beyaza) rgb(0,0,0) – fff rgb(100%,100%,100%) arası eşit oranlar kullanılır. Örneğin ;
| rgb(27%,27%,27%) | rgb(32%,32%,32%) | rgb(60%,60%,60%) | rgb(90%,90%,90%) |
<table bgcolor="rgb(100%,0,0)">
<body bgcolor="rgb(0,100%,100%)">
<div style="rgb(70%,10%,40%)">
<hr color="rgb(23%,23%,23%)">
RGB tamsayı yada oran ile renk belirlemede 4. sayı olarak opaklık değeri eklenebilir. Örneğin;
rgba (150,54,12,0.5)
rgba (60%,26%,5%,0.5%) gibi...
Örneğin aşağıda sol tarafta alfa değeri verilmemiş (ki bu durumda alfa 1 olur) renk ile sağ taraftaki aynı rengin alfa değeri uygulanmış görünümü arasındaki farkı görebilirsiniz. Tabi burada sayfa arka planının siyah olduğu için saydamlaşan renk sanki koyulaşıyormuş gibi görünür. Açık renk zeminlerde ise tam tersi renk açılıyormuş gibi görünür.
| Alfasız | Alfa'lı |
| rgb(56, 125, 222) | rgba(56, 125 ,222, .5) |
| rgb(50, 65, 0) | rgb(50, 65, 0, .5) |
Renklere opaklığın (alfa) eklenmesi ile daha fazla renk tonu elde edilir. Ayrıca renk saydamlaştığı için, renklendirilen elemanların altındaki diğer elemanlar görünecektir.
<table bgcolor="rgba(100%,0,0, .3)">
<body bgcolor="rgba(0,100%,100%, .7)">
<div style="rgba(150,153,66,.5)">
<hr color="rgba(85.99.52..8)">
Renkler, "RENK TONU (HUE)" , "DOYGUNLUK (SATURATION)" ve "IŞIK MİKTARI (LIGTHNESS)" üçlüsü ile de belirtilebilir. HSL kodlarda diğer renk belirleme kodlarına göre , hangi renk olduğunu tahmin etmek daha kolay olur. Ayrıca bir rengi biraz koyulaştırmak yada açmak daha basittir.
HSL(125,80%,15%)
HSL renk kodlarında;
HSL renk kodlarında ilk değer renk tonunu belirler. 0 ile 360 arasında değer alır.
0 360
Hue değerleri ;
olur.. Ara değerlerde ise iki ana renk arası geçiş renkleri olur.
Doygunluk anlamına gelir. Rengin açıklık , koyuluğu ayarlar. HSL renk kodlamasında 2. değerdir ve 0% ile 100% arasında değer alır. 100% olduğunda renk full olur. 50% oranında renk %50 grileşir ama renk görünür. 0% olduğunda ise renk görünmez. Bu değer değiştirilerek rengin daha açık yada daha koyu tonuna ulaşmak oldukça kolaydır.
Renkteki ışık miktarı anlamına gelir anlamına gelir. HSL renk kodlamasında 3. değerdir ve 0% ile 100% arasında değer alır. 0 olduğunda siyah, 100 olduğunda beyaz olur. Aşağıda yeşil (120) tonuna uygulanan saturation ve lightness örneklerini görebilirsiniz...
<table bgcolor="hsl(120,100%,50%)">
<body bgcolor="hsl(100,50%,50%)">
<div style="hsl(220,70%,30%)">
<hr color="hsl(320,10%,90%)">
HSL renk kodlarının sonuna bir değr daha eklenerek HSLa kod elde edilir. Sona eklenen kod alfa yani opaklıktır. Rengin saydamlığını ayarlar. 0 ile 1 arasında değer alır.
hsla(150, 50%, 50%,.5)
| Alfasız | Alfa'lı |
| hsl(150,50%,50%) | hsla(150,50%,50%,.5) |
Aşağıdaki bağlantı ile W3school sitesi üzerinde HSL Kod Hesaplayıcıyı inceleyebilir , istediğiniz rengi ve HSL kodlarını orada oluşturabilirsiniz.
W3school üzerinde HSL kod hesaplayıcı
Ayrıca medium.com üzerinde gördüğüm CSS’de HSL önemi — Yeni nesil renk kodu kullanımı makalesinide inceleyebilirsiniz...
Görüşmek üzere...
Toplam 25 Makale
Lütfen yorumlarınızda saygılı, yapıcı ve anlaşılır bir dil kullanın.
Küfür, hakaret ya da spam içerikler onaylanmaz.