Macam macam nilai warna baru pada CSS3

Pada CSS3 terdapat beberapa macam nilai warna atau color yang bisa Anda gunakan, nilai warna tersebut

Warna pada CSS3

CSS3 menambahkan beberapa jenis warna baru yang bisa Anda gunakan untuk pengaturan nilai warna pada elemen. Jenis warna baru pada css3 yaitu: rgba, hsl dan hsla. Terkait seputar warna atau color yang lainnya Anda bisa baca kembali CSS dasar seputar color.

Nilai warna RGBA

Nilai warna RGBA kepanjangan dari (Red, Green, Blue, Alpha). Model warna RGBA perpanjangan dari model warna RGB yang ditambahkan alpha channel, alpha sendiri menentukan opacity atau tingkat transparan pada warna. Parameter alpha adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (tidak transparan sama sekali).

#p1 {
    background-color: rgba(0, 0, 255, 0.2);
}
#p2 {
    background-color: rgba(0, 0, 255, 0.4);
}
#p3 {
    background-color: rgba(0, 0, 255, 0.6);
}
#p4 {
    background-color: rgba(0, 0, 255, 0.8);
}
#p5 {
    background-color: rgba(0, 0, 255, 1.0);
}

Nilai warna HSL

Nilai warna HSL kepanjangan dari (Hue, Saturation, Lightness).

Hue adalah gelar pada roda warna dari 0 hingga 360. 0 berwarna merah atau red, 120 berwarna hijau atau green, dan 240 berwarna biru atau blue.

Saturation adalah nilai persentase, 0% berarti warna abu-abu atau grey, dan 100% adalah warna penuh.

Lightness juga persentase, 0% hitam atau black, 50% tidak terang atau gelap, 100% putih atau white

#p1 {
    background-color: hsl(0, 100%, 50%);
}
#p2 {
    background-color: hsl(60, 100%, 50%);
}
#p3 {
    background-color: hsl(120, 100%, 25%);
}
#p4 {
    background-color: hsl(240, 100%, 50%);
}
#p5 {
    background-color: hsl(0, 0%, 0%);
}

Nilai warna HSLA

Nilai warna HSLA kepanjangan dari (Hue, Saturation, Lightness, Alpha). Model warna HSLA perpanjangan dari model warna HSL yang ditambahkan alpha channel, alpha sendiri menentukan opacity atau tingkat transparan pada warna. Parameter alpha adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (tidak transparan sama sekali).


#p1 {
    background-color: hsla(39, 100%, 50%, 0.2);
}
#p2 {
    background-color: hsla(39, 100%, 50%, 0.4);
}
#p3 {
    background-color: hsla(39, 100%, 50%, 0.6);
}
#p4 {
    background-color: hsla(39, 100%, 50%, 0.8);
}
#p5 {
    background-color: hsla(39, 100%, 50%, 1.0);
}