Inilah Beberapa Jenis dan Cara Penulisan Kode Warna - Dalam dunia pemrograman penulisan arahan warna mempunyai beberapa jenis dan penulisannya yang berbeda-beda, arahan warna yang sering kita dengar yaitu RGB (Red Green Blue) dan Hex atau Hexadecimal. Selain kedua arahan warna tersebut ternyata masih ada lagi cara penulisan arahan warna dalam bahasa pemrograman css, beberapa diantaranya yaitu :
Disini aku akan menjelaskan secara singkat mengenai cara penulisan dari keenam arahan warna yang sudah aku sebutkan diatas. Penulisan arahan ini untuk di terapkan pada arahan pemrograman css dan di panggil memakai arahan pemrograman html, kedua bahasa pemrograman ini sangat berkaitan erat, keduanya akan saling membutuhkan dan melengkapi, umumnya arahan html dipakai untuk menciptakan sebuah kerangka pada blog atau website sedangkan arahan css dipakai untuk menunjukkan warna atau desain pada kerangka tersebut sehingga terlihat lebih indah.
Perlu Anda perhatikan bahwa tidak semua browser sanggup mendukung semua penulisan arahan warna, sehingga jikalau browser yang kita gunakan tidak mendukung salah satu dari 6 cara penulisan arahan warna tersebut maka blog atau situs web yang memakai salah satu penulisan arahan warna itu tidak akan menampilkan warna yang semestinya. Kita ketahui bahwa beberapa browser yang paling banyak dipakai dikala 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 contoh dalam penulisan arahan 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 arahan 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 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 arahan warna dibawah ini.
Kode:
Hasilnya:
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 lingkaran dari hexadecimal 00 dan FF yang memilih intensitas warnanya.
- Nilai angka terdiri dari (0-9) dan nilai abjad terdiri dari (A-F).
Kode:
Hasilnya:
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 lingkaran dari 0 hingga 255.
Kode:
Hasilnya:
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 lingkaran dari 0 hingga 255 dan parameter (Alpha) bernilai 0 hingga 1.
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 menunjukkan warna full sesuai dari warna Hue, jikalau 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 jikalau kita menurunkan nilainya hingga ke 0 kualitas warna akan semakin turun hingga menjadi warna abu-abu atau grey jikalau nilai Saturation 0. Lightness atau Brightness suatu tingkat kecerahan warna yang di hasilkan dari Hue, lightness mempunyai nilai persentasi dari 0 hingga 100, dimana jikalau kita atur ke nilai 0 maka warna yang dihasilkan akan menjadi hitam meskipun warna Hue merah, hijau, atau biru, jikalau kita menunjukkan nilai lightness 50 maka akan menghasilkan warna yang full misalkan warna pada Hue merah maka ketika kita menunjukkan nilai 50 pada warna lightness akan tetap menghasilkan warna merah, sedangkan jikalau kita menunjukkan nilai 100 maka akan menghasilkan warna putih meskipun warna Hue merah, hijau, atau biru. Contoh penulisan dan penerapannya menyerupai dibawah ini.
Kode:
Hasilnya:
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.
Kode:
Hasilnya:
Penulisan arahan 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:
Hasilnya:
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 arahan warna, kurang lebih ada enam jenis penulisan arahan warna yang saja jelaskan di atas, agar kedepannya aku sanggup menjelaskannya secara detail. Semoga bermanfaat.
- Hex (Hexadecimal)
- RGB (Red Green Blue)
- RGBA (Red Green Blue Alpha)
- HSL (Hue Saturation Lightness)
- HSLA (Hue Saturation Lightness Alpha)
- Color Names
Disini aku akan menjelaskan secara singkat mengenai cara penulisan dari keenam arahan warna yang sudah aku sebutkan diatas. Penulisan arahan ini untuk di terapkan pada arahan pemrograman css dan di panggil memakai arahan pemrograman html, kedua bahasa pemrograman ini sangat berkaitan erat, keduanya akan saling membutuhkan dan melengkapi, umumnya arahan html dipakai untuk menciptakan sebuah kerangka pada blog atau website sedangkan arahan css dipakai untuk menunjukkan warna atau desain pada kerangka tersebut sehingga terlihat lebih indah.
Perlu Anda perhatikan bahwa tidak semua browser sanggup mendukung semua penulisan arahan warna, sehingga jikalau browser yang kita gunakan tidak mendukung salah satu dari 6 cara penulisan arahan warna tersebut maka blog atau situs web yang memakai salah satu penulisan arahan warna itu tidak akan menampilkan warna yang semestinya. Kita ketahui bahwa beberapa browser yang paling banyak dipakai dikala 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 contoh dalam penulisan arahan 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 arahan 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 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 arahan 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 arahan warna untuk warna merah. Contoh penerapannya dalam arahan 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 lingkaran 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 arahan 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 arahan 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 lingkaran 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 menunjukkan warna apapun ketika nilai alpha 0, sedangkan jikalau 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 lingkaran 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 menunjukkan warna full sesuai dari warna Hue, jikalau 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 jikalau kita menurunkan nilainya hingga ke 0 kualitas warna akan semakin turun hingga menjadi warna abu-abu atau grey jikalau nilai Saturation 0. Lightness atau Brightness suatu tingkat kecerahan warna yang di hasilkan dari Hue, lightness mempunyai nilai persentasi dari 0 hingga 100, dimana jikalau kita atur ke nilai 0 maka warna yang dihasilkan akan menjadi hitam meskipun warna Hue merah, hijau, atau biru, jikalau kita menunjukkan nilai lightness 50 maka akan menghasilkan warna yang full misalkan warna pada Hue merah maka ketika kita menunjukkan nilai 50 pada warna lightness akan tetap menghasilkan warna merah, sedangkan jikalau kita menunjukkan 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 arahan 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 arahan warna, kurang lebih ada enam jenis penulisan arahan warna yang saja jelaskan di atas, agar kedepannya aku sanggup menjelaskannya secara detail. Semoga bermanfaat.
Komentar