Kursus Membuat Web

iklan

Nilai Warna CSS

Warna

Warna dalam CSS dapat ditentukan dengan menggunakan beberapa metode berikut ini :

  1. Warna dengan nilai Hexadecimal
  2. Warna dengan nilai RGB
  3. Warna dengan nilai RGBA
  4. Warna dengan nilai HSL
  5. Warna dengan nilai HSLA
  6. Warna didefinisikan dengan Nama

Warna dengan nilai Hexadecimal

Nilai warna dengan hexadecimal di dukung di semua browser.

Sebuah warna hexadecimal ditentukan dengan: #RRGGBB, di mana RR (merah), GG (hijau) dan BB (biru), bilangan integer hexadecimal menentukan komponen warna. Semua nilai harus antara 0 dan FF.

Sebagai contoh, nilai #0000ff akan menghasilkan warna biru, karena komponen biru diatur ke nilai tertinggi (ff) dan yang lainnya diatur ke 0.

#p1 {background-color:#ff0000;} /* merah */
#p2 {background-color:#00ff00;} /* hijau */
#p3 {background-color:#0000ff;} /* biru */
Lihat ...

Warna dengan nilai RGB

Nilai warna dengan RGB di dukung di semua browser.

Sebuah nilai warna RGB ditentukan dengan : rgb (merah, hijau, biru). Setiap parameter (merah, hijau, dan biru) ditentukan menggunakan bilangan integer antara 0 sampai 255 atau nilai persentase (dari 0% sampai 100%).

Sebagai contoh, rgb (0,0,255) akan menghasilkan warna biru, karena parameter biru diatur ke nilai tertinggi (255) dan yang lainnya diatur ke 0.

Selain itu, nilai-nilai berikut ini juga akan menghasilkan warna yang sama: rgb (0,0,255) dan rgb (0%, 0%, 100%).

#p1 {background-color:rgb(255,0,0);} /* merah */
#p2 {background-color:rgb(0,255,0);} /* hijau */
#p3 {background-color:rgb(0,0,255);} /* biru */
Lihat ...

Warna dengan nilai RGBA

Saat tulisan ini saya tulis, nilai warna RGBA didukung di IE9 +, Firefox 3 +, Chrome, Safari, dan di Opera 10+.

Nilai warna RGBA merupakan perpanjangan dari nilai warna RGB dengan alpha channel - yang menentukan opacity dari objek.

Sebuah nilai warna RGBA ditentukan dengan : RGBA (merah, hijau, biru, alpha). Parameter alpha adalah angka antara 0.0 (sepenuhnya transparan) dan 1,0 (sepenuhnya buram).

#p1 {background-color:rgba(255,0,0,0.3);} /* merah dengan opacity */
#p2 {background-color:rgba(0,255,0,0.3);} /* hijau dengan opacity */
#p3 {background-color:rgba(0,0,255,0.3);} /* biru dengan opacity */ 
Lihat ...

Warna dengan nilai HSL

Saat tulisan ini saya tulis, nilai warna HSL didukung di IE9 +, Firefox, Chrome, Safari, dan di Opera 10+.

HSL singkatan dari hue, saturation, dan lightness - dan merupakan representasi silinder koordinat warna.

Sebuah nilai warna HSL ditentukan dengan : HSL (hue, saturation, lightness).

Hue adalah derajat putaran warna (0-360) - 0 (atau 360) adalah merah, hijau 120, 240 adalah biru. Saturation adalah nilai persentase; 0% berarti warna abu-abu dan 100% adalah warna penuh. Lightness juga persentase; 0% hitam, 100% putih.

#p1 {background-color:hsl(120,100%,50%);} /* hijau */
#p2 {background-color:hsl(120,100%,75%);} /* hijau muda */
#p3 {background-color:hsl(120,100%,25%);} /* hijau tua */
#p4 {background-color:hsl(120,60%,70%);} /* hijau pastel */
Lihat ...

Warna dengan nilai HSLA

Saat tulisan ini saya tulis, nilai warna HSLA didukung di IE9 +, Firefox 3 +, Chrome, Safari, dan Opera di 10+.

Nilai warna HSLA merupakan perpanjangan dari nilai warna HSL dengan alpha channel - yang menentukan opacity dari objek.

Sebuah nilai warna HSLA ditentukan dengan : HSLA (hue, saturation, lightness, alpha), dimana parameter alpha mendefinisikan opacity. Parameter alpha adalah angka antara 0.0 (sepenuhnya transparan) dan 1,0 (sepenuhnya buram).

#p1 {background-color:hsla(120,100%,50%,0.3);} /* hijau dengan opacity */
#p2 {background-color:hsla(120,100%,75%,0.3);} /* hijau muda dengan opacity */
#p3 {background-color:hsla(120,100%,25%,0.3);} /* hijau tua dengan opacity */
#p4 {background-color:hsla(120,60%,70%,0.3);} /* hijau pastel dengan opacity */ 
Lihat ...

Warna didefinisikan dengan Nama

140 nama warna yang telah ditetapkan pada HTML dan CSS. Lihatlah tabel nama warna standar.

muhammad falah

Saya Muhammad Falah, jika Anda ingin langsung belajar dengan Saya, silakan ikuti kursus membuat web yang Saya bimbing atau ikuti Saya di :

Muhammad Falah Youtube Channel Muhammad Falah LinkedIn Muhammad Falah Google Plus Muhammad Falah Twitter Muhammad Falah Facebook

copy right © 2015