Penulisan Kode Warna di CSS

belajar HTML dan CSS untuk pemula

Desain bermain di warna. Oleh sebab itu, pada tutorial CSS saat ini kita akan mengulas cara penulisan kode warna di CSS. CSS mempunyai banyak variasi nilai warna yang dapat dipakai.

Mengenal Model Warna RGB

Dalam desain di media visual seperti televisi ataupun monitor komputer, model warna yang dipakai ialah model warna RGB (Red Green Blue). Disebut RGB, sebab warna merah, hijau dan biru inilah dasar dari warna lainnya. Warna seperti kuning, coklat, pink, hitam dan putih asalnya dari kombinasi ketiga warna ini.

Didalam desain web, CSS mendukung sampai 16.777.216 perpaduan warna. Warna ini asalnya dari kombinasi warna merah, hijau dan biru itu. Masing-masing warna dasar ini bisa bernilai 0 sampai 255, dimana 0 ialah tanpa warna, 255 ialah warna maksimum. Di dunia ilmu komputer, perpaduan warna ini terkenal dengan 24bit warna, atau disebut juga true color. Kombinasi ketiga warna ini akan memberi kita 256 perpaduan merah x 256 perpaduan hijau x 256 perpaduan biru = 16.777.216 perpaduan warna.

Misalnya, agar mendapatkan warna kuning, sebetulnya warna kuning ialah kombinasi warna merah dan hijau. Agar mendapatkan warna kuning terang, maka kita perlu mencampurkan merah sebanyak 255, hijau sebanyak 255, dan biru sebanyak 0.

Format #RRGGBB

Format penulisan warna #RRGGBB ialah yang amat populer dipakai untuk CSS. Dimana RR ialah nilai untuk warna merah, GG untuk hijau, dan BB untuk warna biru. Setiap nilai ini berisi angka 00 hingga FF. Mengapa FF? Sebab CSS memakai angka hexadesimal. FF ialah nilai maksimum, equivalen dengan 255 dalam nilai desimal

Misalnya, #FF0000 ialah warna merah ‘murni’, #00FF00 ialah warna hijau murni, sedangkan #777777 ialah kode untuk warna silver.

Format #RGB

Selain memakai format warna 6 digit, CSS juga mendukung penulisan 3 digit. Format penulisan 3 digit ini adalah penulisan singkat dari 6 digit. Misalnya #RGB merupakan penulisan singkat dari #RRGGBB, #F0F ialah singkatan dari #FF00FF, #09A sama dengan #0099AA (merah=00, hijau=99, biru=AA).

Penulisan Desimal

Selain penulisan hexadesimal, CSS juga menyediakan penulisan warna memakai angka desimal. Format penulisannya ialah: rgb(0, 160, 255) atau rgb(0%, 63%, 100%), dimana urutan warna ialah merah, hijau, dan biru. Memakai format pertama, 255 sama dengan 100%. Bila kita menuliskan nilai diluar dari angka yang semestinya, yaitu 0 – 255 atau 0% – 100% maka CSS dengan otomatis akan menyamakannya dengan nilai yang terdekat. Format penulisan warna semacam ini tak terlalu biasa dipakai.

Kata Warna (Keyword)

Selain memakai kode warna dengan format RGB, CSS juga mendukung 17 kata warna dalam bahasa inggris, yaitu: aqua, black, blue, fuchsia, gray, green, lime, maroon, navy, olive, orange, purple, red, silver, teal, white, dan yellow. Kata-kata ini asalnya dari warna dasar VGA pada Windows dan dikenal pula dengan istilah classic internet color. Berikut tabel lengkap kata warna CSS:

Tabel Kata Warna dalam CSS

Keyword Warna Nilai RGB
aqua #00ffff
black #000000
blue #0000ff
fuchsia #ff00ff
gray #808080
green #008000
lime #00ff00
maroon #800000
navy #000080
olive #808000
orange #ffa500
purple #800080
red #ff0000
silver #c0c0c0
teal #008080
white #ffffff
yellow #ffff00
Selain tabel warna standar di atas, beberapa modern web browser juga mendukung keyword warna yang disebut 147 SVG colors (atau X11 colors). Daftar lengkap untuk keyword warna tambahan ini bisa dilihat di : https://developer.mozilla.org/en-US/docs/CSS/color_value.

Nilai property: Transparent

Pada kasus tertentu, kita mau sebuah tag dalam CSS jadi transparan, untuk kebutuhan ini CSS menyediakan keyword transparent sebagai nilai. Dengan memberikan nilai transparan, sebuah tag akan ‘melewatkan’ warna dari tag dibelakangnya.

Sebagai contoh pemakaian kode warna diatas, saya akan menampilkannya dalam file warna.html sebagai berikut:

<!DOCTYPE html>
<html>
<head>
   <title>Contoh Penulisan Kode Warna CSS</title>
   <style type="text/css">
            p.satu 
            p.dua 
            p.tiga 
            p.empat 
            p.lima
    </style>
</head>

<body>
       <p class="satu">
          Kalimat ini akan berwarna biru
       </p>
   <br />
       <p class="dua">
          Kalimat ini akan berwarna merah
       </p>
   <br />
       <p class="tiga">
          Kalimat ini akan berwarna hijau
       </p>
   <br />
       <p class="empat">
          Kalimat ini akan berwarna orange
       </p>
   <br />
       <p class="lima">
          Kalimat ini tampaknya tak akan tampak
       </p>
</body>
</html>

Seperti yang tampak dari kode HTML di atas, setiap kalimat diset memakai kode warna yang berbeda. Yang jadi menarik, nilai transparent yang diberikan kepada selector class=”lima” jadi tidak tampak, dan cuma tampak bila di blok.

Selain kode warna, property dari CSS bisa bernilai seperti pixel, point, ataupun persen. Perbedaan nilai ini akan kita bahas pada Mengenal Satuan Nilai (Value) dalam CSS.


Butuh Web Developer Makassar atau Jasa SEO di Makassar yang bergaransi? Jangan ragu dengan infanthree.com. Kami juga penyedia Jasa Pembuatan Aplikasi Android di Makassar yang terkemuka. Selain itu ada layanan SEM, SMM, Internet Marketing Agency Makassar dan Social Media, Pembuatan Logo, Konten, Video, Maskot dan Instalasi jaringan ataupun mikrotik, hingga pelatihan komputer dan internet marketing.

Tinggalkan Balasan

Alamat email Anda tidak akan dipublikasikan. Ruas yang wajib ditandai *

WhatsApp chat