TeknoTips

Bikin Website Makin Berwarna, Ini Dia 5 Macam Metode Pewarnaan CSS

Sebelumnya, kita sudah mengetahui bahwa CSS erat kaitannya dengan pewarnaan CSS. Pada artikel sebelumnya juga, kita sudah mempelajari penerapan CSS dalam artikel berjudul “Buat Apa Sih CSS? Ini Dia 3 Penerapan Pewarnaan CSS”.

Nah, kali ini Dafunda Tekno mau membahas mengenai cara-cara pewarnaan CSS. Nantinya ada 5 metode pewarnaan CSS yang akan kita bahas bersama.

5 Macam Metode Pewarnaan CSS

1. Color Name

Color Name merupakan cara pewarnaan dengan menuliskan nama warnanya secara langsung. Cara ini merupakan cara termudah dalam menggunakan warna dalam CSS. 

Ada 16 macam standar color name CSS, yaitu aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, purple, red, silver, teal, white, dan yellow.

Standar Warna Color Name Css Min
Standar Color Name CSS

Nah, gimana cara menggunakannya? Begini caranya

Misal nih kita punya codingan HTML seperti ini

<!Doctype html>
<html>
     <head>
         <meta charset="utf-8">
		  <link rel="stylesheet" type="text/css" href="style.css">
         <title> Background Color </title>
     </head>
     <body>
         <h1> Dafunda </h1>
         <p> Dafunda.com adalah Media Geek dan Pop-Culture Indonesia, 
         situs yang membahas tentang budaya kreatif paling populer di 
         seluruh dunia. Kami membahas apapun yang berhubungan dengan 
         Game, Film, TV, Gadget, Cosplay, dan Budaya Geek populer 
         lainnya. </p>
     </body>
     </html>

Kemudian, kita pingin nih warnain h1 dengan warna aqua dengan CSS.

h1{ 
   color: aqua;
}

Hasilnya di browser akan seperti ini:

CSS Color Name Min

2. RGB Value

Sebenarnya dengan menggunakan Color Name kalian sudah bisa mewarnain HTML. Tapi, dengan menggunakan color name. Kalian hanya bisa menggunakan 16 warna saja. Jumlah yang sedikit kalau dibandingkan berjuta-juta pilihan warna di muka bumi ini eaak.

Nah, maka dari itu RGB value mencoba memecahkan masalah tersebut. Metode RGB Value adalah pewarnaan CSS dengan 3 elemen yaitu (R adalah red, G adalah green dan B adalah Blue). Kalau bagi kalian, yang sudah pernah mendalami design grafis pasti sudah mengenal kode warna ini.

Kodr RGB memiliki rentang nilai dari 0 sampai 255.  Jika kita ingin menampilkan warna merah bisa kita menggunakan kode R 255, dan kode lainnya berada di posisi 0. Hal ini dikarenakan kita ingin menampilkan warna dominan merah.

Nah, jika kalian masih bingung. Kalian bisa mencoba warna RGB disini .

Contoh kita punya codingan HTML seperti ini

<!Doctype html>
<html>
     <head>
         <meta charset="utf-8">
		  <link rel="stylesheet" type="text/css" href="style.css">
         <title> Background Color </title>
     </head>
     <body>
         <h1> Dafunda </h1>
         <p> Dafunda.com adalah Media Geek dan Pop-Culture Indonesia, situs yang membahas tentang budaya kreatif paling populer di seluruh dunia. Kami membahas apapun yang berhubungan dengan Game, Film, TV, Gadget, Cosplay, dan Budaya Geek populer lainnya. </p>
      </body>
      </html>

Kemudian, codingan CSSnya seperti ini

p {
   color:rgb(200,172,188);
   background-color:rgb(121,255,145);
}

Hasil di browser nantinya akan seperti ini:

Color RGB CSS Min

3. HEX Value

Selanjutnya, ada metode pewarnaan dengan HEX Value. Dalam pewarnaan HEX, kita akan mengikuti kode #RRGGBB. Dimana RR mewakili warna merah (red), GG mewakili warna hijau (green) dan BB mewakili warna blue (biru). 

Menggunakan code Html yang sama seperti diatas. Kita akan mewarnaninya dengan menggunakan CSS.

Kode CSS nya seperti ini:

h1 {
   color: ##3cb371 ;
   background-color: #ee82ee;
}

Hasil di browser akan nampak seperti ini:

Hex Color CSS Min

4. HSL

HSL merupakan pewarnaan CSS yang menggunakan komposisis (hue, saturation, lightness). 

Okee, kita bahas apa itu hue. Jadi hue adalah derajat pewarnaan mulai dari 0 sampai 360. 

Hsl Color Model Min

Kemudian saturation menunjukan suatu kemurnian warna. Jadi jika saturation 100 % maka keaslian warna itu asli, semakin mengecil saturationnya maka warna akan semakin pudar.

Terakhir, lightness mengatur kecerahan warna. 0 % menunjuk warna hitam sementara 100 % menunjukkan warna putih. Jadi semakin ke kanan semakin cerah sementara semakin ke kiri semakin gelap.

Contoh:

Kita menggunakan kode html seperti yang diatas. Jadi kita langsung menuju codingan CSS.

p {
   color: hsl(60,20%,36%) ;
   background-color: hsl(180,50%,50%);
}

Nantinya di browser akan tampak seperti ini

Pewarnaan Hsl Min

5. RGBA & HSLA Value

Nah, yang terakhir adalah pengembangan dari RGB dan HSL. Jadi, ada satu komponen yang bisa ditambahkan dalam RGB ataupun HSL. Nah, A (alpha) itu menunjukkan nilai transparansi suatu warna.

Parameter yang digunakan adalah 0 sampai 1. Angka 0 menunjukkan bahwa warna full transparan. Dan angka 1 menunjukkan warna tidak transparan sama sekali.

Contoh:

Dalam kodingan CSS akan seperti ini:

p {
   color: rgba(60,22,12,0.2) ;
   background-color: hsla(180,50%,50%,0.1);
}

Dan hasil di browser akan nampak seperti ini

HSLA RGBA Value CSS Min
Baca juga:  10 Daftar Game Gratis yang Bisa Bantu Kamu Belajar Pemrograman

Related Posts

Leave Comment