CSS Yasal Renk Değerleri

CSS Renkleri

CSS renkler aşağıdaki yöntemlerle belirlenebilir:

onaltılık renkler
RGB renk
RGBA renkleri
HSL renk
HSLA renkleri
Önceden tanımlanmış / Çapraz tarayıcı renk adları

onaltılık Renkler

Onaltılık renk değerleri tüm büyük tarayıcılar tarafından desteklenir.

Bir onaltılık renk ile belirtilir: #kkyymm, RR (red) , GG (green) ve BB (blue) onaltılık tamsayı renk bileşenleri belirtin. Tüm değerler 00 ile FF arasında olmalıdır.

Mavi bileşen en yüksek değere ayarlanır çünkü Örneğin, # 0000ff değeri, mavi olarak oluşturulur (ff) ve diğerleri 00 olarak ayarlanır.

Örnek

Farklı HEX renk tanımlayın:

#p1 {background-color: #ff0000;}   /* red */
#p2 {background-color: #00ff00;}   /* green */
#p3 {background-color: #0000ff;}   /* blue */

Kendin dene "

RGB Renkleri

RGB renk değerleri tüm büyük tarayıcılar tarafından desteklenir.

: Bir RGB renk değeri ile belirtilir rgb(red, green, blue) . (Kırmızı, yeşil ve mavi) Her parametre renk yoğunluğu tanımlar ve 0 ve 255 ya da bir yüzde değeri arasında bir tam sayı olabilir (from 0% to 100%) .

Örneğin, rgb(0,0,255) mavi bir parametre en yüksek değere ayarlanır, çünkü bir değer, mavi olarak oluşturulur (255) ve diğerleri, 0 olarak ayarlanır.

: Aynı zamanda, aşağıdaki değerler eşit renk tanımlamak rgb(0,0,255) ve rgb(0%,0%,100%) .

Örnek

Farklı RGB renk tanımlayın:

#p1 {background-color: rgb(255, 0, 0);}   /* red */
#p2 {background-color: rgb(0, 255, 0);}   /* green */
#p3 {background-color: rgb(0, 0, 255);}   /* blue */

Kendin dene "

RGBA Renkleri

RGBA renk değerleri IE9 +, Firefox 3+, Chrome, Safari, içinde ve Opera 10+ desteklenir.

nesnenin opaklığını belirtir - RGBA renk değerleri bir alfa kanalı ile RGB renk değerlerinin bir uzantısıdır.

: Bir RGBA renk değeri ile belirtilir rgba(red, green, blue, alpha) . A parametresi 0.0 arasında bir sayıdır (fully transparent) ve 1.0 (fully opaque) .

Örnek

opaklıkla farklı RGB renk tanımlayın:

#p1 {background-color: rgba(255, 0, 0, 0.3);}   /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}   /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}   /* blue with opacity */

Kendin dene "

HSL Renkleri

HSL renk değerleri IE9 +, Firefox, Chrome, Safari ve Opera 10+ desteklenir.

HSL renk tonu, doyma ve hafiflik açılımı - ve bir renk silindir koordinat temsil eder.

: Bir HSL renk değeri ile belirtilir hsl(hue, saturation, lightness) .

Ton renk çarkı üzerinde bir derece (from 0 to 360) , 0 - (or 360) 240 mavi, 120 yeşil, kırmızı. Doygunluk bir yüzde değeri; % 0 gri bir gölge anlamına gelir ve% 100 tam bir renktir. Hafiflik da yüzdesidir; % 0 100,% beyaz, siyah.

Örnek

Farklı HSL renk tanımlayın:

#p1 {background-color: hsl(120, 100%, 50%);}   /* green */
#p2 {background-color: hsl(120, 100%, 75%);}   /* light green */
#p3 {background-color: hsl(120, 100%, 25%);}   /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);}    /* pastel green */

Kendin dene "

HSLA Renkleri

HSLA renk değerleri IE9 +, Firefox 3+, Chrome, Safari, içinde ve Opera 10+ desteklenir.

nesnenin opaklığını belirtir - HSLA renk değerleri bir alfa kanalı ile HSL renk değerlerinin bir uzantısıdır.

: Bir yüksek dayanımlı düşük alaşımlı renk değeri ile belirtilir hsla(hue, saturation, lightness, alpha) a parametresinin opaklığını tanımlar. A parametresi 0.0 arasında bir sayıdır (fully transparent) ve 1.0 (fully opaque) .

Örnek

opaklıkla farklı HSL renk tanımlayın:

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}   /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}   /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}   /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}    /* pastel green with opacity */

Kendin dene "