Beberapa Jenis dan Cara Penulisan Kode Warna

Hallo teman-teman, apa kabarnya hari ini? Pada hari ini saya akan memberikan satu trik tentang beberapa jenis cara penulisan kode warna dalam HTML. Jika kalian pengembang website atau user interface sebuah aplikasi pasti kalian kenal dengan kode Hex(hexadecimal) seperti #FFFFFF. Kode Hex tersebut merupakan kode untuk memberikan warna putih pada sebuah objek. Kode hex ini adalah kode paling popular, karena cara penulisannya yang sederhana.

Tapi tahukah kalian bahwa ada 6 jenis cara penulisan kode warna? Kalau belum tahu, inilah beberapa cara penulisan kode warna yang dapat kalian terapkan pada saat membuat desain website.

• Warna Hexadecimal
• Warna RGB
• Warna RGBA
• Warna HSL
• Warna HSLA
• Warna berdasarkan nama

Warna Hexadecimal

Warna hexadecimal adalah kombinasi huruf dan angka (#RRGGBB) yang menunjukkan identitas warna tertentu contoh : #0000FF yang menunjuk ke warna biru. Warna hexadecimal terdiri dari RR (red), GG (green) and BB (blue). Berikut contoh cara penggunaan warna hexadesimal dalam css :

p {
     color : #000000;
     border : 1px solid #ffffff;
 }

Contoh diatas yaitu menerpakan warna tulisan yang ada pada semua tag paragraf <p>..</p> dengan warna hitam dan diberi garis kotak warna putih.

Warna RGB

Warna RGB hampir mirip dengan hexadecimal cuman lebih kepada nilai-nilai angka decimal dengan format rgb(R,G,B) dimana nilai maksimal masing adalah integer dengan range 0-255. Contoh rgb(0,0,0,0) sama dengan #000000 dalam hexa yang merujuk ke warna hitam. Berikut contoh penggunaanya :

p {
     color : rgb(0,0,0,0);
     border : 1px solid rgb(255,255,255,255);
 }

Warna RGBA

Warna RGBA sama dengan warna RGB, perbedaan terletak pada nilai A=alpha (tingkat transparan). RGBA ditulis denga cara rgb(R,G,B,A). Contoh penggunaanya :

p {
      color : rgb(0,0,0,0,1); /* nilai 1 adalah alpha/opacity */
}

Warna HSL

HSL adalah warna kombinas hue-saturation-lightness. Warna HSL ini memang jarang sekali digunakan karena kombinasi angka masing-warna agak sulit dan tidak semua browser mendukungnya. Contoh penggunaanya :

p {
     color : hsl(0, 100%, 50%); /* warna merah */
}

Warna HSLA

Warna HSLA sama dengan HSL, hanya berbeda pada tambahan nilai alpha. Lihat contoh berikut :

p {
     color : hsl(0, 100%, 50%,1); /* warna merah dengan opacity 1 */ 
}

Warna berdasarkan nama

Cara penulisan warna ini sama seperti cara kita menulis warna dalam Bahasa Inggris. Beberapa waktu lalu juga saya sudah membuat sebuah artikel tentang penulisan warna ini dengan judul Daftar Kode Warna Yang Memiliki Keyword

Berikut ini adalah contoh cara penggunaannya:

p {
color : red;   /* warna merah */
}

Baiklah teman-teman, demikian artikel tentang beberapa jenis dan cara penulisan kode warna, baik cara penulisan dan pengertian dari masing-masing kode wana yang telah dijelaskan diatas dapat bermanfaat. Terima kasih