HTML Dersleri 8 – Renkler (Colors)

HTML Renkler

Merhaba değerli Kodlama Vakti okuyucuları , geçen dersimizde Stiller (Styles) adlı yazımızda  HTML’de Stil kullanımını öğrenmiştik. Önceki dersimizi incelemediyseniz HTML Dersleri 7 – Stiller (Styles) linkine tıklayarak ulaşabilirsiniz. Bu dersimizde HTML Renkler konusuna gözatıp, HTML’de Renklerin kullanımını öğreneceğiz.

Oluşturduğumuz web sitemizi daha estetik hale getirmek için renkleri kullanılırız. Aynı bir ressamın eserini paletteki renklerle şenlendirdiği gibi bizlerde kendi web sayfalarımızı renkler ile göze hoş gelecek hale getirebiliriz.

HTML’de Renkler, önceden tanımlanmış olan renk adları veya RGB, HEX, HSL, RGBA, HSLA gibi renk değerleri kullanarak belirtilir.Yani istersek rengi ingilizce ismi ile belirtebilir yada bilgisayar ortamında ki renk paletleri ile renklerimizi oluşturabiliriz.

RENK İSİMLERİ

HTML’de bir rengin adı kullanılarak belirtilebilir. Bunlardan bazıları şu şekildedir ;

Tomato
MediumSeaGreen
Orange
Gray
Violet
DodgerBlue
LightGray
SlateBlue
HTML standart olarak 140 adet renk kodunu desteklemektedir. Bu renk kodlarının neler olduğuna bakmak isterseniz buraya tıklayınız.

Arkaplan Rengi | background-color

HTML‘de etiketlerin arkaplan renklerini değiştirebilirsiniz. Bunun için önceki dersimizde öğrenmiş olduğumuz style parametresi ile mümkündür. Style parametresi içerisine background-color niteliği ile etiketlerimizin arkaplanına istediğimiz renkleri verebiliriz.

Background-color Örneği;

<p style="background-color:DodgerBlue;">HTML Background-color Örneği</p>
<p style="background-color:MediumSeaGreen;">HTML'de arkaplan değiştirme</p>

Background-color Çıktısı ;

HTML Background-color Örneği

HTML’de arkaplan değiştirme

Yazı Rengi | color

HTML’de yazılarımızın rengini değiştirmemiz mümkündür. Yine etiketimizde ki style parametresi içerisine color niteliğini yazarak yazılarımızın renklerini değiştirebiliriz.

Color Örneği;

<p style="color:Tomato;">Merhaba Dünya</p>
<p style="color:DodgerBlue;">HTML Text-color Örneği</p>
<p style="color:MediumSeaGreen;">Kodlama Vakti ile kısa zamanda kodlama öğreniyorum !</p>

Color Çıktısı ; 

Merhaba Dünya

HTML Text-color Örneği

Kodlama Vakti ile kısa zamanda kodlama öğreniyorum !

Çerçeve Rengi | border-color

HTML’de etiketlerimizin çerçeve renklerini değiştirebiliriz. Etiketin style parametresine border-color yazarak çerçeve renklerini düzenleyebiliriz.

Border-color Örneği;

<p style="border:2px solid Tomato;">Merhaba Dünya</p>
<p style="border:2px solid DodgerBlue;">HTML Text-color Örneği</p>
<p style="border:2px solid MediumSeaGreen;">Kodlama Vakti ile kısa zamanda kodlama öğreniyorum !</p>

Border-color Çıktısı ;

Merhaba Dünya

HTML Text-color Örneği

Kodlama Vakti ile kısa zamanda kodlama öğreniyorum !

Renk Değerleri

HTML’de renkler RGB , HEX , HSL , RGBA ve HSLA değerleri kullanılarak da belirtilebilir:
Tomato rengine bakalım ;

Renk Değerleri Örneği ;

<div style="background-color:rgb(255, 99, 71);margin:10px 0;">rgb(255, 99, 71)</div>
<div style="background-color:#ff6347;margin:10px 0;">#ff6347</div>
<div style="background-color:hsl(9, 100%, 64%);margin:10px 0;">hsl(9, 100%, 64%)</div>

Renk Değerleri Çıktısı ;

rgb(255, 99, 71)
#ff6347
hsl(9, 100%, 64%)

Yukarda ki 3 değerde Tomato renginin farklı birimlerde ki değerleridir. Bu değerler ile de renklerinizi oluşturabilirsiniz.

Şimdi bu değerlerin kullanımına bakalım ;

RGB Değeri

HTML’de, aşağıdaki formülü kullanarak bir renk RGB değeri olarak belirtilebilir. RGB açılımı Red Green Blue renklerinin kısaltılmış halidir ve bu renklerin karışımı ile renkleri elde ederiz.

rgb(red, green, blue)

Tüm parametreler için (kırmızı , yeşil , mavi) rengin yoğunluğu 0 ile 255 arasında bir değer ile tanımlanır.

Örnek vermek gerekirse ; rgb(255,0,0) değeri kırmızı rengi vermektedir. Çünkü kırmızının renk yoğunluğu 255 diğerleri ise 0’dır.

Siyah rengi elde etmek için tüm renkleri 0 olarak ayarlamalıyız. rgb(0,0,0);

Beyaz renk için ise tüm renkleri 255 olarak ayarlamalıyız. rgb(255,255,255);

RGB Örneği ;

<div style="background-color:rgb(255, 0, 0);">rgb(255, 0, 0)</div>
<div style="background-color:rgb(255, 165, 0);">rgb(255, 165, 0)</div>
<div style="background-color:rgb(0, 0, 255);">rgb(0, 0, 255)</div>
<div style="background-color:rgb(238, 130, 238);">rgb(238, 130, 238)</div>
<div style="background-color:rgb(106, 90, 205);">rgb(106, 90, 205)</div>
<div style="background-color:rgb(60, 179, 113);">rgb(60, 179, 113)</div>

RGB Örneği Çıktısı ;

rgb(255, 0, 0)
rgb(255, 165, 0)
rgb(0, 0, 255)
rgb(238, 130, 238)
rgb(106, 90, 205)
rgb(60, 179, 113)

HEX Değeri

HTML’de, onaltılık değerler kullanılarak bir renk belirtilebilir. Bunlara HEX değeri deriz ve programcıların en çok kullandığı renk değeridir.

#rrggbb

RGB değerinde ki gibi yine kırmızı (red) , yeşil (green) , mavi (blue) renklerinin baş harflerinin onaltılık sistemde kodlanmış halidir. Değer aralıkları 00 ve FF arasındadır. Bu aralıklar bilgisayar ortamında onaltılık sisteme karşılık gelmektedir.

Örnek vermek gerekirse , #ff0000 değeri kırmızı rengini vermektedir.

HEX Örneği ;

<div style="background-color:#6a5acd;">#6a5acd</div>
<div style="background-color:#3cb371;">#3cb371</div>
<div style="background-color:#0000ff;">#0000ff</div>
<div style="background-color:#ee82ee;">#ee82ee</div>
<div style="background-color:#ffa500;">#ffa500</div>
<div style="background-color:#ff0000;">#ff0000</div>

HEX Örneği Çıktısı ;

#6a5acd
#3cb371
#0000ff
#ee82ee
#ffa500
#ff0000
HTML’deki diğer renk değerleri ise HSL , RGBA ve HSLA değerleridir. Bu renk değerleri çok sık kullanılmamakla birlikte bazı zamanlar işinize yarayabilir.

Tebrikler! Bu derste  HTML’deki Renk değerlerini , sitenizde ki yazıların renkleri , arka plan renklerini , çerçeve renklerini oluşturmayı öğrendiniz. Kodlama Vakti ile kodlama hiç bu kadar kolay olmamıştı.

HTML Derslerinin sekizinci kısmı olan dersimizde , HTML’de Renk (Color) Kullanımını  öğrendik. Ders sonunda ki testimize katılarak öğrendiklerinizi pekiştirebilirsiniz. Derslerimiz hoşunuza gittiyse eğer paylaş butonlarından sevdiklerinizle paylaşabilirsiniz !

Test’e katıl öğrendiklerini pekiştir !

TESTE BAŞLAMAK İÇİN TIKLAYINIZ!

Bir sonraki derse  “HTML Dersleri 9 – CSS” geçmek için tıklayınız !

Beğendiysen makaleyi paylaşarak destek olabilirsiniz!

Bir cevap yazın

E-posta hesabınız yayımlanmayacak. Gerekli alanlar * ile işaretlenmişlerdir