Media Belajar Bahasa Pemrograman | by APPKEY

HTML/CSS Tutorial 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

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 21 : Pelajari Cara Membuat Komentar pada Bahasa HTML

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 8 : Membuat 3 Tipe List di HTML dengan Mudah

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 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 Swift 2 : Tahap Awal Persiapan dan Mengatur Lingkungan Kerja pada Swift

Setelah Anda mengenal bahasa pemrograman Swift 4, langkah selanjutnya adalah Anda perlu memulai pemrograman Swift 4 dengan cara install...

Tutorial Javascript 6 : Cara Membuat Event pada Javascript

Event JavaScript adalah tindakan atau proses khusus yang terjadi dalam program atau situs web yang akan Anda kembangkan. Anda...

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 Javascript 1 : Pengenalan Javascript untuk Pemula

Ada banyak sekali jenis bahasa pemrograman yang bisa Anda pelajari untuk menjadi seorang programmer profesional. Salah satunya adalah belajar...

Tutorial Dart 3 : Belajar Menggunakan Syntax atau Perintah dasar Dart

Setelah mengatur lingkungan kerja serta instalasi Dart ke dalam sistem operasi yang kalian miliki, dalam pembuatan suatu program baik...

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 2 : Tahap Awal Cara Mudah Menulis Kode di Javascript

Kembali lagi di seri belajar Javascript bersama Codekey! Setelah di postingan sebelumnya Anda belajar Javascript terkait konsep-konsep dasarnya, kini...

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 PHP 9 : Belajar Menggunakan Sort Array Berdasarkan Key dan Value

Array PHP sangat berguna untuk para developer untuk menyimpan data pada variabel. Anda dapat mengelompokkannya dengan membuat kategori tertentu...

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