CSS geçerli renk değeri

CSS Renkleri

CSS'deki renkleri aşağıdaki yöntemlerle belirtmek mümkündür:

  • ondalık sayısal renk
  • şeffaflıkla HEX renk
  • RGB renk
  • RGBA 颜色
  • HSL 颜色
  • HSLA renkleri
  • Önceden tanımlanmış/çapraz tarayıcı renk isimleri
  • 使用 currentcolor kelime

ondalık sayısal renk

#RRGGBB ile ondalık sayısal renk belirlenir, RR (kırmızı), GG (yeşil) ve BB (mavi) ondalık sayısal tam sayılar renk bileşenlerini (bileşenlerini) belirtir. Tüm değerler 00 ile FF arasında olmalıdır.

örneğin, #0000ff değeri mavi olarak görüntülenir, çünkü mavi bileşeni en yüksek değere (ff) ayarlanmıştır, diğer bileşenler 00 olarak ayarlanmıştır.

Örnek

farklı HEX renklerini tanımla:

#p1 {background-color: #ff0000;}   /* kırmızı */
#p2 {background-color: #00ff00;}   /* yeşil */
#p3 {background-color: #0000ff;}   /* mavi */

Kişisel olarak deneyin

şeffaflıkla HEX renk

#RRGGBB ile ondalık sayısal renk belirlenir. Şeffaflığı artırmak için 00 ile FF arasında iki ek rakam ekleyin.

Örnek

şeffaflıkla HEX renkini tanımla:

#p1a {background-color: #ff000080;}   /* şeffaflıkla kırmızı */
#p2a {background-color: #00ff0080;}   /* şeffaflıkla yeşil */
#p3a {background-color: #0000ff80;}   /* şeffaflıkla mavi */

Kişisel olarak deneyin

RGB renk

RGB renk değeri rgb() fonksiyonu规定，语法如下：

rgb(red, green, blue)

her parametre (red, green, bluerenk yoğunluğunu tanımlar, 0 ile 255 arasında tam sayı veya yüzde değeri (0% ile 100% arasında) olabilir.

örneğin, rgb(0,0,255) değeri mavi olarak görüntülenir, çünkü blue parametresi en yüksek değere (255) ayarlanmıştır, diğer parametreler 0 olarak ayarlanmıştır.

Ayrıca, aşağıdaki değerler aynı rengi tanımlar: rgb(0,0,255) ve rgb(0%,0%,100%)。

Örnek

定义不同的 RGB 颜色：

#p1 {background-color: rgb(255, 0, 0);}   /* 红色 */
#p2 {background-color: rgb(0, 255, 0);}   /* 绿色 */
#p3 {background-color: rgb(0, 0, 255);}   /* 蓝色 */

Kişisel olarak deneyin

RGBA 颜色

RGBA 颜色值是 RGB 颜色值的扩展，它带有 Alpha 通道 - 指定对象的不透明度。

RGBA 颜色通过 rgba() 函数规定，语法如下：

rgba(red, green, blue, alpha)

alpha Parametreler 0.0 (tamamen şeffaf) ve 1.0 (tamamen şeffaf olmayan) arasında sayısal değerlerdir.

Örnek

定义带有不透明度的不同 RGB 颜色：

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* 带不透明度的红色 */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* 带不透明度的绿色 */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* 带不透明度的蓝色 */

Kişisel olarak deneyin

HSL 颜色

HSL 指的是色相（hue）、饱和度（saturation）和亮度（lightness）- 代表颜色的圆柱坐标表示。

使用 hsl() 函数指定 HSL 颜色值，该函数的语法如下：

hsl(hue, saturation, lightness)

色相是色轮上的度数（从 0 到 360）- 0（或 360）是红色，120 是绿色，240 是蓝色。

饱和度是一个百分比值； 0％ 表示灰色阴影，而 100％ 是全彩色。

亮度也是一个百分比； 0％ 是黑色，100％ 是白色。

Örnek

定义不同的 HSL 颜色：

#p1 {background-color: hsl(120, 100%, 50%);}   /* 绿色 */
#p2 {background-color: hsl(120, 100%, 75%);}   /* 浅绿色 */
#p3 {background-color: hsl(120, 100%, 25%);}   /* 深绿色 */
#p4 {background-color: hsl(120, 60%, 70%);}    /* Yumuşak yeşil */

Kişisel olarak deneyin

HSLA renkleri

HSLA renk değeri

HSLA renk değeri, HSL renk değerlerinin genişletilmiş halidir, Alpha kanalı içerir - nesnenin şeffaflığını belirtir. hsla() fonksiyonuBelirtin, bu fonksiyonun grameri şu şekildedir:

hsla(hue, saturation, lightness, alpha)

alpha Parametreler 0.0 (tamamen şeffaf) ve 1.0 (tamamen şeffaf olmayan) arasında sayısal değerlerdir.

Örnek

Farklı şeffaflıkla birlikte HSL renklerini tanımlayın:

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* Şeffaflıkla birlikte yeşil */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* Şeffaflıkla birlikte açık yeşil */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* Şeffaflıkla birlikte koyu yeşil */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* Şeffaflıkla birlikte yumuşak yeşil */

Kişisel olarak deneyin

Önceden tanımlanmış/çapraz tarayıcı renk isimleri

HTML ve CSS renk standartlarında 140 adet önceden tanımlanmış renk ismi bulunmaktadır.

Örneğin:blueveredvecoralvebrown vb:

Örnek

Farklı renk isimlerini tanımlayın:

#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}

Kişisel olarak deneyin

Bütün önceden tanımlanmış isimlerin listesi, Renk İsimleri Referans Kılavuzumuz'da bulunabilir.

currentcolor anahtar kelimesi

currentcolor Anahtar kelimeyi referans alan elementin color özelliği değerine atıfta bulunur.

Örnek

Aşağıdaki <div> elementinin çerçeve rengi mavi olacaktır, çünkü <div> elementinin metin rengi mavidır:

#myDIV {
  color: blue; /* Mavi metin rengi */
  border: 10px solid currentcolor; /* Mavi çerçeve rengi */
}

Kişisel olarak deneyin