CSS - Warna
CSS menggunakan nilai warna untuk menentukan warna. Biasanya, ini digunakan untuk menyetel warna baik untuk latar depan elemen (yaitu teksnya) atau untuk latar belakang elemen. Mereka juga dapat digunakan untuk mempengaruhi warna batas dan efek dekoratif lainnya.
Anda dapat menentukan nilai warna Anda dalam berbagai format. Tabel berikut mencantumkan semua kemungkinan format -
| Format | Sintaksis | Contoh |
|---|---|---|
| Kode Hex | #RRGGBB | p {warna: # FF0000;} |
| Kode Hex Pendek | #RGB | p {color: # 6A7;} |
| RGB% | rgb (rrr%, ggg%, bbb%) | p {warna: rgb (50%, 50%, 50%);} |
| RGB Mutlak | rgb (rrr, ggg, bbb) | p {color: rgb (0,0,255);} |
| kata kunci | aqua, hitam, dll. | p {warna: teal;} |
Format ini dijelaskan lebih detail di bagian berikut -
Warna CSS - Kode Hex
Heksadesimal adalah representasi 6 digit dari sebuah warna. Dua digit pertama (RR) mewakili nilai merah, dua digit berikutnya adalah nilai hijau (GG), dan yang terakhir adalah nilai biru (BB).
Nilai heksadesimal dapat diambil dari perangkat lunak grafis apa pun seperti Adobe Photoshop, Jasc Paintshop Pro, atau bahkan menggunakan Advanced Paint Brush.
Setiap kode heksadesimal akan diawali dengan tanda pagar atau tanda pagar '#'. Berikut adalah contoh penggunaan notasi heksadesimal.
| Warna | Warna HEX |
|---|---|
| # 000000 | |
| # FF0000 | |
| # 00FF00 | |
| # 0000FF | |
| # FFFF00 | |
| # 00FFFF | |
| # FF00FF | |
| # C0C0C0 | |
| #FFFFFF |
Warna CSS - Kode Hex Pendek
Ini adalah bentuk yang lebih pendek dari notasi enam digit. Dalam format ini, setiap digit direplikasi untuk mendapatkan nilai enam digit yang setara. Misalnya: # 6A7 menjadi # 66AA77.
Nilai heksadesimal dapat diambil dari perangkat lunak grafis apa pun seperti Adobe Photoshop, Jasc Paintshop Pro, atau bahkan menggunakan Advanced Paint Brush.
Setiap kode heksadesimal akan diawali dengan tanda pagar atau tanda pagar '#'. Berikut adalah contoh penggunaan notasi heksadesimal.
| Warna | Warna HEX |
|---|---|
| # 000 | |
| # F00 | |
| # 0F0 | |
| # 0FF | |
| # FF0 | |
| # 0FF | |
| # F0F | |
| #FFF |
Warna CSS - Nilai RGB
Nilai warna ini ditentukan menggunakan rgb( )Properti. Properti ini mengambil tiga nilai, masing-masing untuk merah, hijau, dan biru. Nilainya dapat berupa bilangan bulat antara 0 dan 255 atau persentase.
NOTE - Semua browser tidak mendukung properti warna rgb () jadi disarankan untuk tidak menggunakannya.
Berikut adalah contoh untuk menampilkan beberapa warna menggunakan nilai RGB.
| Warna | Warna 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) |
Membangun Kode Warna
Anda dapat membuat jutaan kode warna menggunakan Pembuat Kode Warna kami. Periksa kamiHTML Color Code Builder. Untuk menggunakan alat ini, Anda membutuhkan Java Enabled Browser.
Warna Aman Browser
Berikut adalah daftar 216 warna yang seharusnya paling aman dan warna independen komputer. Warna-warna ini bervariasi dari kode hexa 000000 hingga FFFFFF. Warna-warna ini aman digunakan karena memastikan bahwa semua komputer akan menampilkan warna dengan benar saat 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 |