Media Belajar Bahasa Pemrograman | by APPKEY

HTML/CSSTutorial HTML/CSS 18 : Cara Menggunakan CSS Color Picker...

Tutorial HTML/CSS 18 : Cara Menggunakan CSS Color Picker dengan Mudah

-

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.

CSS Color Value

css-color-picker

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.

Artikel Terkait  Tutorial HTML/CSS 26 : Belajar Menggunakan HTML Input Tag

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)

 

Artikel Terkait  Tutorial HTML/CSS 19 : Memahami Background Image CSS

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.

Jasa Pembuatan Aplikasi

Jasa Pembuatan Website

Jasa Pembuatan Paket Aplikasi

Jasa Pembuatan Internet Marketing

Tutorial

Subscribe Sekarang

Dapatkan beragam informasi menarik tentang bahasa pemrograman langsung melalui email Anda. Subscribe sekarang dan terus belajar bersama kami!

Blog Post Ranking 10

Tutorial Python 9 : Cara membuat perulangan (Looping) pada Python

Pada artikel sebelumnya, Codekey telah menjelaskan tentang Operasi Kondisional Python yang di dalamnya menyinggung tentang percabangan dan perulangan. Belajar...

Tutorial Python 8 : Langkah Mudah Membuat Operasi Kondisional pada Python

Pada pembahasan sebelumnya, Codekey telah menjelaskan kepada Anda tentang pengoperasian string pada Python mulai dari menggabungkan hingga memanipulasi string...

Tutorial Dart 18 : Ayo Mulai, Pelajari Cara Install Flutter

Pada seri tutorial Dart kali ini, Codekey akan menampilkan hal yang sedikit berbeda, yaitu tentang aplikasi-aplikasi yang mendukung pemrograman...

Tutorial Python 7 : Tutorial Dasar Cara Mengoperasikan String pada Python

Anda ingin belajar Python dan ingin menjadi ahli dalam bahasa pemrograman Python? Mari belajar bersama Codekey! Pada pembahasan kali...

Tutorial Dart 1 : Pengenalan Bahasa Pemrogaman Dart untuk Pemula

Halo pembaca setia Codekey! Belajar pemrograman saat ini menjadi keharusan bagi semua orang yang ingin berkarir sebagai programmer, hal...

Tutorial PHP 8 : Memahami Array Multidimensi di PHP | Kapan dan Bagaimana Menggunakannya?

Pada artikel sebelumnya kami telah membahas tentang array PHP serta membahas sedikit tentang array multidimensi PHP. Pada artikel kali...

Tutorial Javascript 8 : Panduan Lengkap Cara Membuat Array di Javascript

Seperti bahasa pemrograman yang berorientasi objek lainnya, dalam JavaScript juga terdapat array. Jika Anda memiliki banyak objek yang ingin...

Tutorial SQL 9 : Cara Mengolah data Menggunakan Fungsi Agregasi

Agregasi data adalah cara runtuh, meringkas, atau mengelompokan data. Agregasi adalah hal yang selalu ada di setiap aplikasi untuk...

Tutorial SQL 1 : Pengenalan SQL untuk Pemula

Pernahkah Anda mendengar istilah SQL sebelumnya? Saat terjun ke dunia IT khususnya coding pemrograman komputer, SQL adalah salah satu...

Tutorial SQL 8 : Bagaimana Fungsi dan Penggunaan Constraint dalam SQL?

Pada artikel sebelumnya Anda telah mempelajari tentang wildcard SQL, pada artikel kali ini kami akan menjelaskan tentang constraint SQL. Jika...

Bisnis

Online Service

Peluang Bisnis

Model Bisnis

Entrepreneurship

Uang

Ketrampilan

Outsourcing

Monetize

Pemasaran

SEO

Internet Marketing

Dasar Pemasaran

Strategi Pemasaran

Situs Web Analitik

Iklan

Teknologi

Teknologi Terbaru

AI

Komputer

Jaringan

Paling Sering dibaca
Mungkin Anda Menyukainya