Warna CSS

 

Sumber : www.youtube.com

6. Warna CSS

                CSS memiliki dukungan terhadap bermacam jenis warna, artinya setiap property yang menunjukan warna seperti :

-          Color

-          Background-color

-          Border-color

-          Dan lainnya

Dapat diberikan nilai sesuai jenis warna yang dipilih. Berikut jenis-jenis warna yang dapat digunakan pada CSS yaitu :

a.       1.)    Color name, seperti : red, blue, green dan lainnya. CSS support >100 nama warna dalam bahasa inggris. Contoh : background:red

 

b.      2.)    Heksadesimal color, yaitu berupa kode warna dengan format ##RRGGBB, dimana:

• RR = Nilai heksadesimal dari red (merah)
• GG = Nilai heksadesimal dari green (hijau)
• BB = Nilai heksadesimal dari blue (biru).

• Ø   Angka yang dapat diberikan bagi masing-masing warna anara 00 sampai FF.
• Ø   Jika semuanya 00 akan menghasilkan warna hitam
• Ø   Jika semuanya FFF akan menghasilkan warna putih.

• Misalnya #23a4b1 berarti
• Warna merah 23
• Warna hijau a4
• Warna biru b1

Contoh : background: #ffe2c4

 

c.       3.)     RGB Color, yaitu nilai warna menggunakan fungsi rgb() dengan format rgb (merah, hijau, biru). Nilai masing-masing warna dapat diisi antara  0  sampai 255 atau 0% sampai 100%.

Contoh : background: rgb(255,200,1).

 

d.      4.)    RGBA color, yaitu nilai warna menggunakan  fungsi rgba() denga format rgba (merah, hijau, biru, alpha). Nilai alpha antara 0.0 hingga 1.0.

• Nilai alpha semakin rendah, maka warnanya akan semakin TRANSPARAN
• Jenis warna ini dapat digunakan untuk membuat background TRANSPARAN dengan mengatur nilai alpha kurang dari 1.

Contoh : background: rgba(255, 200, 1, 0.5)

 

e.      5.)    HSL color, yaitu nilai warna menggunakan fungsi hsl() dengan format hsl (hue, saturation, lightness).

• Ø     Hue adalah nilai derajat dengan lingkaran warna, nilainya antara 0 sampai 360.
• Ø     0 atau 360 berarti merah, 120 berarti hijau dan 240 berarti biru.
• Ø     Nilai saturation antara 0% sampai 100%, dimana semakin kecil semakin mendekati abu-abu.
• Ø     Nilai lightness antara 0% sampai 100 %, semakin kecil semakin mendekati hitam dan semakin besar semakin mendekati putih. Contoh : background: hsl (290, 60%, 70%)

 

f.        6.)    HSLA color, yaitu nilai warna mengguanakn fungsi hsla() dengan format hsla (hue, saturation, lightness, alpha).

• Ø     Nilai alpha = RGBA  artinya jenis warna ini dapat digunakan untuk membuat background transparan.
• Ø     Contoh : background (290, 60%, 70%, 0.4)

 

         Semoga bermanfaat buat sobat yang baru tau👊👊👋😉