Memahami Penulisan Warna Dalam CSS

Pada Kesempatan kali ini Blog Pintasku akan masih menjelaskan tentang Tutorial Belajar CSS, dimana kali ini kita akan Memahami Penulisan Kode Warna Di Dalam CSS.

Penggunaan warna di dalam dunia grafis memang sangatlah penting bahkan bisa dibilang hal yang paling mendasar oleh karena itu kita harus mengetahuinya. Di Dalam CSS itu ada 6 Cara untuk menuliskan kode warna, yaitu sebagai berikut.

1. Format Hexadesimal

Format warna Hexadesimal ini merupakan kombinasi dari angka 0-9 dan di lanjutkan dengan menggunakan huruf dari A-F, di dalam format hexadesimal ini angka 0 itu yang paling lemah sedangkan huruf F menandakan yang paling kuat dan ditandai dengan kode warna #RGB  yang menunjukan identitas warna tertentu, sebagai contoh kode warna berikut ini adalah warna merah #FF0000. Supaya bisa lebih mudah di mengerti berikut ini adalah contoh penggunaan warna hexadesimal di dalam CSS.

p {
  color:#000000;  /* Warna Hitam */
  }

2. Format RGB

Di dalam dunia Desain Grafis, warna yang paling mendasar dari semua warna seperti, kuning, pink,  hitam, putih, dll berasal dari warna RGB (Red Green Blue). Di Dalam format RGB ini bernilai dari 0 - 255, dimana nilai 0 adalah nilai yang paling rendah sedangkan nilai 255 adalah warna yang paling kuat, contohnya rgb(0,0,0,0) itu sama dengan #000000 yang berarti menandakan warna Hitam. Sedangkan contoh di dalam CSS adalah sebagai berikut ini.

p {
  color: rgb(0,0,0,0); /* Warna Hitam */
  border-bottom: 2px solid rgb (255,255,255,255);
  }

3. Format RGBA

Di atas kita mengetahui kalau RGB itu merupakan singkatan dari Red Green Blue, sedangkan RGBA merupakan singkatan dari Red Green Blue Alpha, maksud dari Alpha itu adalah tingkat transparan dari suatu warna. Format warna RGBA ini ditulis dengan cara rgb(R,G,B,A).

Nilai alpha 0 itu akan membuat warna transparan, sedangkan nilai alpha 1 akan membuat warna menjadi pekat, tetapi tidak akan melewatkan tidak akan melewatkan objek lain dibelakangnya. Supaya bisa lebih mengerti, berikut ini adalah contoh penulisan di dalam CSS.

p {
  color: rgb(0,0,255,0.2); /* Warna Biru Yang Sedikit Transparan */
  }

4. Format Warna HSL

Format Warna HSL, merupakan singkatan dari Hue, Saturation, dan Lightness atau sering di tulis juga dengan Luminance. Penggunaan Format Warna HSL ini memang susah jika sobat sudah terbiasa penggunaan format RGB, Oleh karena itu penggunaan format HSL ini jarang sekali digunakan  dan tidak semua browser mendukungnya. Berikut ini adalah contoh penggunaan format warna HSL di dalam CSS.

h2 {
   color: hsl(0,100%,50%); /* Warna Merah */
}

5. Format Warna HSLA

Sama halnya dengan format RGBA, format penulisan HSLA itu memiliki tambahan A, yang berarti Alpha, dimana alpha ini adalah tingkat transparan dari suatu warna. Nilai yang digunakannya juga sama yaitu nilai 1 yang berarti solid, dan nilai 0 untuk warna transparan. Berikut ini adalah contoh penggunaan format warna HSLA di dalam CSS.

h2 {
   color: hsla(244, 100%, 50%, 0.5); /* Warna Biru Transparan */
}

6. Format Warna Berdasarkan Nama Warna (Keyword)

Nahh di atas kita sudah mengerti kalau CSS itu mendukung berbagai format penulisan warna, dimulai dari RGB, RGBA, HSL,HSLA, dan desimal, selain itu CSS juga mendukung 17 kata warna di dalam bahasa inggris, antara lain : aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, dan yellow. Kata - kata tersebut berasal dari warna dasar VGA pada Windows atau lebih dikenal juga dengan istilah classic internet color.
Berikut ini adalah contoh penggunaannya di dalam CSS.

h2 {
   color: blue; /* Warna Biru */
}

Nahh sekian penjelasan dari saya mengenai Macam - Macam Penulisan Warna Di Dalam CSS, semoga tulisan ini bisa bermanfaat dan membantu sobat di dalam Belajar Dasar CSS. Terimakasih