Belajar HTML : Warna pada HTML – Bagian XII

Diposting pada
Belajar HTML : Warna pada HTML - Bagian XII
Sebelumnya kita sudah belajar mengenai Komentar pada HTML, maka kali ini kita akan belajar mengenai Warna pada HTML. Pada umumnya warna di HTML ditentukan dengan nama warna Standar, atau dengan nilai RGB, HEX, HSL & HSV, RGBA, atau HSLA.

Pengertian RGB, HEX, HSL, HSV, RGB, dan HSLA

Apabila kalian belum pernah mendengar istilah warna diatas, sebaiknya kita bahas dulu sebentar sebelum lanjut ke tutorial Warna pada HTML. Berikut beberapa arti istilah dari warna diatas yang perlu kalian ketahui.

  • RGB (Red, Green, Blue) merupakan 3 model warna yang digunakan dengan berbagai cara untuk menghasilkan berbagai macam Warna.
  • HEX merupakan warna yang sama seperti RGB, namun dituliskan dengan nilai yang berbeda.
  • HSL (Hue, Saturation, Lightness) & HSV (Hue, Saturation, Value) merupakan 2 representasi warna yang dibuat pada tahun 1970 oleh Peneliti Grafika Komputer untuk menyelaraskan cara membuat atribut penglihatan manusia yang memandang warna warna.
  • RGBA (Red, Green, Blue, Alpha), sama seperti RGB namun dilengkapi dengan saluran Alpha Keempat.
  • HSLA (Hue, Saturation, Lightness, Alpha) , juga sama seperti HSL namun dilengkapi dengan saluran Alpha Transparency yang memungkinkan kalian untuk mengatur transparansi dari setiap warna.

Warna Background

Dalam HTML, warna Background atau Latar Belakang dapat kalian atur sesuai dengan warna yang kalian ingin, sebagai contoh :
<h1 style="background-color:DodgerBlue;">IDNCODER.COM</h1>
<p style="background-color:Tomato;">Selamat Datang di IDNCODER</p>

See the Pen IDNCODER – Warna Background by Rahman (@rahmannur19) on CodePen.

 Warna Teks

Dalam HTML, warna teks juga dapat kalian atur, sebagai contoh :
<h1 style="color:Tomato;">Hello IDNCODER</h1>
<p style="color:DodgerBlue;">Selamat Datang di IDNCODER</p>
<p style="color:MediumSeaGreen;">Tutorial Dasar HTML</p>

See the Pen IDNCODER – Warna Teks by Rahman (@rahmannur19) on CodePen.

Warna Garis Batas (Border)

Dalam HTML. kalian juga dapat mengatur warna garis tepi atau garis batas, sebagai contoh :
<h1 style="border:2px solid Tomato;">Hello IDNCODER</h1>
<h1 style="border:2px solid DodgerBlue;">Hello IDNCODER</h1>
<h1 style="border:2px solid Violet;">Hello IDNCODER</h1>

See the Pen IDNCODER – Warna Border by Rahman (@rahmannur19) on CodePen.

Nilai Warna

Dalam HTML, warna juga dapat kalian tentukan dengan menggunakan nilai RGB, HEX, HSL, RGBA, dan HSLA. Sebagai contoh saya membuat 3 elemen <div> dengan warna yang telah ditentukan nilai menggunakan nilai RGB, HEX, dan HSL.

<div style="background-color:rgb(255, 99, 71);">rgb(255, 99, 71)</div>
<div style="background-color: #ff6347">#ff6347</div>
<div style="background-color:hsl (9, 100%, 64%)</div>

RGB (255, 99, 71)
#ff6347
hsl (9, 100%, 64%)

Dan dibawah ini juga terdapat 2 elemen <div> yang menggunakan nilai RGBA dan HSLA, yang menggunakan saluran Alpha keempat kedalam warna, dengan transparansi 50%.

<div style="background-color:rgba (255, 99, 71);">rgb (255, 99, 71)</div>
<div style="background-color:hsla (9, 100%, 64%, 0.5)">hsla (9, 100%, 64%, 0.5)</div>

rgba(255, 99, 71, 0.5)
hsla (9, 100%, 64%, 0.5)

Oke mungkin itu saja pembelajaran mengenai warna pada HTML, dan jangan lupa sambil dipraktekkan agar lebih mudah dipahami. Dan semoga bermanfaat.

Sumber : W3Schools.com

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *