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

  • Apa css sprite dan bagaimana membuatnya
    CSS sprite adalah sebuah teknik menampilkan gambar di halaman web atau blog dengan cara mengkombinasikan beberapa gambar dalam satu file dan kemudian memanggilnya melalui css dengan cara menuliskan posisi titik x dan titik y
  • Membuat background gradient dengan css3
    Salah satu fitur unggulan yang dihadirkan pada teknologi css3 adalah kemampuanya membuat warna latar/background gradient. Gradient adalah perubahan warna dari satu warna ke warna lainya yang dilakukan secara teratur. Gradient lebih identik pada hasil gambar yang diciptakan melalui proses penempatan kombinasi beberapa warna yang memenuhi sebuah area gambar. Biasanya untuk menghasilkan gambar gradient digunakan aplikasi pengolah gambar seperti photoshop, atau corel draw. Pada artikel ini saya akan berbagi tentang bagaimana membuat latar gradient dengan css3.
  • Referensi warna untuk HTML dan CSS
    Warna yang terlihat disebuah website/blog sangatlah bervariasi dan memiliki daya tarik tersendiri terhadap pengunjung, pingin tau lengkap referensi warna untuk HTML maupun CSS, silahkan baca panduan berikut.
  • 147 Nama warna dalam css
    Sebelumnya saya menulis tentang 6 cara penulisan warna dalam css. Pada tulisan ini saya berbagi tentang 147 nama warna yang bisa anda gunakan dalam css. Nama-nama warna ini sering dikatakan sebagai keyword yang merujuk pada warna tertentu yang hampir didukung oleh semua browser yang ada sekarang.
  • 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

Kiriman terbaru