Last Updated on September 13, 2021 by
Memilih warna ketika styling website yang sedang Anda bangun adalah hal yang sangat penting agar website yang Anda buat menjadi lebih menarik. CSS Color Picker sangat membantu Anda dalam menentukan warna yang tepat untuk website Anda.
Artikel kali ini akan membahas tentang CSS Color Picker. Jika Anda tertarik untuk tahu, pastikan Anda menyimak seri Tutorial HTML/CSS kali ini.
Table of Contents
CSS Color Value
CSS menggunakan color value untuk menentukan suatu warna yang spesifik. Biasanya, CSS Color Value digunakan untuk mengatur 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 CSS Color Value Anda dalam berbagai format. Tabel berikut mencantumkan semua format yang biasa 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;} |
Format ini akan dijelaskan selengkapnya di bawah ini:
CSS Color: Hex Code
Heksadesimal adalah representasi 6 digit dari warna. Dua digit pertama (RR) yang mewakili nilai merah, dua berikutnya adalah nilai hijau (GG) dan 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 didahului dengan tanda pon atau hash ‘#’. Berikut ini adalah contoh penggunaan notasi Heksadesimal.
| Color HEX | |
| Warna Hitam | #000000 |
| Warna Merah | #FF0000 |
| Warna Hijau | #00FF00 |
| Warna Biru Tua | #0000FF |
| Warna Kuning | #FFFF00 |
| Warna Tosca | #00FFFF |
| Warna Ungu | #FF00FF |
| Warna Abu Tua | #C0C0C0 |
| Warna Abu Muda | #FFFFFF |
CSS Color: Short Hex Codes
Short Hex Codes adalah bentuk yang lebih pendek dari notasi enam digit. 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 didahului dengan tanda pon atau hash ‘#’. Berikut ini adalah contoh penggunaan notasi Heksadesimal.
| Color | Color HEX |
| Warna Hitam | #000 |
| Warna Merah | #F00 |
| Warna Hijau | #0F0 |
| Warna Biru Tua | #0FF |
| Warna Kuning | #FF0 |
| Warna Tosca | #0FF |
| Warna Ungu | #F0F |
| Warna Abu Muda | #FFF |
CSS Color: Nilai RGB
Nilai warna ini ditentukan menggunakan properti rgb(). Properti ini mengambil tiga nilai, masing-masing untuk warna merah, hijau, dan biru. Nilainya bisa berupa bilangan bulat antara 0 dan 255 atau persentase.
Semua browser tidak mendukung properti warna rgb() sehingga disarankan untuk tidak menggunakannya. Berikut adalah contoh untuk menunjukkan beberapa warna menggunakan nilai RGB.
| Color | Color RGB |
| Warna Hitam | rgb(0,0,0) |
| Warna Merah | rgb(255,0,0) |
| Warna Hijau | rgb(0,255,0) |
| Warna Biru Tua | rgb(0,0,255) |
| Warna Kuning | rgb(255,255,0) |
| Warna Tosca | rgb(0,255,255) |
| Warna Ungu | rgb(255,0,255) |
| Warna Abu Tua | rgb(192,192,192) |
| Warna Abu Muda | rgb(255,255,255) |
Demikianlah penjelasan CSS Color Picker. Artikel ini dibuat agar Anda tidak kesulitan untuk menentukan warna-warna yang aman saat bekerja dengan CSS dan HTML maupun perangkat dan bahasa pemrograman lainnya. Jika Anda tertarik untuk tahu lebih banyak tentang HTML atau CSS pastikan Anda mengunjungi seri tutorial HTML/CSS di Codekey.
Situs Codekey menyediakan berbagai artikel, materi, tutorial, tips, dan trik untuk Anda belajar bahasa pemrograman, tidak hanya HTML dan CSS tetapi juga bahasa pemrorgraman lainnya. Pastikan Anda mendapat update terbaru dari situs Codekey.
Jasa Pembuatan Aplikasi, Website dan Internet Marketing | PT APPKEY
PT APPKEY adalah perusahaan IT yang khusus membuat aplikasi Android, iOS dan mengembangkan sistem website. Kami juga memiliki pengetahuan dan wawasan dalam menjalankan pemasaran online sehingga diharapkan dapat membantu menyelesaikan permasalahan Anda.
