Belajar css #3 warna pada css

Saya yakin yang namanya warna kamu pasti tahu. Di kehidupan kita sehari-haripun warna sering kita temui.

Mengenai warna kali ini kita akan belajar tentang warna pada css.

Dimana penggunaan warna pada css tak pernah lepas, apalagi dalam mendesain website dengan css.

Warna pada CSS

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

Color name css(warna css menggunakan nama warna)
Hexadesimal color value css(warna css menggunakan hexadesimal)
RGB value css(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. Pada css nya menggunakan nama warna itu sendiri secara langsung.

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 maka pada 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 seperti dibawah ini:

Text menjadi warna kuning

Warna css menggunakan hexadesimal

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

Maksudnya seperti apa? Jadi nilai hex ini merupakan nilai yang terdiri dari huruf maupun angka yang dapat menentukan warna apa yang akan diterapkan.

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>

Maka hasilnya dapat dilihat dibawah ini:

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 css sendiri adalah sebagai berikut.

rgb(<number>,<number>,<number>)

Sebagai contoh

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

Contoh penggunaan pada css

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

saat saya padukan dengan html maka kodingannya 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

Text menjadi warna biru

Contoh warna pada css menggunakan nama warna, hexadesimal warna 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)