Hizmetlerimiz hakkında bilgi almak için tıklayın.

HTML renkleri, önceden tanımlanmış renk adlarıyla veya RGB, HEX, HSL, RGBA veya HSLA değerleriyle belirtilir.

Renk Adları

HTML'de, bir renk adı kullanılarak bir renk belirtilebilir:

1. Red
2. Orange
3. Blue
4. Green
5. Gray
6. LightGray
7. Violet
8. SlateBlue

Arkaplan Renkleri

HTML öğeleri için arka plan rengini ayarlayabilirsiniz:

Örnek:

 <h4 style="background-color:red;">enesalp.com.tr</h4>
 <p style="background-color:green">enesalp.com.tr bir web tasarım, seo hizmetleri, reklam hizmetleri, sosyal medya hizmetleri,
 yazılım ve programlama hizmetleri hakkında hizmet veren bir websitesidir. Ayrıca blog bölümünde ise dersler bulunmaktadır,
  dersler ücretsizdir.</p>
 

Görünüm:

Yazı Renkleri

Metnin rengini ayarlayabilirsiniz:

Örnek:

<h1 style="color:yellow;">Bu başlığın rengi sarı. </h1>
<p style="color:green;">Bu paragrafın rengi yeşil. </p>
<p style="color:red;">Bu paragrafın rengi kırmızı. </p>

Görünüm:

Kenarlık renkleri

Kenarlıkların rengini ayarlayabilirsiniz:

Örnek:

<h1 style="border:2px solid red;">Kenarlık rengi kırmızı</h1>
<h1 style="border:2px solid blue;">Kenarlık rengi mavi</h1>
<h1 style="border:2px solid orange;">Kenarlık rengi turuncu</h1>

Görünüm:

Renk Değerleri

HTML'de renkler, RGB değerleri, HEX değerleri, HSL değerleri, RGBA değerleri ve HSLA değerleri kullanılarak da belirtilebilir.

Aşağıdaki üç <div> öğesinin arka plan rengi RGB, HEX ve HSL değerleriyle ayarlanır:

Aşağıdaki iki <div> öğesinin arka plan rengi, RGBA ve HSLA değerleriyle ayarlanmıştır (burada %50 şeffaflığa sahibiz):

Şeffaflık derecesini ayarlamak için [hsla(9, 100%, 64%, 0.5)] 0.5 yazan bölümde ayarlamalar yapacağız, sıfıra yakın değerler şeffaflık derecesini arttırır, örneğin 1 verilseydi, şeffaff olmayacaktı. 0.3 %70 oranında şeffaflık anlamına gelecekti.

Siz de deneyin:

<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>
<div style="background-color:rgba(255, 99, 71, 0.5);margin:10px 0;">rgba(255, 99, 71, 0.5)</div>
<div style="background-color:hsla(9, 100%, 64%, 0.5);margin:10px 0;">hsla(9, 100%, 64%, 0.5)</div>

RGB & RGBA Renk Değerleri

Bir RGB renk değeri, KIRMIZI, YEŞİL ve MAVİ ışık kaynaklarını temsil eder.

Bir RGBA renk değeri, opaklık ile RGB'nin bir uzantısıdır.

RGB Renk Değeri

HTML'de bir renk, şu formül kullanılarak bir RGB değeri olarak belirtilebilir:

rgb(red, green, blue)

Her parametre (kırmızı, yeşil ve mavi), rengin yoğunluğunu 0 ile 255 arasında bir değerle tanımlar.

Bu, 256 x 256 x 256 = 16777216 olası renk olduğu anlamına gelir!

Örneğin, rgb(255, 0, 0) kırmızı olarak görüntülenir çünkü kırmızı en yüksek değerine (255) ve diğer ikisi (yeşil ve mavi) 0'a ayarlanmıştır.

Başka bir örnek, rgb(0, 255, 0) yeşil olarak gösterilir, çünkü yeşil en yüksek değerine (255) ve diğer ikisi (kırmızı ve mavi) 0'a ayarlıdır.

Siyahı görüntülemek için tüm renk parametrelerini şu şekilde 0 olarak ayarlayın: rgb(0, 0, 0).

Beyazı görüntülemek için tüm renk parametrelerini 255 olarak ayarlayın, örneğin: rgb(255, 255, 255).

RGBA Renk Değeri

Bir renk değerine rgba(255, 0, 0, 0.5) parametresi tanımladığımızda opacity değeri ayarlamış oluruz, bu parametreler 0(tamamen yok olur) ile 1 arasındadır.

Örneğin:

1. "background-color:rgba(255, 0, 0, 0);" arkaplan kırmızıdır fakat görünmezdir.


2. "background-color:rgba(255, 0, 0, 0.1);" arkaplan kırmızıdır %90 oranında transparent.


3. "background-color:rgba(255, 0, 0, 0.2);" arkaplan kırmızıdır %80 oranında transparent.


4. "background-color:rgba(255, 0, 0, 0.3);" arkaplan kırmızıdır %70 oranında transparent.


5. "background-color:rgba(255, 0, 0, 0.4);" arkaplan kırmızıdır %60 oranında transparent.


6. "background-color:rgba(255, 0, 0, 0.5);" arkaplan kırmızıdır %50 oranında transparent.


7. "background-color:rgba(255, 0, 0, 0.6);" arkaplan kırmızıdır %40 oranında transparent.


8. "background-color:rgba(255, 0, 0, 0.7);" arkaplan kırmızıdır %30 oranında transparent.


9. "background-color:rgba(255, 0, 0, 0.8);" arkaplan kırmızıdır %20 oranında transparent.


10. "background-color:rgba(255, 0, 0, 0.9);" arkaplan kırmızıdır %10 oranında transparent.


11. "background-color:rgba(255, 0, 0, 1);" arkaplan kırmızıdır transparent değeri yoktur.

HEX Renk Değeri

Onaltılık bir renk şununla belirtilir: #RRGGBB, burada RR (kırmızı), GG (yeşil) ve BB (mavi) onaltılık tamsayılar rengin bileşenlerini belirtir.

HTML'de, formda onaltılık bir değer kullanılarak bir renk belirtilebilir:

#rrggbb

Burada rr (kırmızı), gg (yeşil) ve bb (mavi), 00 ile ff arasındaki onaltılık değerlerdir (ondalık 0-255 ile aynı).

Örneğin, #ff0000 kırmızı olarak görüntülenir çünkü kırmızı en yüksek değerine (ff) ve diğer ikisi (yeşil ve mavi) 00'a ayarlanmıştır.

Başka bir örnek, #00ff00 yeşil olarak görüntülenir çünkü yeşil en yüksek değerine (ff) ve diğer ikisi (kırmızı ve mavi) 00'a ayarlanmıştır.

Siyahı görüntülemek için tüm renk parametrelerini 00 olarak ayarlayın, örneğin: #000000.

Beyazı görüntülemek için tüm renk parametrelerini ff olarak ayarlayın, örneğin: #ffffff.

HSL ve HSLA Renk Değerleri

HSL, ton, doygunluk ve parlaklık anlamına gelir.

HSLA renk değerleri, opaklık parametresi olarak HSL'nin bir uzantısıdır.

HSL Renk Değerleri

HTML'de bir renk, şu şekilde ton, doygunluk ve parlaklık (HSL) kullanılarak belirtilebilir:

Hue: Ton, renk tekerleğinde 0 ile 360 arasındaki bir derecedir. 0 kırmızı, 120 yeşil ve 240 mavidir.

Saturation: Doygunluk bir yüzde değeridir. %0, grinin bir tonu ve %100 tam renk anlamına gelir.

Lightness: Parlaklıkta bir yüzde değeridir. %0 siyah ve %100 beyazdır.

Saturation (Doygunluk)

->Doygunluk, bir rengin yoğunluğu olarak tanımlanabilir.

-> %100 saf renktir, grinin tonu yoktur.

->%50, %50 gridir, ancak yine de rengi görebilirsiniz.

->%0 tamamen gridir; artık rengi göremezsiniz.

Lightness (Parlaklık)

Bir rengin açıklığı, renge ne kadar ışık vermek istediğiniz olarak tanımlanabilir;

->0% burada hiç ışık yok. (siyah.)

->50% burada %50 ışık var. (ne karanlık ne aydınlık.)

->100% burada tam parlaklık. (beyaz.)

Grinin Tonları

Gri tonları genellikle ton ve doygunluğu 0'a ayarlayarak ve daha koyu/açık gölgeler elde etmek için açıklığı %0'dan %100'e ayarlayarak tanımlanır:

HSLA Renk Değerleri

HSLA renk değerleri, bir rengin opaklığını belirten bir Alpha kanalıyla HSL renk değerlerinin bir uzantısıdır.

Bir HSLA renk değeri şu şekilde belirtilir:

hsla(hue, saturation, lightness, alpha)

alpha parametresi 0.0 (tamamen şeffaf) ile 1.0 (hiç şeffaf değil) arasında bir sayıdır:

Bu bölümde neler öğrendik?

-> color: yazı rengini belirler.

-> background-color: arkaplan rengini belirler.

-> border-color: kenarlık rengini belirler.

-> bir renk adı kullanarak style belirtebiliriz.

-> RGB kullanarak kırmızı, yeşil ve mavi renk yoğunluğu arasında renk seçimi.

-> RGBA kullanmak, opacity değerini ayarlar.

-> HEX #RRGGBB, RR (kırmızı), GG (yeşil) ve BB (mavi) onaltılık tamsayılar rengin bileşenlerini belirtir.

-> HSL ton, doygunluk ve parlaklık belirler.

-> HSLA ton, doygunluk, parlaklık ve opaklık belirler.