Nilai Warna Hukum CSS
Warna CSS
Warna dalam CSS dapat ditentukan dengan metode berikut:
- Warna heksadesimal
- Warna heksadesimal dengan transparansi
- warna RGB
- warna RGBA
- warna HSL
- warna HSLA
- Nama warna yang telah ditentukan sebelumnya/Cross-browser
- Dengan
currentcolor
kata kunci
Warna Heksadesimal
Warna heksadesimal ditentukan dengan: #RRGGBB, di mana bilangan bulat heksadesimal RR (merah), GG (hijau) dan BB (biru) menentukan komponen warna. Semua nilai harus antara 00 dan FF.
Misalnya, nilai #0000ff dirender sebagai biru, karena komponen biru disetel ke nilai tertingginya (ff) dan yang lainnya disetel ke 00.
Contoh
Tentukan warna HEX yang berbeda:
#p1 {background-color: #ff0000;} /* red */
#p2 {background-color: #00ff00;} /* green */
#p3 {background-color: #0000ff;} /* blue */
Warna Heksadesimal Dengan Transparansi
Warna heksadesimal ditentukan dengan: #RRGGBB. Untuk menambahkan transparansi, tambahkan dua digit tambahan antara 00 dan FF.
Contoh
Tentukan warna HEX yang berbeda dengan transparansi:
#p1a {background-color: #ff000080;} /* red transparency */
#p2a {background-color: #00ff0080;} /* green
transparency */
#p3a {background-color: #0000ff80;} /* blue
transparency */
Warna RGB
Nilai warna RGB ditentukan dengan fungsi rgb() , yang memiliki sintaks berikut:
rgb(red, green, blue)
Setiap parameter (merah, hijau, dan biru) mendefinisikan intensitas warna dan dapat berupa bilangan bulat antara 0 dan 255 atau nilai persentase (dari 0% hingga 100%).
Misalnya, nilai rgb(0,0,255) dirender sebagai biru, karena parameter biru disetel ke nilai tertingginya (255) dan yang lainnya disetel ke 0.
Juga, nilai berikut menentukan warna yang sama: rgb(0,0,255) dan rgb(0%,0%,100%).
Contoh
Tentukan warna RGB yang berbeda:
#p1 {background-color: rgb(255, 0, 0);} /* red */
#p2 {background-color: rgb(0, 255, 0);} /* green */
#p3 {background-color: rgb(0, 0, 255);} /* blue */
Warna RGBA
Nilai warna RGBA adalah perpanjangan dari nilai warna RGB dengan saluran alfa - yang menentukan opasitas objek.
Warna RGBA ditentukan dengan fungsi rgba() , yang memiliki sintaks berikut:
rgba(red, green, blue, alpha)
Parameter alfa adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (buram sepenuhnya).
Contoh
Tentukan warna RGB yang berbeda dengan opacity:
#p1 {background-color: rgba(255, 0, 0, 0.3);} /* red with opacity */
#p2 {background-color: rgba(0, 255, 0, 0.3);} /* green with opacity */
#p3 {background-color: rgba(0, 0, 255, 0.3);} /* blue with opacity */
Warna HSL
HSL adalah singkatan dari Hue, Saturation, dan Lightness - dan mewakili representasi koordinat silinder dari warna.
Nilai warna HSL ditentukan dengan fungsi hsl() , yang memiliki sintaks berikut:
hsl(hue, saturation, lightness)
Hue adalah derajat pada roda warna (dari 0 hingga 360) - 0 (atau 360) berwarna merah, 120 berwarna hijau, 240 berwarna biru. Saturasi adalah nilai persentase; 0% berarti bayangan abu-abu dan 100% adalah warna penuh. Ringan juga merupakan persentase; 0% hitam, 100% putih.
Contoh
Tentukan warna HSL yang berbeda:
#p1 {background-color: hsl(120, 100%, 50%);} /* green */
#p2 {background-color: hsl(120, 100%, 75%);} /* light green */
#p3 {background-color: hsl(120, 100%, 25%);} /* dark green */
#p4 {background-color: hsl(120, 60%, 70%);} /* pastel green */
Warna HSLA
Nilai warna HSLA adalah perpanjangan dari nilai warna HSL dengan saluran alfa - yang menentukan opasitas objek.
Nilai warna HSLA ditentukan dengan fungsi hsla() , yang memiliki sintaks berikut:
hsla(hue, saturation, lightness, alpha)
Parameter alfa adalah angka antara 0,0 (sepenuhnya transparan) dan 1,0 (buram sepenuhnya).
Contoh
Tentukan warna HSL yang berbeda dengan opacity:
#p1 {background-color: hsla(120, 100%, 50%, 0.3);} /* green with opacity */
#p2 {background-color: hsla(120, 100%, 75%, 0.3);} /* light green with opacity */
#p3 {background-color: hsla(120, 100%, 25%, 0.3);} /* dark green with opacity */
#p4 {background-color: hsla(120, 60%, 70%, 0.3);} /* pastel green with opacity */
Nama Warna yang Telah Ditentukan/Cross-browser
140 nama warna sudah ditentukan sebelumnya dalam spesifikasi warna HTML dan CSS.
Contoh: blue
, red
, coral
, brown
, dst:
Contoh
Tentukan nama warna yang berbeda:
#p1 {background-color: blue;}
#p2 {background-color: red;}
#p3 {background-color: coral;}
#p4 {background-color: brown;}
Daftar semua nama yang telah ditentukan sebelumnya dapat ditemukan di Referensi Nama Warna kami .
Kata Kunci warna saat ini
Kata currentcolor
kunci mengacu pada nilai properti warna dari suatu elemen.
Contoh
Warna batas elemen <div> berikut akan berwarna biru, karena warna teks elemen <div> adalah biru:
#myDIV {
color: blue; /* Blue text color */
border: 10px solid currentcolor;
/* Blue border color */
}