Color Pada CSS
CSS menggunakan colory key untuk menentukan warna. Biasanya, ini digunakan untuk mengatur color (warna) baik untuk latar depan suatu elemen (mis., Teksnya) atau yang lain untuk latar belakang elemen. Mereka juga dapat digunakan untuk mempengaruhi color (warna) perbatasan dan efek dekoratif lainnya. Anda dapat menentukan nilai warna Anda dalam berbagai format. Tabel berikut mencantumkan semua format yang mungkin digunakan -
| Format | Syntax | Contoh |
|---|---|---|
| Hex Code | #RRGGBB | p{color:#FF0000;} |
| Short Hex Code | #RGB | p{color:#6A7;} |
| RGB % | rgb(rrr%,ggg%,bbb%) | p{color:rgb(50%,50%,50%);} |
| RGB Absolute | rgb(rrr,ggg,bbb) | p{color:rgb(0,0,255);} |
| keyword | aqua, black, etc. | p{color:teal;} |
Warna CSS - Kode Heksadesimal Heksadesimal adalah 6 digit representasi warna. Dua digit pertama (RR) mewakili nilai merah, dua berikutnya adalah nilai hijau (GG), dan yang terakhir adalah nilai biru (BB). Nilai heksadesimal dapat diambil dari perangkat lunak grafik seperti Adobe Photoshop, Jasc Paintshop Pro, atau bahkan menggunakan Advanced Paint Brush bisa juga dari web yang menyediakan warna. Setiap kode heksadesimal akan didahului dengan tanda pagar atau tanda pagar '#'.
Berikut ini adalah contoh untuk menggunakan notasi heksadesimal.
| Color | Color HEX |
|---|---|
| #000000 | |
| #FF0000 | |
| #00FF00 | |
| #0000FF | |
| #FFFF00 | |
| #00FFFF | |
| #FF00FF | |
| #C0C0C0 | |
| #FFFFFF |
Warna CSS - Kode Heksadesimal Pendek Ini adalah bentuk yang lebih pendek dari notasi enam digit. Dalam format ini, setiap digit direplikasi untuk mencapai nilai enam digit yang setara. Misalnya: # 6A7 menjadi # 66AA77. Nilai heksadesimal dapat diambil dari perangkat lunak grafik seperti Adobe Photoshop, Jasc Paintshop Pro, atau bahkan menggunakan Advanced Paint Brush. Setiap kode heksadesimal akan didahului dengan tanda pagar atau tanda pagar '#'.
Berikut ini adalah contoh untuk menggunakan notasi heksadesimal.
| Color | Color HEX |
|---|---|
| #000 | |
| #F00 | |
| #0F0 | |
| #0FF | |
| #FF0 | |
| #0FF | |
| #F0F | |
| #FFF |
Warna CSS - Nilai RGB Nilai warna ini ditentukan menggunakan properti rgb (). Properti ini mengambil tiga nilai, masing-masing untuk merah, hijau, dan biru. Nilai dapat berupa bilangan bulat antara 0 dan 255 atau persentase.
CATATAN - Tidak semua browser mendukung properti rgb () warna sehingga disarankan untuk tidak menggunakannya.
Berikut ini adalah contoh untuk menunjukkan beberapa warna menggunakan nilai RGB.
| Color | Color RGB |
|---|---|
| rgb(0,0,0) | |
| rgb(255,0,0) | |
| rgb(0,255,0) | |
| rgb(0,0,255) | |
| rgb(255,255,0) | |
| rgb(0,255,255) | |
| rgb(255,0,255) | |
| rgb(192,192,192) | |
| rgb(255,255,255) |
Warna Yang Aman Untuk Browser
Berikut adalah daftar 216 warna yang dianggap paling aman dan warna independen komputer. Warna-warna ini bervariasi dari kode hexa 000000 hingga FFFFFF. Warna-warna ini aman digunakan karena mereka memastikan bahwa semua komputer akan menampilkan warna dengan benar ketika menjalankan palet 256 warna -
| 000000 | 000033 | 000066 | 000099 | 0000CC | 0000FF |
| 003300 | 003333 | 003366 | 003399 | 0033CC | 0033FF |
| 006600 | 006633 | 006666 | 006699 | 0066CC | 0066FF |
| 009900 | 009933 | 009966 | 009999 | 0099CC | 0099FF |
| 00CC00 | 00CC33 | 00CC66 | 00CC99 | 00CCCC | 00CCFF |
| 00FF00 | 00FF33 | 00FF66 | 00FF99 | 00FFCC | 00FFFF |
| 330000 | 330033 | 330066 | 330099 | 3300CC | 3300FF |
| 333300 | 333333 | 333366 | 333399 | 3333CC | 3333FF |
| 336600 | 336633 | 336666 | 336699 | 3366CC | 3366FF |
| 339900 | 339933 | 339966 | 339999 | 3399CC | 3399FF |
| 33CC00 | 33CC33 | 33CC66 | 33CC99 | 33CCCC | 33CCFF |
| 33FF00 | 33FF33 | 33FF66 | 33FF99 | 33FFCC | 33FFFF |
| 660000 | 660033 | 660066 | 660099 | 6600CC | 6600FF |
| 663300 | 663333 | 663366 | 663399 | 6633CC | 6633FF |
| 666600 | 666633 | 666666 | 666699 | 6666CC | 6666FF |
| 669900 | 669933 | 669966 | 669999 | 6699CC | 6699FF |
| 66CC00 | 66CC33 | 66CC66 | 66CC99 | 66CCCC | 66CCFF |
| 66FF00 | 66FF33 | 66FF66 | 66FF99 | 66FFCC | 66FFFF |
| 990000 | 990033 | 990066 | 990099 | 9900CC | 9900FF |
| 993300 | 993333 | 993366 | 993399 | 9933CC | 9933FF |
| 996600 | 996633 | 996666 | 996699 | 9966CC | 9966FF |
| 999900 | 999933 | 999966 | 999999 | 9999CC | 9999FF |
| 99CC00 | 99CC33 | 99CC66 | 99CC99 | 99CCCC | 99CCFF |
| 99FF00 | 99FF33 | 99FF66 | 99FF99 | 99FFCC | 99FFFF |
| CC0000 | CC0033 | CC0066 | CC0099 | CC00CC | CC00FF |
| CC3300 | CC3333 | CC3366 | CC3399 | CC33CC | CC33FF |
| CC6600 | CC6633 | CC6666 | CC6699 | CC66CC | CC66FF |
| CC9900 | CC9933 | CC9966 | CC9999 | CC99CC | CC99FF |
| CCCC00 | CCCC33 | CCCC66 | CCCC99 | CCCCCC | CCCCFF |
| CCFF00 | CCFF33 | CCFF66 | CCFF99 | CCFFCC | CCFFFF |
| FF0000 | FF0033 | FF0066 | FF0099 | FF00CC | FF00FF |
| FF3300 | FF3333 | FF3366 | FF3399 | FF33CC | FF33FF |
| FF6600 | FF6633 | FF6666 | FF6699 | FF66CC | FF66FF |
| FF9900 | FF9933 | FF9966 | FF9999 | FF99CC | FF99FF |
| FFCC00 | FFCC33 | FFCC66 | FFCC99 | FFCCCC | FFCCFF |
| FFFF00 | FFFF33 | FFFF66 | FFFF99 | FFFFCC | FFFFFF |
Sampai disini dulu tutorial dari kita, semoga tutorial ini bermanfaat bagi anda dan jika bermanfaat jangan lupa di share, atas segala kekuranganya mohon dimaafkan, jika ada yang ingin ditanyakan silahkan tinggalkan komentar.
