04 August 2023

Penerapan 7 Definisi Warna HTML Pada Program CSS Terkini

بِسْــــــــــــــــمِ اﷲِالرَّحْمَنِ الرَّحِيم

Menjabarkan Arti 7 Definisi Warna HTML Pada CSS Terkini
WARNA dalam dunia desain website modern menjadi hal utama yang memerankan peranan penting sebuah laman web. Penggunaan warna yang tepat akan menghasilkan tampilan website yang berkualitas dan berkesan profesional. Warna yang tepat dapat memberikan rasa nyaman kepada para visitor dan menambah daya tarik pada konten website secara keseluruhan. Dalam memilih warna ini terkandung sebuah filosofi arti warna dan tidak boleh asal sembarangan mengaplikasikannya.



CSS sebagai salah satu teknologi utama dalam pembuatan website, memiliki beberapa property untuk memberi warna pada elemen HTML. Selain itu, CSS menyediakan beberapa cara guna mendefinisikan warna. Kita dapat menentukan warna melalui warna Heksadesimal dan nama warna HTML atau menggunakan notasi fungsi seperti RGB, RGBA, HSL, HSLA, HWB dan CMYK.



Bila melihat sebuah file CSS, dari beberapa cara menentukan warna di CSS, yang paling dominan digunakan adalah warna Hexadecimal dan RGB. Namun demikian, bisa saja sangat mungkin untuk menggunakan nama warna HTML atau menggunakan notasi fungsi lainnya. Dibawah ini disertakan penjelasan dari warna Hexadecimal, nama warna HTML dan notasi fungsi warna :

1. WARNA HEKSADESIMAL

Sebuah Warna Heksadesimal (Hexadecimal color, red) adalah pendefinisian warna di CSS yang paling dominan digunakan dalam mendesain tampilan website. Untuk menggunakan warna Heksadesimal, maka perlu menentukan komponen warna dengan pola #RRGGBB. RR (red), GG (green) dan BB (blue) adalah nilai Integer Heksadesimal antara 00 (nilai terendah) dan FF (nilai tertinggi) untuk menentukan intensitas sebuah warna.
Contoh : warna putih untuk Heksadesimal adalah #FFFFFF atau #FFF, sedangkan warna hitam untuk Heksadesimal adalah #000000 atau #000. Warna merah, hijau dan biru berturut-turut untuk heksadesimal adalah #FF0000, #00FF00 dan #0000FF. Kesemua warna itu sangat sering dan bahkan menjadi pondasi utama sebuah website berdiri dengan tatanan warna yang ditampilkan.

Dibawah ini adalah contoh penggunaan warna Heksadesimal dengan atribut color CSS :

<!DOCTYPE html>
<html>
<head>
<title>Warna Heksadesimal</title>
</head>
<body>
<p style="color:#FF0000;">Tulisan warna merah.</p>
<p style="color:#00FF00;">Tulisan warna hijau.</p>
<p style="color:#0000FF;">Tulisan warna biru.</p>
</body>
</html>


Hasil rendering menggunakan browser Mozilla Firefox :


2. WARNA HTML

HTML Warna lebih mudah digunakan, nama warna HTML (HTML color names, red) jarang digunakan untuk mendefinisikan warna di CSS. Banyak web designer lebih memilih untuk menggunakan warna Heksadesimal. Hal ini mungkin dilakukan untuk lebih menjaga kekonsistenan dalam pendefinisian warna di kode CSS. Nama warna HTML disebut juga dengan predefined (cross-browser) color names. Sebuah nama yang unik tapi sangat populer dalam dunia website builder.

Setidaknya terdapat 140 nama warna HTML yang saat ini didukung oleh web browser modern. Beberapa warna umum seperti, Black, White, Red, Green dan Blue mungkin mudah diingat, namun nama warna HTML dengan kombinasi beberapa kata mungkin agak sulit diingat seperti DarkOliveGreen atau MediumSlateBlue. Dibawah ini adalah contoh penggunaan nama warna HTML dengan atribut color CSS.

<!DOCTYPE html>
<html>
<head>
<title>HTML Color Names</title>
</head>
<body>
<p style="color:Red;">Tulisan warna merah.</p>
<p style="color:Green;">Tulisan warna hijau.</p>
<p style="color:Blue;">Tulisan warna biru.</p>

<h3>www.alifacode.com</h3>

</body>
</html>


Hasil rendering menggunakan browser Mozilla Firefox :


3. WARNA RGB

Warna RGB (RGB color) merupakan pendefinisian dari warna di CSS yang sering digunakan. Untuk menggunakan warna RGB ini, bisa memakai fungsi rgb() dengan syntax rgb(red, green, blue). Parameter red, green dan blue adalah parameter intensitas warna berupa nilai integer antara 0 dan 255 atau nilai persentase antara 0% dan 100%. Dalam kode warna dan penerapan pada template blog, hal itu akan terus ada dan berulang untuk menampilkan sebuah warna.

Bila diperhatikan, pendefinisian warna menggunakan warna RGB, nilai integer lebih dipilih dibandingkan dengan nilai persentase. Banyak konversi warna yang hanya memberikan hasil ke warna RGB menggunakan integer. Contohnya, warna biru untuk warna RGB adalah rgb(0, 0, 255) atau rgb(0%, 0%, 100%). Dibawah ini adalah contoh penggunaan warna RGB dengan atribut color CSS.

<!DOCTYPE html>
<html>
<head>
<title>Warna RGB</title>
</head>
<body>
<p style="color:rgb(255, 0, 0);">Tulisan warna merah.</p>
<p style="color:rgb(0, 255, 0);">Tulisan warna hijau.</p>
<p style="color:rgb(0, 0, 255);">Tulisan warna biru.</p>

<h3>www.alifacode.com</h3>

</body>
</html>


4. WARNA RGBA

Warna RGBA adalah penjabaran yang lebih luas dari warna RGB dengan penambahan parameter alpha. Untuk menggunakan warna RGBA ini, dapat memakai fungsi rgba() dengan sintaksis rgba(red, green, blue, alpha). Parameter alpha adalah opasitas untuk obyek warna dengan nilai antara 0.0 (transparan) dan 1.0 (pekat). Dibawah ini adalah contoh penggunaan warna RGBA dengan atribut color CSS.

<!DOCTYPE html>
<html>
<head>
<title>Warna RGBA</title>
</head>
<body>
<p style="color:rgb(255, 0, 0, 1.0);">Warna RGBA CSS.</p>
<p style="color:rgb(255, 0, 0, 0.8);">Warna RGBA CSS.</p>
<p style="color:rgb(255, 0, 0, 0.6);">Warna RGBA CSS.</p>
<p style="color:rgb(255, 0, 0, 0.4);">Warna RGBA CSS.</p>
<p style="color:rgb(255, 0, 0, 0.2);">Warna RGBA CSS.</p>
<p style="color:rgb(255, 0, 0, 0.0);">Warna RGBA CSS.</p>

<h3>www.alifacode.com</h3>

</body>
</html>


Hasil rendering menggunakan browser Mozilla Firefox :


5. WARNA HSL

HSL adalah singkatan dari hue, saturation dan lightness. Untuk menggunakan warna HSL, dapat memakai fungsi hsl() dengan sintaksis hsl(hue, saturation, lightness). Parameter hue adalah derajat pada lingkaran warna (color wheel) antara 0 dan 360. Warna merah adalah angka 0 atau 360, hijau adalah angka 120 dan biru adalah angka 240.
Parameter saturation adalah nilai persentase antara 0% dan 100%. Nilai 0% membuat warna menjadi pudar dan menghasilkan warna abu-abu (gray), sedangkan nilai 100% adalah warna murni (full color). Parameter lightness adalah nilai persentase antara 0% dan 100%. Nilai 0% adalah warna hitam, sedangkan nilai 100% adalah warna putih. Dibawah ini adalah contoh penggunaan warna HSL dengan atribut color CSS.

<!DOCTYPE html>
<html>
<head>
<title>Warna HSL</title>
</head>
<body>
<p style="color:hsl(0, 100%, 50%);">Tulisan warna merah.</p>
<p style="color:hsl(120, 100%, 50%);">Tulisan warna hijau.</p>
<p style="color:hsl(240, 100%, 50%);">Tulisan warna biru.</p>

<h3>www.alifacode.com</h3>

</body>
</html>


6. WARNA HSLA

Warna HSLA merupakan ekstensi atau perluasan dari warna HSL dengan penambahan parameter alpha. Untuk menggunakan warna HSLA ini, bisa memakai fungsi hsla() dengan sintaksis hsla(hue, saturation, lightness, alpha). Parameter alpha adalah opasitas untuk obyek warna dengan nilai antara 0.0 (transparan) dan 1.0 (pekat). Dibawah ini merupakan contoh penggunaan warna HSLA dengan atribut color CSS.

<!DOCTYPE html>
<html>
<head>
<title>Warna HSLA</title>
</head>
<body>
<p style="color:hsl(240, 100%, 50%, 1.0);">Menggunakan warna HSLA CSS.</p>
<p style="color:hsl(240, 100%, 50%, 0.8);">Menggunakan warna HSLA CSS.</p>
<p style="color:hsl(240, 100%, 50%, 0.6);">Menggunakan warna HSLA CSS.</p>
<p style="color:hsl(240, 100%, 50%, 0.4);">Menggunakan warna HSLA CSS.</p>
<p style="color:hsl(240, 100%, 50%, 0.2);">Menggunakan warna HSLA CSS.</p>
<p style="color:hsl(240, 100%, 50%, 0.0);">Menggunakan warna HSLA CSS.</p>

<h3>www.alifacode.com</h3>

</body>
</html>


Hasil rendering menggunakan browser Mozilla Firefox :


7. WARNA HWB dan CMYK

Warna HWB (HWB color) dan CMYK (CMYK color) adalah dua fungsi pendefinisian warna baru yang disarankan ada di update CSS berikutnya (mungkin CSS4). Dua fungsi warna baru ini masih belum didukung HTML. Warna HWB mungkin akan menggunakan notasi fungsi hwb(hue, whiteness, blackness), sedangkan warna CMYK mungkin akan menggunakan notasi fungsi cmyk(cyan, magenta, yellow, black). Penggunaan update kode warna ini nantinya akan menggunakan CSS tingkat lanjut yang tentunya akan sedikit lebih rumit tapi lebih maksimal hasilnya.

Daftar warna yang sudah jelas diterangkan diatas adalah warna-warna yang ada pemrograman CSS. Sehingga dalam pemberian warna di template website atau blog kita, akan dapat kita tentukan. Akan digunakan warna dari definisi apa, sehingga hasil akan sesuai dengan selera. Memang tidak mudah untuk menggunakan semua definisi warna disini.

Tapi setidaknya pemahaman tentang warna, maka boleh jadi tampilan website atau blog kita akan menjadi match antara warna satu dengan warna lain. "Setiap cobaan hidup yg datang adalah proses pendewasaan diri dan setiap permasalahan adalah pelajaran berharga. Sehingga jika kamu berhenti, maka kamu akan -- mati --". Filosofi hidup yang penuh makna dan penuh arti. Selamat malam. Salam Blogger.

Bagikan ke teman-teman kamu
Label Postingan : CSS

Terima kasih ya udah mempraktekkan tutorial blog di web alifacode.com dengan judul Penerapan 7 Definisi Warna HTML Pada Program CSS Terkini . Semoga tutorial blog ini dapat bermanfaat. Salam Blogger.

Comments

Pesan berupa SPAM, Sara, Iklan, Pornografi, Broken link dan Link Aktif akan kami hapus. Berkomentarlah dengan sopan dan mengikuti panduan mengemukakan pendapat yang baik.
EmoticonEmoticon