√ Inilah Beberapa Jenis Dan Cara Penulisan Aba-Aba Warna

Inilah Beberapa Jenis dan Cara Penulisan Kode Warna - Dalam dunia pemrograman penulisan instruksi warna mempunyai beberapa jenis dan penulisannya yang berbeda-beda, instruksi warna yang sering kita dengar yaitu RGB (Red Green Blue) dan Hex atau Hexadecimal. Selain kedua instruksi warna tersebut ternyata masih ada lagi cara penulisan instruksi warna dalam bahasa pemrograman css, beberapa diantaranya yaitu :

• Hex (Hexadecimal)
• RGB (Red Green Blue)
• RGBA (Red Green Blue Alpha)
• HSL (Hue Saturation Lightness)
• HSLA (Hue Saturation Lightness Alpha)
• Color Names

Baca juga: Cara Memasang Widget Kode Warna di Blog

Disini aku akan menjelaskan secara singkat mengenai cara penulisan dari keenam instruksi warna yang sudah aku sebutkan diatas. Penulisan instruksi ini untuk di terapkan pada instruksi pemrograman css dan di panggil memakai instruksi pemrograman html, kedua bahasa pemrograman ini sangat berkaitan erat, keduanya akan saling membutuhkan dan melengkapi, umumnya instruksi html dipakai untuk menciptakan sebuah kerangka pada blog atau website sedangkan instruksi css dipakai untuk memperlihatkan warna atau desain pada kerangka tersebut sehingga terlihat lebih indah.

Perlu Anda perhatikan bahwa tidak semua browser sanggup mendukung semua penulisan instruksi warna, sehingga kalau browser yang kita gunakan tidak mendukung salah satu dari 6 cara penulisan instruksi warna tersebut maka blog atau situs web yang memakai salah satu penulisan instruksi warna itu tidak akan menampilkan warna yang semestinya. Kita ketahui bahwa beberapa browser yang paling banyak dipakai ketika ini yaitu Chrome, Firefox, Safari, Opera, Internet Explorer dan lainnya. Anda sanggup melihat pada sumber kemudian lintas di situs Anda, kebanyakan pemirsa atau pengunjung blog situs Anda memakai browser apa ? Ini sanggup Anda jadikan sebagai pola dalam penulisan instruksi warna untuk situs web Anda.

Baja juga: Cara Mendaftarkan Blog ke Google Analytics

Setelah Anda menganalisis browser yang paling banyak dipakai oleh pengunjung situs Anda, sekarang saatnya Anda untuk mencoba menerapkan cara penulisan instruksi warna yang sempurna untuk situs web blog Anda, jangan hingga situs Anda tidak menampilkan warna yang semestinya ketika pengunjung blog Anda sedang membuka web Anda dengan memakai browser yang berbeda. Karena warna juga merupakan faktor yang penting dalam sebuah desain web. Oleh alasannya ialah itu ini sangat penting untuk kita pelajari dan menerapkannya pada blog atau website kita masing-masing. Baiklah eksklusif saja kita mulai bahas mengenai 6 jenis dan cara penulisan instruksi warna dibawah ini.

Warna Hex (Hexadecimal)

Kode warna hexadecimal ialah kombinasi dari angka dan huruf, format penulisannya menyerupai ini #RRGGBB. Warna hexadecimal terdiri dari RR (Red), GG (Green), dan BB (Blue). Dalam penulisan warna hexadecimal #FF0000 ialah penulisan instruksi warna untuk warna merah. Contoh penerapannya dalam instruksi css dan html menyerupai berikut ini.

Kode:

<style> .merah{color:#ff0000} .hijau{color:#00ff00} .biru{color:#0000ff} </style> <div class="merah">Ini ialah contoh warna merah.</div> <div class="hijau">Ini ialah contoh warna hijau.</div> <div class="biru">Ini ialah contoh warna biru.</div>

Hasilnya:

Ini ialah contoh warna merah.

Ini ialah contoh warna hijau.

Ini ialah contoh warna biru.

Baca juga: Kumpulan Kode Tag HTML Lengkap Dengan Fungsinya

Perlu Anda Ketahui:
- Nilai warna hexadecimal didukung oleh semua browser.
- Nilai warna hexadecimal ditentukan dengan: #RRGGBB.
- Nilai RR (Red), GG (Green), dan BB (Blue) ialah bilangan bundar dari hexadecimal 00 dan FF yang memilih intensitas warnanya.
- Nilai angka terdiri dari (0-9) dan nilai abjad terdiri dari (A-F).

Warna RGB (Red Green Blue)

Kode warna RGB tidak beda jauh dengan instruksi warna hexadecimal hanya saja warna RGB lebih ke nilai desimal atau decimal, format penulisannya menyerupai ini rgb(red,green,blue). Warna RGB terdiri dari Red, Blue, Green. Dalam penulisan warna RGB, rgb(255,0,0) ialah penulisan instruksi warna untuk warna merah. Contoh penulisan dan penerapannya menyerupai dibawah ini.

Kode:

<style> .merah{color:rgb(255,0,0)} .hijau{color:rgb(0,255,0)} .biru{color:rgb(0,0,255)} </style> <div class="merah">Ini ialah contoh warna merah.</div> <div class="hijau">Ini ialah contoh warna hijau.</div> <div class="biru">Ini ialah contoh warna biru.</div>

Hasilnya:

Ini ialah contoh warna merah.

Ini ialah contoh warna hijau.

Ini ialah contoh warna biru.

Perlu Anda Ketahui:
- Nilai warna RGB didukung di semua browser.
- Nilai warna RGB ditentukan dengan: rgb(red,green,blue).
- Setiap parameter (Red,Green,Blue) memilih intensitas warna sebagai bilangan bundar dari 0 hingga 255.

Warna RGBA (Red Green Blue Alpha)

Sama menyerupai dengan warna RGB, warna RGBA mempunyai nilai A (Alpha) atau Opacity yaitu tingkat transparan atau tembus pandang dengan nilai 0 hingga 1. Nilai 0 akan membuatnya menjadi transparan 100% jadi tidak akan memperlihatkan warna apapun ketika nilai alpha 0, sedangkan kalau nilai alpha 1 maka akan menghasilkan warna yang solid dan tidak transparan. Contoh penulisan dan penerapannya menyerupai dibawah ini.

Kode:

<style> .biru-100{color:rgba(0,0,255,1)} .biru-75{color:rgba(0,0,255,0.75)} .biru-50{color:rgba(0,0,255,0.5)} .biru-25{color:rgba(0,0,255,0.25)} .biru-0{color:rgba(0,0,255,0)} </style> <div class="biru-100">Ini ialah contoh warna biru alpha 1.</div> <div class="biru-75">Ini ialah contoh warna biru alpha 0.75.</div> <div class="biru-50">Ini ialah contoh warna biru alpha 0.5.</div> <div class="biru-25">Ini ialah contoh warna biru alpha 0.25.</div> <div class="biru-0">Ini ialah contoh warna biru alpha 0.</div>

Hasilnya:

Ini ialah contoh warna biru alpha 1.

Ini ialah contoh warna biru alpha 0.75.

Ini ialah contoh warna biru alpha 0.5.

Ini ialah contoh warna biru alpha 0.25.

Ini ialah contoh warna biru alpha 0.

Perlu Anda Ketahui:
- Nilai warna RGBA tidak didukung di semua browser, hanya browser IE9+, Firefox, Chrome, Safari, dan Opera 10+ yang mendukung warna RGBA.
- Nilai warna RGBA ditentukan dengan: rgba(red,green,blue,alpha).
- Setiap parameter (Red,Green,Blue) memilih intensitas warna sebagai bilangan bundar dari 0 hingga 255 dan parameter (Alpha) bernilai 0 hingga 1.

Warna HSL (Hue Saturation Lightness)

Warna HSL merupakan kombinasi antara hue, saturation, dan lightness. Hue mempunyai nilai 0 hingga 360, dimana nilai 0 untuk warna merah, nilai 120 untuk warna hijau, dan nilai 240 untuk warna biru. Saturation mempunyai nilai persentasi dari 0 hingga 100, dimana nilai 0 ialah warna abu-abu atau grey dan nilai 100 untuk memperlihatkan warna full sesuai dari warna Hue, kalau warna Hue berada pada warna biru atau nilai 240 makan ketika kita atur nilai Saturation pada nilai 100 maka akan menghasilkan warna full sesuai dengan warna Hue, sedangkan kalau kita menurunkan nilainya hingga ke 0 kualitas warna akan semakin turun hingga menjadi warna abu-abu atau grey kalau nilai Saturation 0. Lightness atau Brightness suatu tingkat kecerahan warna yang di hasilkan dari Hue, lightness mempunyai nilai persentasi dari 0 hingga 100, dimana kalau kita atur ke nilai 0 maka warna yang dihasilkan akan menjadi hitam meskipun warna Hue merah, hijau, atau biru, kalau kita memperlihatkan nilai lightness 50 maka akan menghasilkan warna yang full misalkan warna pada Hue merah maka ketika kita memperlihatkan nilai 50 pada warna lightness akan tetap menghasilkan warna merah, sedangkan kalau kita memperlihatkan nilai 100 maka akan menghasilkan warna putih meskipun warna Hue merah, hijau, atau biru. Contoh penulisan dan penerapannya menyerupai dibawah ini.

Kode:

<style> .merah{color:hsl(0,100%,50%)} .hijau{color:hsl(120,100%,50%)} .biru{color:hsl(240,100%,50%)} </style> <div class="merah">Ini ialah contoh warna merah.</div> <div class="hijau">Ini ialah contoh warna hijau.</div> <div class="biru">Ini ialah contoh warna biru.</div>

Hasilnya:

Ini ialah contoh warna merah.

Ini ialah contoh warna hijau.

Ini ialah contoh warna biru.

Perlu Anda Ketahui:
- Nilai warna HSL tidak didukung di semua browser, hanya browser IE9+, Firefox, Chrome, Safari, dan Opera 10+ yang mendukung warna HSL.
- Nilai warna HSL ditentukan dengan: hsl(hue,saturation%,lightness%).
- Nilai H (Hue) mulai dari 0 hingga 360. Nilai 0 untuk warna merah, 120 untu warna hijau, 240 untuk warna biru, dan nilai 360 akan kembali menghasilkan warna merah.
- Nilai Saturation mempunyai persentasi mulai dari 0% hingga 100%. Nilai 0 akan menjadi warna grey dan nilai 100 akan menghasilkan warna full atau normal.
- Nilai Lightness mempunyai persentasi mulai dari 0% hingga 100%. Nilai 0 akan menjadi warna hitam, nilai 50 akan menjadi warna full atau normal, dan nilai 100 akan menjadi warna putih.

Warna HSLA (Hue Saturation Lightness Alpha)

Untuk penjelasannya sama menyerupai pada warna HSL, hanya saja warna HSLA mempunyai nilai A (Alpha) atau Opacity yaitu tingkat transparan atau tembus pandang yang sama menyerupai pada warna RGBA yaitu mempunyai nilai 0 hingga 1. Contoh penulisan dan penerapannya menyerupai dibawah ini.

Kode:

<style> .merah-100{color:hsla(0,100%,50%,1)} .merah-75{color:hsla(0,100%,50%,0.75)} .merah-50{color:hsla(0,100%,50%,0.5)} .merah-25{color:hsla(0,100%,50%,0.25)} .merah-0{color:hsla(0,100%,50%,0)} </style> <div class="merah-100">Ini ialah contoh warna merah hsla 1.</div> <div class="merah-75">Ini ialah contoh warna merah hsla 0.75.</div> <div class="merah-50">Ini ialah contoh warna merah hsla 0.5.</div> <div class="merah-25">Ini ialah contoh warna merah hsla 0.25.</div> <div class="merah-0">Ini ialah contoh warna merah hsla 0.</div>

Hasilnya:

Ini ialah contoh warna merah hsla 1.

Ini ialah contoh warna merah hsla 0.75.

Ini ialah contoh warna merah hsla 0.5.

Ini ialah contoh warna merah hsla 0.25.

Ini ialah contoh warna merah hsla 0.

Color Names (Nama Warna)

Penulisan instruksi warna dengan memakai Color Names memang sangat mudah, tentu syaratnya kita harus sanggup menghapal nama-nama warna dalam Bahasa Inggris. Anda sanggup membacanya pada artikel Daftar Nama Warna Lengkap Dengan Kode Hex, RGB, dan HSL disini https://www.w3schools.com/colors/colors_names.asp. Contoh penulisan dan penerapannya dibawah ini.

Kode:

<style> .merah{color:red} .hijau{color:green} .biru{color:blue} </style> <div class="merah">Ini ialah contoh warna merah.</div> <div class="hijau">Ini ialah contoh warna hijau.</div> <div class="biru">Ini ialah contoh warna biru.</div>

Hasilnya:

Ini ialah contoh warna merah.

Ini ialah contoh warna hijau.

Ini ialah contoh warna biru.

Perlu Anda Ketahui:
- Semua browser modern mendukung kurang lebih 140 nama warna (lihat pada artikel daftar nama warna).

Itulah klarifikasi singkat mengenai beberapa jenis dan cara penulisan instruksi warna, kurang lebih ada enam jenis penulisan instruksi warna yang saja jelaskan di atas, supaya kedepannya aku sanggup menjelaskannya secara detail. Semoga bermanfaat.
Sumber http://www.caramanual.com