بِسْــــــــــــــــمِ اﷲِالرَّØْÙ…َÙ†ِ الرَّØِيم
Baca Juga :
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.
Baca Juga :
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.
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.
