CSS'de Renkler

Oluşturduğumuz web sitemizi daha estetik hale getirmek için renkleri kullanılırız.

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 İsimleri

<div style="background-color:tomato">Tomato</div>
<div style="background-color:mediumseagreen">MediumSeaGreen</div>
<div style="background-color:orange">Orange</div>
<div style="background-color:gray">Gray</div>
<div style="background-color:violet">Violet</div>
<div style="background-color:dodgerblue">DodgerBlue</div>
<div style="background-color:lightgray; color:#444444">LightGray</div>
<div style="background-color:slateblue">SlateBlue</div>

HTML standart olarak 140 adet renk kodunu desteklemektedir. Bu renk kodlarının neler olduğuna bakmak isterseniz buraya tıklayınız.

# background-color | Arkaplan Rengi

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 parametresi ile etiketlerimizin arkaplanına istediğimiz renkleri verebiliriz.

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

# color | Yazı Rengi

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.

<p style="color:Tomato;">Merhaba Dünya</p>
<p style="color:DodgerBlue;">HTML Text-color Örneği</p>
<p style="color:MediumSeaGreen;">eminylmz.dev ile CSS öğreniyorum !</p>

# border-color | Çerçeve Rengi

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

<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;">eminylmz.dev ile CSS öğreniyorum !</p>

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

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.