Belajar css 4: warna pada css

Kali ini kita akan belajar tentang warna pada css, serta bagaimana cara untuk penerapan daripada nilai/value warna itu sendiri.

belajar warna pada css

Di materi ini saya juga mau membahas mengenai properti yang berhubungan dengan warna di css yaitu color.

Warna pada CSS

Warna pada css biasanya ditentukan menurut value/nilai sebagai berikut:

warna css menggunakan nama warna
warna css menggunakan hexadesimal
warna css menggunakan RGB

Warna css menggunakan nama warna

Dimana elemen html yang akan diberikan warna dengan css, menggunakan nama warna itu sendiri secara langsung untuk nilai pada properti css-nya.

Misalnya white, black, yellow, green dan lain-lain.

contoh penggunaan

.color-name {    
  color: yellow;   
}

misalkan saya mau pada kodingan dari html dbawah ini yaitu ketika tampil pada web browser pada bagian textnya berwarna kuning(yellow).

<!DOCTYPE html>
<html>
  <head>   
    <title> Warna Pada Css </title>   
    <style type="text/css">      
      .color-name {         
        color: yellow;      
      }   
    </style>
  </head>
  <body>   
    <p class="color-name">
      Learn with staykoding! 
    </p>
  </body>
</html>

Maka hasilnya akan menampilkan text berwarna kuning seperti gambar dibawah ini:

hasilnya text jadi warna kuning — Text menjadi warna kuning

Warna css menggunakan hexadesimal

Warna css dengan hexadesimal juga dikenal dengan nama warna nilai hex.

Dalam artian? Jadi nilai hex ini merupakan nilai yang terdiri dari huruf maupun angka yang dapat menentukan warna apa yang akan diterapkan pada elemen html.

Nilai hex tersebut dimulai dari angka 0 sampai 9 hingga huruf a sampai f.

Misalnya #ffffff, #000000, #0000ff, #ab9900, dan lain-lain.

Contoh penggunaan

.color-hex {    
  color: #00ff00;
}

Ketika diterapkan dengan kodingan html dibawah ini, maka warna textnya akan berwarna hijau

<!DOCTYPE html>
<html>
  <head>   
    <title> Warna Pada Css </title>   
    <style type="text/css">      
      .color-hex {         
        color: #00ff00;      
      }   
    </style>
  </head>
  <body>   
      <p class="color-hex">
        Learn with staykoding!
      </p>
  </body>
</html>

Dari kodingan html diatas dapat dilihat gambar dibawah ini menampilkan text dengan warna hijau:

hasilnya text jadi warna hijau — Text menjadi warna hijau

Warna css menggunakan RGB

Pernah dengar warna RGB? RGB merupakan singkatan dari R yaitu red, G yaitu green dan B yaitu blue.

Dapat diartikan kalau warna RGB merupakan warna hasil campuran dari 3 warna itu tadi red(merah), green(hijau) dan blue(biru).

Untuk format penulisan warna dengan rgb adalah sebagai berikut.

rgb(number, number, number)

Sebagai contoh rgb(255,255,255) atau rgb(0,0,255) dan lain-lain.

Contoh penggunaannya pada css

.color-rgb {    
  color: rgb(0,0,255);
}

saat kita padukan dengan html maka kodingannya seperti dibawah ini

<!DOCTYPE html>
<html>
  <head>   
    <title> Warna Pada Css </title>   
    <style type="text/css">      
      .color-rgb {         
        color: rgb(0,0,255);      
      }   
    </style>
    </head>
    <body>   
      <p class="color-rgb">
        Learn with staykoding! 
      </p>
    </body>
</html>

Ketika kode html dijalankan pada browser maka akan tampil seperti dibawah ini

hasilnya text menjadi warna biru — Text menjadi warna biru

Contoh warna pada css menggunakan nama warna, hexadesimal dan rgb

Warna	Nama Warna	HEX Warna	RGB Warna
Warna	Nama Warna Red	HEX Warna #ff0000	RGB Warna rgb(255,0,0)
Warna	Nama Warna White	HEX Warna #ffffff	RGB Warna rgb(255,255,255)
Warna	Nama Warna Silver	HEX Warna #c0c0c0	RGB Warna rgb(192,192,192)
Warna	Nama Warna Black	HEX Warna #000000	RGB Warna rgb(0,0,0)
Warna	Nama Warna Yellow	HEX Warna #ffff00	RGB Warna rgb(255,255,0)
Warna	Nama Warna Blue	HEX Warna #0000ff	RGB Warna rgb(0,0,255)
Warna	Nama Warna Aqua	HEX Warna #00ffff	RGB Warna rgb(0,255,255)

Dalam penggunaan nilai nama, hex dan rgb warna tidak hanya diperuntukan untuk properti color, akan tetapi bisa juga untuk properti css lain misalnya background, border dll.

cukup sekian pembahasan kita kali ini mengenai warna pada css, semoga dapat membantu teman- teman untuk lebih paham dalam belajar css.

Daftar Tutorial CSS

Comments