CSS Renkleri

CSS destekler 140'dan fazla renk adıve ondalık değer, RGB değeri, RGBA değeri, HSL değeri, HSLA değeri ve şeffaflık içerir.

RGBA renk

RGBA renk değeri, alpha kanalına sahip RGB renk değerlerinin genişletilmiş versiyonudur - bu kanal, renkin şeffaflığını belirler.

RGBA renk değeri şu şekilde tanımlanır: rgba(kırmızı, yeşil, mavi, alfa) alfa Değerler 0.0 (tamamen şeffaf) ve 1.0 (tamamen şeffaf değil) arasında sayısal değerlerdir.

rgba(255, 0, 0, 0.2);
rgba(255, 0, 0, 0.4);
rgba(255, 0, 0, 0.6);
rgba(255, 0, 0, 0.8);

Aşağıdaki örnekler farklı RGBA renklerini tanımlar:

Örnek

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* Şeffaflıkla kırmızı */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* Şeffaflıkla yeşil */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* Şeffaflıkla mavi */

Kişisel Olarak Deneyin

HSL renk

HSL, renk tonu, doygunluk ve parlatıklık (Hue, Saturation ve Lightness) anlamına gelir.

HSL renk değeri şu şekilde tanımlanır: hsl(hue, saturation, lightness).

Renk tonu, renk çarkındaki derecedir (0'dan 360'e):

  • 0 (veya 360) kırmızı renktedir
  • 120 yeşil renktedir
  • 240 mavi renktedir

Doğal renk de bir yüzdelik değerdir: 100% tam renktir.

Parlaklık da bir yüzdelik değerdir: 0% koyu renktir (siyah) ve 100% beyazdır.

hsl(0, 100%, 30%);
hsl(0, 100%, 50%);
hsl(0, 100%, 70%);
hsl(0, 100%, 90%);

Aşağıdaki örnek, farklı HSL renklerini tanımlar:

Örnek

#p1 {arka plan rengi: hsl(120, 100%, 50%);}  /* Yeşil */
#p2 {arka plan rengi: hsl(120, 100%, 75%);}  /* Açık yeşil */
#p3 {arka plan rengi: hsl(120, 100%, 25%);}  /* Koyu yeşil */
#p4 {arka plan rengi: hsl(120, 60%, 70%);}   /* Açık mint renk */

Kişisel Olarak Deneyin

HSLA renkleri

HSLA renk değerleri, Alpha kanalı içeren HSL renk değerlerinin genişletilmiş halidir - renkin şeffaflığını belirler.

HSLA renk değerleri, aşağıdaki parametrelerle belirlenir: hsla(harita, doygunluk, aydınlatma, alfa)，ve alfa parametresi şeffaflığı tanımlar. Alfa parametresi, 0.0 (tamamen şeffaf) ve 1.0 (tamamen mat) arasında sayısal bir değerdir.

hsla(0, 100%, 30%, 0.3);
hsla(0, 100%, 50%, 0.3);
hsla(0, 100%, 70%, 0.3);
hsla(0, 100%, 90%, 0.3);

Aşağıdaki örnek, farklı HSLA renklerini tanımlar:

Örnek

#p1 {arka plan rengi: hsla(120, 100%, 50%, 0.3);}  /* Şeffaflıkla dolu yeşil */
#p2 {arka plan rengi: hsla(120, 100%, 75%, 0.3);}  /* Şeffaflıkla dolu açık yeşil */
#p3 {arka plan rengi: hsla(120, 100%, 25%, 0.3);}  /* Şeffaflıkla dolu koyu yeşil */
#p4 {arka plan rengi: hsla(120, 60%, 70%, 0.3);}   /* Şeffaflıkla dolu mint renk */

Kişisel Olarak Deneyin

şeffaflık

CSS şeffaflık Öznitelik, tüm elementin şeffaflığını ayarlar (arka plan rengi ve metin de şeffaf/mat olacaktır).

şeffaflık Öznitelik değeri, 0.0 (tamamen şeffaf) ve 1.0 (tamamen mat) arasında sayısal bir değer olmalıdır.

rgb(255, 0, 0); şeffaflık:0.2;
rgb(255, 0, 0); şeffaflık:0.4;
rgb(255, 0, 0); opacity:0.6;
rgb(255, 0, 0); opacity:0.8;

Lütfen, yukarıdaki metin de şeffaf/yarı şeffaf olacaktır!

Aşağıdaki örnek, şeffaflıkla birlikte farklı elemanları gösterir:

Örnek

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* Şeffaflıkla birlikte kırmızı */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* Şeffaflıkla birlikte yeşil */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* Şeffaflıkla birlikte mavi */

Kişisel Olarak Deneyin