HTML - RENK BELİRLEMEK

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..

İNGİLİZCE RENK İSİMLERİ

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..

Red

Green

Blue

Black

Orange

Pink

Beige

Aquamarine

BlueViolet

LightCyan

Daha fazla renk için HTML - CSS RENKLERİ ve KODLARI notuna bakabilirsiniz...

Kullanım örnekleri :

<table bgcolor="red">
<body bgcolor="orange">
<div style="color:darkviolet">
<hr color="blue">

RGB 3 HANELİ HEX RENK KODLARI (#49A)

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:

#0FF (AQUA)

#933 (BORDO)

#FF0 (SARI)

#0AF (AÇIK MAVİ)

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.

RGB ve RGBA Kullanım örnekleri :

<table bgcolor="#f00"></table> <!-- rgb -->
<body bgcolor="#0f0"></body> 
<div style="#ffa"></div>
<hr color="#aaa">
<div style="#ffa5"></div> <!-- rgba -->

RGB 6 HANELİ HEX RENK KODLARI

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

RED (Kırmızı)

00 ile FF arasında değer alır..

GREEN (Yeşil)

00 ile FF arasında değer alır..

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:

#00FFFF (AQUA)

#993333 (BORDO)

#FFFF00 (SARI)

#00AAFF (AÇIK MAVİ)

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.

Kullanım örnekleri :

<table bgcolor="#ff0000"></table> <!-- rrggbb -->
<body bgcolor="#00ff00"></body>
<div style="#ffffaa"></div>
<hr color="#aaaaaa">  
<p style="#ffffaa55"></p> <!-- rrggbbaa -->

RGB TAMSAYI RENK KODLARI

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.

RGB kodları , aslında 6 haneli hexadecimal renk kodlarının , her renk için ondalık sistemdeki karşılıklarının yazılmasıdır.

rgb( 160, 80, 128) = #A0 05 08

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:

rgb( 255, 255, 255) (AQUA)

rgb( 153, 51, 51) (BORDO)

rgb(255,255,0) (SARI)

rgb( 0, 170, 255) (AÇIK MAVİ)

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)

Kullanım örnekleri :

<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ı

RGB YÜZDE RENK KODLARI

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:

rgb( 100%, 100%, 100%) (AQUA)

rgb( 100%, 33%, 33%) (BORDO)

rgb(100%,100%,0) (SARI)

rgb( 0, 70%, 100%) (AÇIK MAVİ)

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%)

Kullanım örnekleri :

<table bgcolor="rgb(100%,0,0)">
<body bgcolor="rgb(0,100%,100%)">
<div style="rgb(70%,10%,40%)">
<hr color="rgb(23%,23%,23%)">

RGBA RENK KODLARI

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...

Bunun için rgb yerine rgba belirteci kullanılır.
A harfi alfa'yı yani opaklığı (saydamlık) belirler. 0 ile 1 arasında değer alır.
Alfa 0 yapıldığında renk görünmeyecektir. 1 yapıldığında ise tam doygunlukta görünür.
Noktalı değerler (0.5, 0.35 gibi) verilirken baştaki 0 kullanılmayabilir. .35 , .5 şeklinde yazılabilir. Bu, HTML ve CSS'te tüm birimler için geçerlidir.

Ö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.

Kullanım örnekleri :

<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)">

HSL ve HSLA RENK KODLARI

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;

değer renk tonunu , (hue)
değer renk doygunluğunu, (saturation)
değer renkteki ışık miktarını belirler. (lightness)

1. HUE (RENK TONU)

HSL renk kodlarında ilk değer renk tonunu belirler. 0 ile 360 arasında değer alır.

0 360

Hue değerleri ;

0 ve 360'ta --> KIRMIZI
120'de --> YEŞİL
240'ta --> MAVİ

olur.. Ara değerlerde ise iki ana renk arası geçiş renkleri olur.

2. SATURATION (DOYGUNLUK)

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.

3. LIGHTNESS(IŞIK MİKTARI)

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...

HUE (RENK TONU) DEĞİŞTİĞİNDE

hsl(120,100%,50%)

hsl(130,100%,50%)

hsl(140,100%,50%)

hsl(150,100%,50%)

hsl(160,100%,50%)

SATURATION (DOYGUNLUK) DEĞİŞTİĞİNDE

hsl(120,100%,50%)

hsl(120,90%,50%)

hsl(130,80%,50%)

hsl(140,70%,50%)

hsl(140,60%,50%)

LIGHTNESS (IŞIK MİKTARI) DEĞİŞTİĞİNDE

hsl(120,100%,50%)

hsl(120,100%,60%)

hsl(120,100%,70%)

hsl(120,100%,80%)

hsl(120,100%,90%)

Kullanım örnekleri :

<table bgcolor="hsl(120,100%,50%)">
<body bgcolor="hsl(100,50%,50%)">
<div style="hsl(220,70%,30%)">
<hr color="hsl(320,10%,90%)">

HSLA RENK KODLARI

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.