HTML Renk Yapıları!

#HTML

HTML renkleri, renklerin adlarıyla yada RGB, HEX, HSL, RGBA, HSLA kullanım türleriyle ifade edilir.

HTML Renkleri
HTML Renkleri

HTML renkleri önceden tanımlanmış renk adları veya RGB, HEX, HSL, RGBA, HSLA değerleri kullanılarak belirlenir.

Renk İsimleri

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

<h1 style="background-color:Tomato;">Tomato</h1>
<h1 style="background-color:Orange;">Orange</h1>
<h1 style="background-color:DodgerBlue;">DodgerBlue</h1>
<h1 style="background-color:MediumSeaGreen;">MediumSeaGreen</h1>
<h1 style="background-color:Gray;">Gray</h1>
<h1 style="background-color:SlateBlue;">SlateBlue</h1>
<h1 style="background-color:Violet;">Violet</h1>
<h1 style="background-color:LightGray;">LightGray</h1>

Çıktısı;

See the Pen renkler by ArmyYazılım (@armyyazilim) on CodePen.

HTML, 140 standart renk adını destekler .

Arka plan rengi

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

<h1 style="background-color:DodgerBlue;">Merhaba Dünya</h1>
<p style="background-color:Tomato;">Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır. 1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p>

Çıktısı;

See the Pen arkaplan rengi by ArmyYazılım (@armyyazilim) on CodePen.

Metin Rengi

Metnin rengini ayarlayabilirsiniz:

<h1 style="color:Tomato;">Merhaba Dünya</h1>
<p style="color:DodgerBlue;">Lorem Ipsum, dizgi ve baskı endüstrisinde kullanılan mıgır metinlerdir. Lorem Ipsum, adı bilinmeyen bir matbaacının bir hurufat numune kitabı oluşturmak üzere bir yazı galerisini alarak karıştırdığı 1500'lerden beri endüstri standardı sahte metinler olarak kullanılmıştır. Beşyüz yıl boyunca varlığını sürdürmekle kalmamış, aynı zamanda pek değişmeden elektronik dizgiye de sıçramıştır.</p>
<p style="color:MediumSeaGreen;">1960'larda Lorem Ipsum pasajları da içeren Letraset yapraklarının yayınlanması ile ve yakın zamanda Aldus PageMaker gibi Lorem Ipsum sürümleri içeren masaüstü yayıncılık yazılımları ile popüler olmuştur.</p>

Çıktısı;

See the Pen text color by ArmyYazılım (@armyyazilim) on CodePen.

Border rengi

Kenarlıkların rengini ayarlayabilirsiniz:

<h1 style="border:2px solid Tomato;">Merhaba Dünya</h1>
<h1 style="border:2px solid DodgerBlue;">Merhaba Dünya</h1>
<h1 style="border:2px solid Violet;">Merhaba Dünya</h1>

Çıktısı;

See the Pen border color by ArmyYazılım (@armyyazilim) on CodePen.

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:

” Tomato” renk adıyla aynı:

<p>Tomato ile aynı renk kodları:</p>

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

<p>Tomato ile aynı renk kodları, ancak 50% saydam:</p>
<h1 style="background-color:rgba(255, 99, 71, 0.5);">rgba(255, 99, 71, 0.5)</h1>
<h1 style="background-color:hsla(9, 100%, 64%, 0.5);">hsla(9, 100%, 64%, 0.5)</h1>

Çıktısı;

See the Pen renk kodları by ArmyYazılım (@armyyazilim) on CodePen.

RGB Değeri

HTML’de, bu formül kullanılarak bir renk RGB değeri olarak belirtilebilir:

rgb ( kırmızı, yeşil , mavi )

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

Örneğin, rgb (255, 0, 0) kırmızı olarak gösterilir, çünkü kırmızı en yüksek değerine (255) ve diğerleri 0’a ayarlanır.

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

Beyazı görüntülemek için tüm renk parametrelerini 255’e ayarlayın, bunun gibi: rgb (255, 255, 255).

Örnek;

See the Pen rgb kullanım by ArmyYazılım (@armyyazilim) on CodePen.

Gri tonları, tüm 3 ışık kaynağı için eşit değerler kullanılarak tanımlanır:

See the Pen gri by ArmyYazılım (@armyyazilim) on CodePen.

HEX Değeri

HTML’de, formdaki onaltılık bir değer kullanılarak bir renk belirtilebilir:

#rrggbb

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österilir, çünkü kırmızı en yüksek değere (ff) ve diğerleri en düşük değere (00) ayarlanır.

Örnek;

See the Pen hex by ArmyYazılım (@armyyazilim) on CodePen.

Gri tonları, tüm 3 ışık kaynağı için eşit değerler kullanılarak tanımlanır:

See the Pen hex grey by ArmyYazılım (@armyyazilim) on CodePen.

HSL Değeri

HTML’de, bir renk tonu, doygunluk ve açıklık (HSL) kullanılarak belirtilebilir:

hsl ( ton , doygunluk , hafiflik )

Ton renk tekerleğinde 0 – 360 arasında bir derecedir. 0 kırmızı, 120 yeşil ve 240 mavidir.

Doygunluk, yüzde değeridir,% 0, gri bir gölge anlamına gelir ve% 100, tam renktir.

Hafiflik de bir yüzde,% 0 siyah,% 50 ne açık veya koyu,% 100 beyaz

Örnek;

See the Pen hsl by ArmyYazılım (@armyyazilim) on CodePen.

doygunluk

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

% 100 saf renk, gri tonları yok

% 50 gri,% 50 gri, ancak yine de rengi görebilirsiniz.

% 0 tamamen gri, artık rengi göremiyorsunuz.

Örnek;

See the Pen gri hsl by ArmyYazılım (@armyyazilim) on CodePen.

hafiflik

Bir rengin açıklığı, renge ne kadar ışık vermek istediğiniz olarak tanımlanabilir; buradaki% 0, hiçbir ışık yok (siyah),% 50,% 50 ışık (ne karanlık veya açık),% 100 tam ışık (beyaz) anlamına gelir.

Örnek;

See the Pen hsl hafiflik by ArmyYazılım (@armyyazilim) on CodePen.

Gri tonları genellikle ton ve doygunluğun 0 olarak ayarlanmasıyla tanımlanır ve açıklığı daha koyu / açık tonları elde etmek için açıklığı% 0 ile% 100 arasında ayarlar:

Örnek;

See the Pen hsl gri by ArmyYazılım (@armyyazilim) on CodePen.

RGBA Değeri

RGBA renk değerleri, rengin opaklığını belirten alfa kanallı RGB renk değerlerinin bir uzantısıdır.

Bir RGBA renk değeri ile belirtilir:

rgba ( kırmızı, yeşil , mavi, alfa )

Alpha parametresi 0.0 (tamamen saydam) ile 1.0 (saydam değil) arasında bir sayıdır:

See the Pen saydam renkler by ArmyYazılım (@armyyazilim) on CodePen.

HSLA Değeri

HSLA renk değerleri, bir renk için opaklığı belirten bir alfa kanalına sahip HSL renk değerlerinin bir uzantısıdır.

Bir HSLA renk değeri ile belirtilir:

hsla ( ton, doygunluk , hafiflik, alfa )

Alpha parametresi 0.0 (tamamen saydam) ile 1.0 (saydam değil) arasında bir sayıdır:

See the Pen hsla renkler by ArmyYazılım (@armyyazilim) on CodePen.

İlginizi çekebilir…

WordPress Kişisel Blog Temaları! (Ücretli – Ücretsiz)

Bu makaleyi beğendiyseniz, lütfen WordPress video eğiticileri için YouTube Kanalımıza abone olun . Bizi Twitter ve İnstagram‘da da bulabilirsiniz …


“HTML Renk Yapıları!” için bir cevap

  1. Sevgi Bircan dedi ki:

    Hsl değerlerini bilmiyordum teşekkür ederim.

Bir cevap yazın

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

İçerik Metası
İbrahim Bozkurt ////////