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 **

Artikel Lainnya

  • Membuat halaman web dengan latar background bintang dengan css
    Website atau halaman web biasanya dibuat semenarik mungkin, bisa dengan menggunakan gambar, tulisan, animasi ataupun dengan hiasan objek lainnya. Berikut ini saya akan berbagi tentang bagaimana membuat halaman web dengan latar atau background bintang dengan perintah CSS
  • Menggunakan banyak background gambar dengan css
    Berkreasi tiada batas itu yang tentunya kita harapkan bisa dilakukan dengan css. Banyak hal yang anda bisa lakukan agar tampilan sebuah halaman bisa lebih menarik dengan bantuan css. Kira bisa atur gambar, text atau objek lainya dengan cukup mudah. Termasuk mengatur gambar latar/background yang berikut ini saya sampaikan yaitu bagaimana menampilkan banyak gambar sebagai latar dari halaman web.
  • Cara membuat css dengan dreamweaver
    Cara membuat css dengan dreamweaver sangat mudah, kita bisa gunakan beberapa cara dengan bantuan fitur yang tersedia dalam dreamweaver.
  • Cara mengatur tampilan dengan css sesuai dengan media outputnya
    Perkembangan teknologi web sekarang ini memungkinkan kita mengatur hasil output ke banyak media dengan berbagai macam bentuk tampilan. Bisa sesuai aslinya, bahkan bisa dengan format tampilan tertentu sesuai dengan media yang kita inginkan.
  • Efek gambar grayscale dengan css
    Beberapa waktu lalu saya pernah tulis tutorial tentang Membuat efek gambar dengan css, yang membahas tentang bagaimana caranya menambahkan efek glow, berputar, dan transparan. Pada tutorial kali ini saya akan berbagi tentang bagaimana membuat efek gambar grayscale atau hitam putih dengan css.

Kiriman terbaru