Metode pemberian nilai warna di CSS

Metode pemberian nilai warna di CSS

hallo sahabat ilmukita , dikesempatan ini ilmukita memposting metode pemberian nilai warna di CSS . Kenapa harus diposting artikel ini ? Karena metode pemberian warna di CSS ini nantinya sangat berguna sekali untuk belajar CSS atau pun sudah menjadi seorang Front-end web development. Ada beberapa metode pemberian nilai warna di CSS, berikut penjelasannya :

Warna keywords di CSS

Warna Keywords sudah lama didukung oleh web browser. Ada 16 keyword yang secara resmi dijadikan standar oleh W3C. Cara penulisan warna keywords yaitu langsung tulis nama warnanya.

daftar nama warna keywor
daftar nama warna keywords

Contoh penggunaan  warna keyword di CSS

Warna  hexsadesimal di CSS

Dalam sistem hexsadesimal memiliki 16 digits (0,1,2,3,4,5,6,7,8,9,A,B,C,D,E,F) . Untuk menentukan warna, ada 3 set nomor hexsadesimal yang mewakili Red, Green dan Blue. Setiap set memiliki 2 digit hexsadesimal.

Format penulisan warna hexsadesimal di CSS

Keterangan :

  • RR  : mewakili nilai warna merah
  • GG : mewakili nilai warna hijau
  • BB  : mewakili nilai warna biru

Misalkan kita menulis format #ffffff artinya Red, Green dan Blue dalam keadaan full memberikan efek warna putih. Sedangkan #000000 memberikan efek warna yang paling lemah yaitu hitam. #ff0000 adalah Red, #00ff00 adalah Green dan #0000ff adalah Blue.

contoh warna hexsadesimal
contoh warna hexsadesimal

Contoh penggunaan warna hexsadesimal di CSS

Warna RGB di CSS

Metode RGB lebih gampang untuk diatur atau di manipulasi di script dan nilanya bisa menggunakan desimal ( 0 – 255)  atau persen( 0% – 100% ).

Format penulisan warna RGB di CSS

rgb(R,G,B)

Keterangan

  • R : mewakili nilai warna merah
  • G : mewakili nilai warna hijau
  • B : mewakili nilai warna biru

Contoh penggunaan warna RGB di CSS

Warna  RGBA di CSS

Warna RGBA sama dengan warna RGB , perbedaannya ada penambahan nilai alpha(opacity). Dimana nilai  alpha atau opacity  yaitu  0 adalah full transparant sedangkan 1 adalah full buram.

Format penulisan warna RGBA di CSS

Keterangan

  • R : mewakili nilai warna merah
  • G : mewakili nilai hijau
  • B : mewakili nilai biru
  • A : mewakili nilai alpha/opacity

Contoh penggunaan warna RGBA di CSS

Warna HSL di CSS

Secara teori HSL ( Hue, Saturation & Luminosity ). HSL akan mempermudah developer dalam menentukan “Deeper” atau “Lighter” sebuah warna dengan cepat.

Format penulisan warna HSL di CSS

keterangan

  • Hue : merupakan derajat warna dengan nilai 0 sampai 360
  • Saturation : menyatakan seberapa “murni” sebuah warna. Nilai dari Saturation adalah persen dari 0% sampai dengan 100%
  • Lightness : adalah sebuah ukuran relative skala pencahayaan (lightness) atau kegelapan (darkness) dari sebuah warna, umumnya diukur sebagai persentase dari 0% (black) sampai dengan 100% (white). Nilai 0% akan membuat warna apapun menjadi hitam, dan nilai 100% akan membuat warna apapun menjadi putih. Untuk mendapatkan warna ‘normal’ nilai berada di  50%
color wheel
color wheel

HSL berdasarkan color wheel, geser dari Red ke Yellow, Green, Blue dan Violet dan kembali ke Red lagi. HUE itu diambil dari derajat dari sisi luar wheel. Dengan Red sebagai 0 derajat dan juga 360 derajat.

Contoh penggunaan warna HSL di CSS

Warna HSLA di CSS

Warna HSLA sama dengan warna HSL perbedaannya ada penambahan nilai alpha( opacity) .

Format penulisan warna HSLA di CSS

Contoh penggunaan warna HSLA di CSS

Nah itulah beberapa metode pemberian nilai warna di CSS. Semoga membantu .

LEAVE A REPLY

Please enter your comment!
Please enter your name here