Warna CSS

Dukungan CSS Lebih dari 140 nama warnadan nilai heksadesimal, nilai RGB, nilai RGBA, nilai HSL, nilai HSLA, serta kepadatan.

Warna RGBA

Nilai warna RGBA adalah ekspansi nilai warna RGB, dengan channel alpha - channel ini menentukan kepadatan warna.

Nilai warna RGBA ditentukan seperti ini: rgba(merah, hijau, biru, alpha) alpha Parameter adalah angka yang berada di antara 0.0 (lengkap transparen) dan 1.0 (lengkap tidak transparen).

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

Contoh di bawah ini mendefinisikan warna RGBA yang berbeda:

Contoh

#p1 {background-color: rgba(255, 0, 0, 0.3);}  /* Merah dengan kepadatan transparensi */
#p2 {background-color: rgba(0, 255, 0, 0.3);}  /* Hijau dengan kepadatan transparensi */
#p3 {background-color: rgba(0, 0, 255, 0.3);}  /* Biru dengan kepadatan transparensi */

Coba Sendiri

Warna HSL

HSL berarti tono warna, ketetapan, dan kemiringan (Hue, Saturation, serta Lightness).

Nilai warna HSL ditentukan seperti ini: hsl(hue, saturation, lightness).

Tono warna adalah derajat di alur warna (dari 0 hingga 360):

  • 0 (atau 360) adalah merah
  • 120 adalah hijau
  • 240 adalah biru

Ketetapan adalah nilai persen: 100% adalah warna penuh.

Kemiringan adalah nilai persen: 0% adalah gelap (hitam), sementara 100% adalah putih.

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

Contoh di bawah ini mendefinisikan warna HSL yang berbeda:

Contoh

#p1 {background-color: hsl(120, 100%, 50%);}  /* Warna hijau */
#p2 {background-color: hsl(120, 100%, 75%);}  /* Warna hijau muda */
#p3 {background-color: hsl(120, 100%, 25%);}  /* Warna hijau tua */
#p4 {background-color: hsl(120, 60%, 70%);}   /* Warna hijau muda */

Coba Sendiri

Warna HSLA

Nilai warna HSLA adalah ekspansi dari nilai warna HSL yang memiliki channel Alpha - ia menentukan keputihan warna.

Nilai warna HSLA ditentukan oleh parameter berikut: hsla(hue, saturation, lightness, alpha), di mana parameter alpha menentukan keputihan. Parameter alpha adalah angka yang berada diantara 0.0 (transparan penuh) dan 1.0 (tidak transparan penuh).

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

Contoh di bawah ini mendefinisikan warna HSLA yang berbeda:

Contoh

#p1 {background-color: hsla(120, 100%, 50%, 0.3);}  /* Warna hijau dengan keputihan */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);}  /* Warna hijau muda dengan keputihan */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);}  /* Warna hijau tua dengan keputihan */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);}   /* Warna hijau muda dengan keputihan */

Coba Sendiri

Keputihan

CSS opacity Pengaturan properti menentukan kecerahan elemen seluruhnya (warna latar dan teks akan menjadi transparan/terbuka).

opacity Nilai properti harus angka yang berada diantara 0.0 (transparan penuh) dan 1.0 (tidak transparan penuh).

rgb(255, 0, 0); opacity:0.2;
rgb(255, 0, 0); opacity:0.4;
rgb(255, 0, 0); opacity:0.6;
rgb(255, 0, 0); opacity:0.8;

Perhatikan, teks di atas juga akan menjadi transparan/tidak transparan!

Contoh di bawah ini menunjukkan elemen yang berbeda dengan kecerahan:

Contoh

#p1 {background-color:rgb(255,0,0);opacity:0.6;}  /* Merah dengan kecerahan */
#p2 {background-color:rgb(0,255,0);opacity:0.6;}  /* Hijau dengan kecerahan */
#p3 {background-color:rgb(0,0,255);opacity:0.6;}  /* Biru dengan kecerahan */

Coba Sendiri