HTML’de RGB, HEX ve HSL Renk Kodları Kullanımı

YouTube'ta Takip Et →

Web siteleri hazırlarken kullandığınız renkleri farklı şekillerde gösterebilirsiniz. HTML’de renk değerleri renk isimleri de olabilir, RGB, HEX, HSL, RGBA, HSLA formatlarında da yazılabilir.

HTML’de Renk İsimleri

HTML dili, 140 farklı renk ismini destekliyor. Örneğin siyah anlamına gelen Black kelimesini, HTML kodları arasında kullanabiliyoruz.

HTML Arka Plan Rengi

Bir örnek olması açısından renk isimlerini arka planlarda nasıl kullandığımızı açıklayayım. Div etiketine background stili atıyoruz ve background’dan sonra yukarıda açıkladığım renk ismini yazıyoruz. Black, Orange, Red gibi bilinen renkler olduğu gibi çok göz önünde olmayan 140 farklı renk ismini yazarak o rengin görünmesini sağlayabiliyoruz.

<div style="background:black">Siyah</div>
<div style="background:DodgerBlue">Mavi</div>
<div style="background:Orange">Turuncu</div>
Siyah
Mavi
Turuncu

HTML Yazı Renkleri

Renk isimlerini sadece arka plan için değil yezı renklerini değiştirmek için de kullanmamız mümkün olabiliyor. Bunu da color stili ile yapıyoruz. Örnek olarak koyu kırmızı rengi veren DarkRed’i kullanalım.

<p style="color:DarkRed;">Sanagrafi</p>

Sanagrafi

HTML Border Rengi (Dış Çizgi Rengi)

Sayfanızdaki yazıların, kutuların, alanların ya da görsellerin dışına çizgi çekerken de renk isimlerini kullanabilirsiniz.

<p style="border:2px solid DodgerBlue;">Online HTML Dersleri</p>

Online HTML Dersleri

HTML’de Renk değerleri

HTML’de renk isimleri yerine renk değerlerini de kullanabileceğimizden bahsetmiştik. Örneğin kırmızı rengi red ismiyle kullanabiliyoruz. Bu rengin RGB, HEX ve HSL değerlerinde karşılıkları da var. Dilersek bu değerleri de kullanabiliyoruz.

HTML RGB Değerleri

RGB değerleri kırmızı, yeşil ve mavi rengi ifade eden red, green ve blue harflerinin baş harfleri. Her bir değer 0 ile 255 arasında bir değer alarak RGB rengi oluşturur. Mesela 0,0,0 değerleri siyahı, 255,255,255 değerleri beyazı oluşturur. Bu sayılar arasında kalan değerler ise o değer karşılığındaki renge tekabül eder.

<div style="background:rgb(255,255,255)"></div>

RGB’de aynı değerleri yanyana koyarak siyahın tonlarına ulaşabiliyoruz. Örneğin rgb (240,240,240) değerleri açık griyi ifade ederken, rgb (60,60,60) değerleri koyu griyi ifade ediyor.

<div style="background:rgb(0,0,0)"></div>
<div style="background:rgb(100,100,100)"></div>
<div style="background:rgb(200,200,200)"></div>
 
 
 

HTML Transparan Alpha Değeri (RGBA)

RGB’yi kullanırken nesnenin transparanlığını ayarlayabileceğimiz bir alpha değeri ekleriz. Bu değer 0 ile 1 arasında ve aralardaki değerler transparanlık düzeyini ifade eder. 0 değeri tamamen transparan, 1 değeri ise 100% görünür anlamına gelir. Mesela nesneye 50% transparanlık vermek isterseniz 0.5 değerini kullanırsınız.

Bir örnekle açıklayalım ve siyah renge 40%’lık bir transparan verelim. Bu rengin yüzde 50 transparan haline ise aşağıdaki şekilde ulaşabiliriz.

<div style="background:rgba(0,0,0,0.4)"></div>

HEX Değeri

HTML’de hexadecimal değerini kullanmak da farklı bir yöntem. HTML’de HEX kodları diyoruz bu değerlere ve renk ile ilgili işlem yapabileceğiniz tüm programlarda karşınıza çıkar mutlaka.

RGB’de nasıl ki 0 ile 255 renk değerleri arasında, HEX kodları da 00 ile ff değerleri arasında seyreden bir renk dizisidir. #rrggbb şeklinde bir şablonu var. r harfi ile gösterilen ilk değer kırmızıyı, ikinci yeşili ve üçüncü değer maviyi ifade eder. Örneğin; #000000 değeri siyaha, #ffffff değeri beyaza, #ff0000 değeri kırmızıya, #0000ff değeri maviye karşılık gelir.

Siyah tonları elde edebilmek için renk gruplarının aynı olması gerekir. Yukarıda örneğini verdiğimiz gibi siyah rengi elde edebilmek için #000000 değerine ihtiyacımız vardır. Örneğin koyu gri tonu için #3c3c3c, açık gri için #f0f0f0 gibi değerler renk tonlarında farklılık yaratır.

HTML HSL Değeri

HSL; Hue, Saturation ve Lightness değerlerinden oluşur. Bu değerlerle renge ulaşmayı hedefler. Farklı parametrelerle farklı renkler elde edilir. Ancak web sitesi tasarlarken daha çok HEX kodu, Adobe Photoshop gibi grafik programlarında daha çok RGB kodları kullanılır. Ama her değerin de kullanılabileceği aklınızda dursun.

HSLA değeri ile RGBA’de yaptığımız gibi transparanlık değerini ayarlayabiliyoruz.

<div style="background:hsla(9, 100%, 64%, 0.2)"></div>