HTML - Warna

Selamat datang, para pengembang web yang bersemangat! Hari ini, kita akan mendalam ke dunia yang berwarna-warni dari HTML. Sebagai guru komputer yang ramah di lingkungan sekitar Anda, saya sangat gembira untuk membimbing Anda dalam perjalanan warna-warna ini. Pada akhir tutorial ini, Anda akan menciptakan web dengan kepercayaan seperti seorang Picasso digital!

HTML - Colors

Metode Penyebutan Warna HTML

Sebelum kita mulai menyemprotkan warna di seluruh halaman web kita, mari kita pahami bagaimana kita dapat mewakili warna dalam HTML. Ada beberapa cara untuk menentukan warna, dan masing-masing memiliki keindahan tersendiri. Mari kita lihat satu per satu:

Nama Warna
Nilai Hexadesimal
Nilai RGB
Nilai RGBA
Nilai HSL
Nilai HSLA

Berikut adalah tabel praktis yang menggabungkan metode ini:

Metode	Contoh	Deskripsi
Nama Warna	`red`	Nama warna yang telah ditetapkan
Hexadesimal	`#FF0000`	Kode 6 digit yang mewakili nilai RGB
RGB	`rgb(255, 0, 0)`	Nilai Merah, Hijau, Biru (0-255)
RGBA	`rgba(255, 0, 0, 0.5)`	RGB dengan nilai Alpha (ke transparan)
HSL	`hsl(0, 100%, 50%)`	Nilai S warna, Kecerahan, Kecerahan
HSLA	`hsla(0, 100%, 50%, 0.5)`	HSL dengan nilai Alpha

Jangan khawatir jika ini terlihat seperti sup abjad saat ini. Kita akan memecahnya secara bertahap!

Mengatur Warna Teks

Mari kita mulai dengan sesuatu yang sederhana: mengubah warna teks kita. Kita menggunakan properti color dalam CSS untuk mencapai ini. Berikut adalah contoh:

<p style="color: blue;">Teks ini berwarna biru!</p>

Dalam contoh ini, kita menggunakan gaya inline untuk mengatur warna. Atribut style memungkinkan kita menambahkan CSS langsung ke elemen HTML. Bagian color: blue; memberitahu browser untuk menampilkan teks ini dalam warna biru.

Tapi apa jika kita ingin menggunakan warna biru tertentu? Itu adalah tempat metode penanda warna lainnya menjadi berguna:

<p style="color: #0000FF;">Ini juga biru, menggunakan kode hex!</p>
<p style="color: rgb(0, 0, 255);">Dan ini adalah biru menggunakan nilai RGB!</p>

Kedua ini akan menghasilkan warna biru yang sama seperti contoh pertama kami. Kode hex #0000FF dan nilai RGB rgb(0, 0, 255) keduanya mewakili biru murni.

Mengatur Warna Latar Belakang

Sekarang, mari kita tambahkan sedikit keanggotaan ke halaman kita dengan warna latar belakang. Kita menggunakan properti background-color untuk ini:

<div style="background-color: yellow; padding: 10px;">
Div ini memiliki latar belakang kuning!
</div>

Dalam contoh ini, kita mengatur warna latar belakang elemen div menjadi kuning. padding: 10px; hanya untuk memberikan ruang kepada teks kita.

Ingat saat saya membahas RGBA sebelumnya? Ini adalah tempatnya bisa sangat berguna:

<div style="background-color: rgba(255, 255, 0, 0.5); padding: 10px;">
Div ini memiliki latar belakang kuning setengah transparan!
</div>

Nilai 0.5 di akhir rgba(255, 255, 0, 0.5) mengatur ke transparan menjadi 50%, memberikan efek setengah transparan yang bagus.

Mengatur Warna Batas

Mari kita kerangkai karya kita dengan beberapa batas warna:

<div style="border: 2px solid green; padding: 10px;">
Div ini memiliki batas hijau!
</div>

Di sini, kita menggunakan properti border untuk membuat batas 2-pixel lebar, hijau keras di sekitar div kita.

Kita juga bisa menggunakan warna yang berbeda untuk setiap sisi batas:

<div style="border-top: 2px solid red;
border-right: 2px solid green;
border-bottom: 2px solid blue;
border-left: 2px solid yellow;
padding: 10px;">
Div ini memiliki warna yang berbeda untuk setiap batas!
</div>

Warna - Nama Warna

HTML datang dengan set nama warna yang telah ditetapkan yang Anda dapat gunakan. Ini sangat cocok saat Anda prototip atau memerlukan warna cepat tanpa khawatir tentang nuansa khusus.

<p style="color: tomato;">Teks ini berwarna tomat!</p>
<p style="color: skyblue;">Teks ini berwarna langit biru!</p>
<p style="color: mediumseagreen;">Teks ini berwarna hijau laut medium!</p>

16 Warna Standar W3C

W3C (World Wide Web Consortium) telah menetapkan 16 warna standar yang didukung oleh semua browser. Ini adalah:

Black
Silver
Gray
White
Maroon
Red
Purple
Fuchsia
Green
Lime
Olive
Yellow
Navy
Blue
Teal
Aqua

Berikut adalah demo cepat:

<table>
<tr>
<td style="background-color: black; color: white;">Black</td>
<td style="background-color: silver;">Silver</td>
<td style="background-color: gray;">Gray</td>
<td style="background-color: white;">White</td>
</tr>
<tr>
<td style="background-color: maroon; color: white;">Maroon</td>
<td style="background-color: red;">Red</td>
<td style="background-color: purple; color: white;">Purple</td>
<td style="background-color: fuchsia;">Fuchsia</td>
</tr>
<tr>
<td style="background-color: green; color: white;">Green</td>
<td style="background-color: lime;">Lime</td>
<td style="background-color: olive;">Olive</td>
<td style="background-color: yellow;">Yellow</td>
</tr>
<tr>
<td style="background-color: navy; color: white;">Navy</td>
<td style="background-color: blue; color: white;">Blue</td>
<td style="background-color: teal; color: white;">Teal</td>
<td style="background-color: aqua;">Aqua</td>
</tr>
</table>

Mengatur Warna Latar Belakang dengan Nama Warna

Kita sudah melihat bagaimana mengatur warna latar belakang, tetapi mari kita perkuatnya dengan nama warna:

<div style="background-color: lavender; padding: 10px; margin: 5px;">Latar belakang lavender</div>
<div style="background-color: mistyrose; padding: 10px; margin: 5px;">Latar belakang rose kabur</div>
<div style="background-color: honeydew; padding: 10px; margin: 5px;">Latar belakang madu</div>

Warna lembut, pastel ini dapat menciptakan efek yang nyaman pada halaman web Anda. Ingat, pilihan warna dapat mempengaruhi suasana hati dan keterbacaan situs Anda!

Warna Aman Browser

Dalam hari-hari awal web, kita harus khawatir tentang "warna aman browser" - palet 216 warna yang ditampilkan secara konsisten di berbagai browser dan sistem operasi. Sekarang, dengan layar modern, ini kurang menjadi masalah. Namun, itu masih baik untuk diketahui untuk kesesuaian mundur atau saat mendesain untuk sistem yang lebih lama.

Berikut adalah contoh kecil warna aman browser:

<div style="background-color: #FF0000; color: white; padding: 5px; margin: 2px;">Merah (#FF0000)</div>
<div style="background-color: #00FF00; padding: 5px; margin: 2px;">Hijau (#00FF00)</div>
<div style="background-color: #0000FF; color: white; padding: 5px; margin: 2px;">Biru (#0000FF)</div>
<div style="background-color: #FFFF00; padding: 5px; margin: 2px;">Kuning (#FFFF00)</div>
<div style="background-color: #00FFFF; padding: 5px; margin: 2px;">Cian (#00FFFF)</div>
<div style="background-color: #FF00FF; padding: 5px; margin: 2px;">Magenta (#FF00FF)</div>

Dan itu adalah, teman-teman! Anda sekarang dilengkapi dengan pengetahuan untuk menambahkan sedikit warna ke halaman web Anda. Ingat, dengan warna yang bagus datang tanggung jawab besar - gunakan kekuatan baru Anda bijaksana untuk menciptakan website yang menarik dan dapat diakses.

Sekarang, mari kitaakhiri, ini adalah sedikit lelucon pengembang web untuk Anda: Mengapa pengembang web memilih mode gelap? Karena cahaya menarik nyamuk!

Terus eksperimen dengan warna, dan jangan takut untuk menjadi kreatif. Selamat coding, dan may your web pages be ever colorful!

Credits: Image by storyset