Tutorial Warna
Warna yang ditampilkan menggabungkan cahaya MERAH, HIJAU, dan BIRU.
Nama Warna
Dengan CSS, warna dapat diatur dengan menggunakan nama warna:
Contoh
| Color | Name |
|---|---|
| Red | |
| Yellow | |
| Cyan | |
| Blue | |
| Magenta |
Nilai Warna CSS
Dengan CSS, warna dapat ditentukan dengan cara yang berbeda:
- Dengan nama warna
- Sebagai nilai RGB
- Sebagai nilai heksadesimal
- Sebagai nilai HSL (CSS3)
- Sebagai nilai HWB (CSS4)
- Dengan
currentcolorkata kunci
Warna RGB
Nilai warna RGB didukung di semua browser.
Nilai warna RGB ditentukan dengan: rgb( RED , GREEN , BLUE ).
Setiap parameter mendefinisikan intensitas warna sebagai bilangan bulat antara 0 dan 255.
Misalnya, rgb(0,0,255) dirender sebagai biru, karena parameter biru disetel ke nilai tertingginya (255) dan yang lainnya disetel ke 0.
Contoh
| Color | RGB | Color |
|---|---|---|
| rgb(255,0,0) | Red | |
| rgb(0,255,0) | Green | |
| rgb(0,0,255) | Blue |
Nuansa abu-abu sering didefinisikan menggunakan nilai yang sama untuk ketiga sumber cahaya:
Contoh
| Color | RGB | Color |
|---|---|---|
| rgb(0,0,0) | Black | |
| rgb(128,128,128) | Gray | |
| rgb(255,255,255) | White |
Warna Heksadesimal
Nilai warna heksadesimal juga didukung di semua browser.
Warna heksadesimal ditentukan dengan: # RR GG BB .
RR (merah), GG (hijau) dan BB (biru) adalah bilangan bulat heksadesimal antara 00 dan FF yang menentukan intensitas warna.
Misalnya, #0000FF ditampilkan sebagai biru, karena komponen biru disetel ke nilai tertingginya (FF) dan yang lainnya disetel ke 00.
Contoh
| Color | HEX | RGB | Color |
|---|---|---|---|
| #FF0000 | rgb(255,0,0) | Red | |
| #00FF00 | rgb(0,255,0) | Green | |
| #0000FF | rgb(0,0,255) | Blue |
Nuansa abu-abu sering didefinisikan menggunakan nilai yang sama untuk ketiga sumber cahaya:
Contoh
| Color | HEX | RGB | Color |
|---|---|---|---|
| #000000 | rgb(0,0,0) | Black | |
| #808080 | rgb(128,128,128) | Gray | |
| #FFFFFF | rgb(255,255,255) | White |
Huruf Besar atau Huruf Kecil?
Anda dapat menggunakan huruf besar atau huruf kecil untuk menentukan nilai heksadesimal.
Huruf kecil lebih mudah ditulis. Huruf besar lebih mudah dibaca.
Nama Warna
CSS mendukung 140 nama warna standar.
Pada bab berikutnya Anda akan menemukan daftar lengkap nama warna berdasarkan abjad dengan nilai heksadesimal:
| Color Name | Hex | Color |
|---|---|---|
| AliceBlue | #F0F8FF | |
| AntiqueWhite | #FAEBD7 | |
| Aqua | #00FFFF | |
| Aquamarine | #7FFFD4 | |
| Azure | #F0FFFF | |
| Beige | #F5F5DC | |
| Bisque | #FFE4C4 |
Kata Kunci warna saat ini
Kata currentcolorkunci 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 */
}