6 Cara penulisan warna dalam css

Cara penulisan warna pada cssCara 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 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 **

Komentar

Halaman Lainya

  • Cara Membagi halaman hasil cetak printer dengan css
    Jika kita mencetak sebuah halaman web yang isinya panjang, biasanya hasil cetaknya bersambung menjadi beberapa halaman yang tidak pasti bagian-bagianya. Bisa saja satu halaman terdiri dari beberapa bagian bahasan atau format yang berbeda sehingga menyulit
  • Membuat Background motif unik dengan CSS3
    Barusan habis jalan-jalan ke situs seberang, ketemu tutorial membuat motif gambar background yang sangat unik dibuat cuma dengan css3. Memang luar biasa tak pernah terbayangkan kalau hasilnya bisa mirip dengan sebuah gambar yang dibuat dengan aplikasi seperti photoshop.
  • Membuat efek kotak tulisan dengan css
    Panduan Cara Membuat efek kotak tulisan dengan css
  • Cara membuat dan menyisipkan CSS
    Panduan Cara membuat dan menyisipkan CSS pada halaman web
  • Membuat form login dengan css
    Membuat form login dengan css tidaklah susah hanya perlu beberapa menit untuk menyusun kode cssnya karena isian form yang dibuat hanya username, password dan tombol loginya. Beda kalau kita membuat form dengan css untuk keperluan yang lengkap seperti form

Kiriman terbaru