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

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

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