6 Cara penulisan warna dalam css

Cara penulisan warna dalam css untuk keperluan halaman web bisa kita lakukan dengan 6 cara. Semuanya mengarah pada penggunaan warna yang sama tapi ditulis dengan cara berbeda. Berikut ini saya akan berbagi tentang beberapa metode penulisan warna dalam css yang bisa anda gunakan.

Warna yang bisa kita gunakan dalam css terdiri dari :

• 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

Menentukan warna berdasar nama warna dalam bahasa inggris ini paling mudah dan sering digunakan pada kasus-kasus sederhana. Kita cukup menulis nama warna misal merah ditulis red, hijau ditulis green dll. Berikut contohnya :

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

Silahkan lihat 147 nama warna dalam css.

Mungkin sekarang anda sudah mengetahui kenapa banyak sekali variasi cara menuliskan warna dalam css.

Selamat mencoba dan selamat belajar.

Zainal Hakim

** Bebas disunting dengan menyebutkan sumber **