HTML Eğitimi

HTML ANA SAYFA HTML'ye Giriş HTML Düzenleyiciler HTML Temel HTML Öğeleri HTML Özellikleri HTML Başlıkları HTML Paragrafları HTML Stilleri HTML Biçimlendirme HTML Alıntılar HTML Yorumları HTML Renkleri HTML CSS'si HTML Bağlantıları HTML Görselleri HTML Sık Kullanılan Simgesi HTML Tabloları HTML Listeleri HTML Bloğu ve Satır İçi HTML Sınıfları HTML Kimliği HTML İç Çerçeveleri HTML JavaScript'i HTML Dosya Yolları HTML Başlığı HTML Düzeni HTML Duyarlı HTML Bilgisayar Kodu HTML Semantiği HTML Stil Kılavuzu HTML Varlıkları HTML Sembolleri HTML Emojileri HTML Karakter Seti HTML URL Kodlaması HTML'ye karşı XHTML

HTML Formları

HTML Formları HTML Formu Nitelikleri HTML Form Öğeleri HTML Giriş Türleri HTML Girdi Nitelikleri HTML Giriş Formu Nitelikleri

HTML Grafikleri

HTML Kanvas HTML SVG'si

HTML Ortamı

HTML Ortamı HTML Videosu HTML Ses HTML Eklentileri HTML YouTube

HTML API'leri

HTML Coğrafi Konum HTML Sürükle/Bırak HTML Web Depolama HTML Web Çalışanları HTML ÖAM

HTML Örnekleri

HTML Örnekleri HTML Testi HTML Alıştırmaları HTML Sertifikası HTML Özeti HTML Erişilebilirliği

HTML Referansları

HTML Etiket Listesi HTML Özellikleri HTML Genel Nitelikleri HTML Tarayıcı Desteği HTML Olayları HTML Renkleri HTML Kanvas HTML Ses/Video HTML Doktipleri HTML Karakter Kümeleri HTML URL Kodlaması HTML Dil Kodları HTTP Mesajları HTTP Yöntemleri PX'den EM'ye Dönüştürücü Klavye kısayolları

HTML HSL ve HSLA Renkleri


HSL, ton, doygunluk ve hafiflik anlamına gelir.

HSLA renk değerleri, Alfa kanalı (opaklık) ile HSL'nin bir uzantısıdır.


HSL Renk Değerleri

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

hsl( ton , doygunluk , hafiflik )

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

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

Açıklık da bir yüzde değeridir, %0 siyahtır ve %100 beyazdır.

Aşağıdaki HSL değerlerini karıştırarak deney yapın:

hsl(0, %100, %50)

TON

0

DOYMA

100%

HAFİFLİK

%50

Örnek

hsl(0, 100%, 50%)
hsl(240, 100%, 50%)
hsl(147, 50%, 47%)
hsl(300, 76%, 72%)
hsl(39, 100%, 50%)
hsl(248, 53%, 58%)


Doyma

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

%100 saf renktir, gri tonları yoktur

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

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

Örnek

hsl(0, 100%, 50%)
hsl(0, 80%, 50%)
hsl(0, 60%, 50%)
hsl(0, 40%, 50%)
hsl(0, 20%, 50%)
hsl(0, 0%, 50%)


hafiflik

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

Örnek

hsl(0, 100%, 0%)
hsl(0, 100%, 25%)
hsl(0, 100%, 50%)
hsl(0, 100%, 75%)
hsl(0, 100%, 90%)
hsl(0, 100%, 100%)


Grinin tonları

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

Örnek

hsl(0, 0%, 20%)
hsl(0, 0%, 30%)
hsl(0, 0%, 40%)
hsl(0, 0%, 60%)
hsl(0, 0%, 70%)
hsl(0, 0%, 90%)


HSLA Renk Değerleri

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

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

hsla( ton, doygunluk , hafiflik, alfa )

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

Aşağıdaki HSLA değerlerini karıştırarak deney yapın:

hsla (0, %100, %50, 0,5)

TON

0

DOYMA

100%

HAFİFLİK

%50

ALFA

0,5

Örnek

hsla(9, 100%, 64%, 0)
hsla(9, 100%, 64%, 0.2)
hsla(9, 100%, 64%, 0.4)
hsla(9, 100%, 64%, 0.6)
hsla(9, 100%, 64%, 0.8)
hsla(9, 100%, 64%, 1)