Mengenal Lebih Dalam CSS Colors (CSS untuk Warna)

CSS

CSS mendukung lebih dari 140 nama warna, nilai HEX, nilai RGB, nilai RGBA, nilai HSL, nilai HSLA dan opasitas.

Warna RGBA

Nilai warna RGBA adalah perpanjangan nilai warna RGB dengan saluran alfa - yang menentukan opasitas untuk warna.

Nilai warna RGBA ditentukan dengan: rgba (merah, hijau, biru, alfa). Parameter alpha adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (sepenuhnya buram).

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* merah dengan opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* hijau dengan opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* biru dengan opacity */

HSL Colors

HSL singkatan Hue, Saturation dan Lightness. Nilai warna HSL ditentukan dengan: hsl (hue, saturation, lightness).

  1. Warna adalah derajat pada roda warna (dari 0 hingga 360):
    • 0 (atau 360) berwarna merah
    • 120 berwarna hijau
    • 240 berwarna biru
  2. Saturasi adalah nilai persentase: 100% adalah warna penuh.
  3. Lightness juga merupakan persentase; 0% gelap (hitam) dan 100% berwarna putih.
#p1 {background-color: hsl(120, 100%, 50%);}  /* hijau */
#p2 {background-color: hsl(120, 100%, 75%);}  /* hijau terang */
#p3 {background-color: hsl(120, 100%, 25%);}  /* hijau galap */
#p4 {background-color: hsl(120, 60%, 70%);}   /* hijau pastel */

HSLA Colors

Nilai warna HSLA adalah perpanjangan nilai warna HSL dengan saluran alfa - yang menentukan opasitas untuk warna.

Nilai warna HSLA ditentukan dengan: hsla (hue, saturation, lightness, alpha), di mana parameter alpha mendefinisikan opacity. Parameter alpha adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (sepenuhnya buram).

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* hijau dengan opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* hijau terang dengan opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* hijau gelap dengan opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* hijau pastel dengan opacity */

Properti opasitas CSS mengatur opasitas untuk seluruh elemen (warna latar belakang dan teks akan buram / transparan).

Nilai properti opasitas harus berupa angka antara 0,0 (sepenuhnya transparan) dan 1,0 (sepenuhnya buram).

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* merah dengan opacity */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* hijau dengan opacity */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* biru dengan opacity */

Cukup jelas ya contoh-contoh serta penjelasan diatas tentang CSS Warna. Semoga bermanfaat

Artikel Terkait

Populer

;