Inilah Beberapa Jenis dan Cara Penulisan Kode Warna

Inilah Beberapa Jenis dan Cara Penulisan Kode Warna - Dalam dunia pemrograman penulisan kode warna memiliki beberapa jenis dan penulisannya yang berbeda-beda, kode warna yang sering kita dengar yaitu RGB (Red Green Blue) dan Hex atau Hexadecimal. Selain kedua kode warna tersebut ternyata masih ada lagi cara penulisan kode 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 saya akan menjelaskan secara singkat mengenai cara penulisan dari keenam kode warna yang sudah saya sebutkan diatas. Penulisan kode ini untuk di terapkan pada kode pemrograman css dan di panggil menggunakan kode pemrograman html, kedua bahasa pemrograman ini sangat berkaitan erat, keduanya akan saling membutuhkan dan melengkapi, umumnya kode html digunakan untuk membuat sebuah kerangka pada blog atau website sedangkan kode css digunakan untuk memberikan warna atau desain pada kerangka tersebut sehingga terlihat lebih indah.

Perlu Anda perhatikan bahwa tidak semua browser dapat mendukung semua penulisan kode warna, sehingga jika browser yang kita gunakan tidak mendukung salah satu dari 6 cara penulisan kode warna tersebut maka blog atau situs web yang menggunakan salah satu penulisan kode warna itu tidak akan menampilkan warna yang semestinya. Kita ketahui bahwa beberapa browser yang paling banyak digunakan saat ini yaitu Chrome, Firefox, Safari, Opera, Internet Explorer dan lainnya. Anda dapat melihat pada sumber lalu lintas di situs Anda, kebanyakan pemirsa atau pengunjung blog situs Anda menggunakan browser apa ? Ini dapat Anda jadikan sebagai acuan dalam penulisan kode warna untuk situs web Anda.

Baja juga: Cara Mendaftarkan Blog ke Google Analytics

Setelah Anda menganalisis browser yang paling banyak digunakan oleh pengunjung situs Anda, kini saatnya Anda untuk mencoba menerapkan cara penulisan kode warna yang tepat untuk situs web blog Anda, jangan sampai situs Anda tidak menampilkan warna yang semestinya ketika pengunjung blog Anda sedang membuka web Anda dengan menggunakan browser yang berbeda. Karena warna juga merupakan faktor yang penting dalam sebuah desain web. Oleh karena itu ini sangat penting untuk kita pelajari dan menerapkannya pada blog atau website kita masing-masing. Baiklah langsung saja kita mulai bahas mengenai 6 jenis dan cara penulisan kode warna dibawah ini.

Warna Hex (Hexadecimal)

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

Kode:

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

Hasilnya:

Ini adalah contoh warna merah.

Ini adalah contoh warna hijau.

Ini adalah 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) adalah bilangan bulat dari hexadecimal 00 dan FF yang menentukan intensitas warnanya.
- Nilai angka terdiri dari (0-9) dan nilai huruf terdiri dari (A-F).

Warna RGB (Red Green Blue)

Kode warna RGB tidak beda jauh dengan kode warna hexadecimal hanya saja warna RGB lebih ke nilai desimal atau decimal, format penulisannya seperti ini rgb(red,green,blue). Warna RGB terdiri dari Red, Blue, Green. Dalam penulisan warna RGB, rgb(255,0,0) adalah penulisan kode warna untuk warna merah. Contoh penulisan dan penerapannya seperti 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 adalah contoh warna merah.</div>
<div class="hijau">Ini adalah contoh warna hijau.</div>
<div class="biru">Ini adalah contoh warna biru.</div>

Hasilnya:

Ini adalah contoh warna merah.

Ini adalah contoh warna hijau.

Ini adalah 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) menentukan intensitas warna sebagai bilangan bulat dari 0 hingga 255.

Warna RGBA (Red Green Blue Alpha)

Sama seperti dengan warna RGB, warna RGBA memiliki nilai A (Alpha) atau Opacity yaitu tingkat transparan atau tembus pandang dengan nilai 0 sampai 1. Nilai 0 akan membuatnya menjadi transparan 100% jadi tidak akan memberikan warna apapun ketika nilai alpha 0, sedangkan jika nilai alpha 1 maka akan menghasilkan warna yang solid dan tidak transparan. Contoh penulisan dan penerapannya seperti 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 adalah contoh warna biru alpha 1.</div>
<div class="biru-75">Ini adalah contoh warna biru alpha 0.75.</div>
<div class="biru-50">Ini adalah contoh warna biru alpha 0.5.</div>
<div class="biru-25">Ini adalah contoh warna biru alpha 0.25.</div>
<div class="biru-0">Ini adalah contoh warna biru alpha 0.</div>

Hasilnya:

Ini adalah contoh warna biru alpha 1.

Ini adalah contoh warna biru alpha 0.75.

Ini adalah contoh warna biru alpha 0.5.

Ini adalah contoh warna biru alpha 0.25.

Ini adalah 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) menentukan intensitas warna sebagai bilangan bulat 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 memiliki nilai 0 hingga 360, dimana nilai 0 untuk warna merah, nilai 120 untuk warna hijau, dan nilai 240 untuk warna biru. Saturation memiliki nilai persentasi dari 0 hingga 100, dimana nilai 0 adalah warna abu-abu atau grey dan nilai 100 untuk memberikan warna full sesuai dari warna Hue, jika 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 jika kita menurunkan nilainya hingga ke 0 kualitas warna akan semakin turun hingga menjadi warna abu-abu atau grey jika nilai Saturation 0. Lightness atau Brightness suatu tingkat kecerahan warna yang di hasilkan dari Hue, lightness memiliki nilai persentasi dari 0 hingga 100, dimana jika kita atur ke nilai 0 maka warna yang dihasilkan akan menjadi hitam meskipun warna Hue merah, hijau, atau biru, jika kita memberikan nilai lightness 50 maka akan menghasilkan warna yang full misalkan warna pada Hue merah maka ketika kita memberikan nilai 50 pada warna lightness akan tetap menghasilkan warna merah, sedangkan jika kita memberikan nilai 100 maka akan menghasilkan warna putih meskipun warna Hue merah, hijau, atau biru. Contoh penulisan dan penerapannya seperti 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 adalah contoh warna merah.</div>
<div class="hijau">Ini adalah contoh warna hijau.</div>
<div class="biru">Ini adalah contoh warna biru.</div>

Hasilnya:

Ini adalah contoh warna merah.

Ini adalah contoh warna hijau.

Ini adalah 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 memiliki persentasi mulai dari 0% hingga 100%. Nilai 0 akan menjadi warna grey dan nilai 100 akan menghasilkan warna full atau normal.
- Nilai Lightness memiliki 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 seperti pada warna HSL, hanya saja warna HSLA memiliki nilai A (Alpha) atau Opacity yaitu tingkat transparan atau tembus pandang yang sama seperti pada warna RGBA yaitu memiliki nilai 0 hingga 1. Contoh penulisan dan penerapannya seperti 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 adalah contoh warna merah hsla 1.</div>
<div class="merah-75">Ini adalah contoh warna merah hsla 0.75.</div>
<div class="merah-50">Ini adalah contoh warna merah hsla 0.5.</div>
<div class="merah-25">Ini adalah contoh warna merah hsla 0.25.</div>
<div class="merah-0">Ini adalah contoh warna merah hsla 0.</div>

Hasilnya:

Ini adalah contoh warna merah hsla 1.

Ini adalah contoh warna merah hsla 0.75.

Ini adalah contoh warna merah hsla 0.5.

Ini adalah contoh warna merah hsla 0.25.

Ini adalah contoh warna merah hsla 0.

Color Names (Nama Warna)

Penulisan kode warna dengan menggunakan Color Names memang sangat mudah, tentu syaratnya kita harus bisa menghapal nama-nama warna dalam Bahasa Inggris. Anda dapat 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 adalah contoh warna merah.</div>
<div class="hijau">Ini adalah contoh warna hijau.</div>
<div class="biru">Ini adalah contoh warna biru.</div>

Hasilnya:

Ini adalah contoh warna merah.

Ini adalah contoh warna hijau.

Ini adalah contoh warna biru.

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

Itulah penjelasan singkat mengenai beberapa jenis dan cara penulisan kode warna, kurang lebih ada enam jenis penulisan kode warna yang saja jelaskan di atas, semoga kedepannya saya dapat menjelaskannya secara detail. Semoga bermanfaat.

Cara Manual

Cuman hobi nulis tentang tutorial blog jadi deh blog cara manual.

Bagikan Artikel ini