Belajar HTML – Color Value dan Spesifikasi Warna

2 min read

Memberikan warna dengan Color Atribute di HTML

Matamu.NET – Warna pada HTML akan membuat laman website kamu semakin menarik dan meningkatkan user experience. Warna bisa diberikan pada bagian background laman, elemen dan font.

Pewarnaan dalam HTML dapat dilakukan dengan format RGB, HEX, HSL, RGBA, dan HSLA.

A. Color Name

Code HTML untuk Value color paling dasar adalah nama warna itu sendiri dalam Bahasa Inggris. Misalnya warna merah (255,0,0) itu bisa dipanggil dengan Red, sedangkan biru (0,0,255) bisa dipanggil dengan Blue.

Contoh penggunaan warna dasar yang dikenali oleh Library HTML sebagai berikut :

Contoh Penggunaan Warna dengan Code HTML

Jika ingin mencoba pada, silahkan gunakan sintax berikut :

<h1 style="background-color:Tomato; color:white; text-align:center;">Tomato</h1>

Perhatikan kata Tomato, Violet, LigthGray, StateBlue, Gray, MediumSeaGreen, Orange, dan DodgerBlue. Kata tersebut adalah Color value yang dikenal oleh HTML. Paling tidak ada 140 nama warna yang dikenal oleh HTML. Untuk lebih detailnya silahkan cek w3.org atau di w3School.com

Contoh Code Warna HTML value dengan NAma

B. Color Background

Color Background dapat diberikan ke dalam elemen dan laman.

1. Text Color Background

Untuk memberikan latar belakang warna pada tulisan dapat dilakukan melalui pemberian attribute seperti background-color=value. Contoh Syntax seperti berikut :

<h1 style="background-color:DodgerBlue;">Penggunan Warna</h1>

<p style="background-color:Tomato;">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum ipsum quis justo consequat, sit amet ultricies felis luctus. Sed mattis eros nulla, vel ullamcorper nulla tempor non. Suspendisse iaculis consequat viverra. </p>

Hasilnya sebagai berikut :

Penggunaan Warna

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Fusce bibendum ipsum quis justo consequat, sit amet ultricies felis luctus. Sed mattis eros nulla, vel ullamcorper nulla tempor non. Suspendisse iaculis consequat viverra. 

2. Text Color

Pemberian warna pada huruf di text diberikan melalui attribute style dengan syntax sebagai berikut :

<p style="color:red;">Hello World</p>
<p style="color:green;">Lorem ipsum...</p>
<p style="color:blue;">Ut wisi enim...</p>

Hasilnya sebagai berikut :

Hello Word
Lorem Ipsum…
Ut wisi enim

C. Color Value

Seperti yang telah dijelaskan sebelumnya jika Warna dalam HTML bisa ditulis dalam format RGB, HEX, HSL, RGBA, dan HSLA. Untuk valuenya dapat dilakukan dengan syntax sebagi berikut :

  1. RGB syntax : rgb(255, 99, 71)
  2. HEX syntax : #ff6347
  3. HSL syntax : hsl(9, 100%, 64%)

1. HTML RGB

HTML RGB itu mengenali warna berdasarkan nilai dari masing-masing warna Red, Green, dan Blue. Masing-masing warna dapat dibagi ke dalam 255 warna, 0 berarti tidak ada warna dan 255 berarti warna merah penuh.

Misalkan kita menuliskan value sebagai berikut :

color : rgb (255,0,0)

Hal ini menunjukkan warna merah 255, green 0 dan blue 0. Sehingga warna yang muncul adalah Merah. Jika kita mencapurkan warna Red dan Green kita akan mendapatkan warna Yellow. Ingat!!! yang dicampurkan ini adalah panjang gelombangnya bukan berdasarkan pandangan seni (zat kiminya)

Sintax untuk mencampurkan warna Red dan Green ditulis dengan :

color : rgb (255,255,0)

Warna hitam akan muncul jika tidak ada sama sekali warna disana, dan putih akan muncul jika semua warna dimunculkan :

  1. black = rgb (0,0,0)
  2. white = rgb (255,255,255)

Karena masing-masing warna bisa menampilakn 255 level, maka combinasi warna yang bisa ditampilkan melalui HTML adalah :

256 x 256 x 256 = 16.777.216 warna.

Lumayan banyak warna bukan, 16,7 juta warna tentu saja tidak mungkin diberi nama satu-satu persatu. Hal ini yang membuat code RGD jadi penting dalam pewarnaan.

2. HTML HEX

Hex adalah singkatan dari Hexadesimal yang memberikan warna berdasarkan indek 6 digit desimal. Syntaxnya dimulai dari # lalu diikuti 6 angka.

#53,23,21

Secara umum indeks hex dapat diterjemahkan sebagai berikut #RRGGBB, dimana RR mewakili Red, GG mewakili Blue, dan BB mewakili Blue.

Misalkan #430000, maka code hex ini menunjukkan warna merah 43. Untuk warna dasar penuh dituliskan dengan code ff. Misalkan code #00ff00, ini menunjukkan warna Green 255 di RGB karena Red dan Blue-nya kosong.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan.