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:

  1. warna css menggunakan nama warna
  2. warna css menggunakan hexadesimal
  3. warna css menggunakan RGB

Baca juga: Belajar css 2: cara menggunakan css untuk styling website

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
Red #ff0000 rgb(255,0,0)
White #ffffff rgb(255,255,255)
Silver #c0c0c0 rgb(192,192,192)
Black #000000 rgb(0,0,0)
Yellow #ffff00 rgb(255,255,0)
Blue #0000ff rgb(0,0,255)
Aqua #00ffff 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.

Comments