Hari 8: CSS Colors – Belajar CSS From Zero to Hero

by

Pelajari cara menggunakan warna di CSS dengan HEX, RGB, HSL, dan nama warna. Lengkap dengan contoh kode, studi kasus, serta latihan praktis untuk pemula.

Hari 8: CSS Colors – Belajar CSS From Zero to Hero

Mengapa Warna Penting dalam Desain Web?

Warna adalah elemen visual yang sangat berpengaruh pada tampilan dan pengalaman pengguna (User Experience). Dengan CSS, kita bisa memberi warna pada teks, background, border, hingga elemen interaktif seperti tombol.

Pemilihan warna yang tepat akan membuat website lebih menarik, profesional, dan mudah dibaca.

Cara Menentukan Warna di CSS

Ada beberapa cara untuk menentukan warna di CSS:

1. Nama Warna (Color Name)

CSS mendukung lebih dari 140 nama warna bawaan.
Contoh:

p {
  color: red;
}

Hasil: teks paragraf berubah merah.

2. HEX Color (#RRGGBB)

Menggunakan kode hexadecimal dengan format #rrggbb.

  • #ff0000 → merah
  • #00ff00 → hijau
  • #0000ff → biru

Contoh:

h1 {
  color: #0066cc;
}

Hasil: judul berwarna biru tua.

3. RGB Color (rgb(red, green, blue))

Format rgb() menggunakan angka antara 0–255.
Contoh:

div {
  background-color: rgb(255, 200, 0);
}

Hasil: background kuning keemasan.

4. RGBA Color (rgba(red, green, blue, alpha))

Mirip rgb(), tapi ada tambahan alpha (0–1) untuk transparansi.
Contoh:

button {
  background-color: rgba(0, 128, 0, 0.7);
}

Hasil: tombol hijau dengan transparansi 70%.

5. HSL (hsl(hue, saturation, lightness))

Format berdasarkan hue (derajat warna), saturation (kejenuhan), dan lightness (kecerahan).
Contoh:

section {
  background-color: hsl(200, 100%, 50%);
}

Hasil: background biru cerah.

Studi Kasus: Styling Landing Page Sederhana

HTML:

<header>
  <h1>Selamat Datang</h1>
  <p>Belajar CSS Colors dari Zero to Hero</p>
</header>
<button>Mulai Sekarang</button>

CSS:

header {
  background-color: #f2f2f2;
  color: #333;
  padding: 20px;
  text-align: center;
}

button {
  background-color: rgb(0, 123, 255);
  color: white;
  padding: 10px 20px;
  border: none;
  border-radius: 5px;
}

button:hover {
  background-color: rgba(0, 123, 255, 0.8);
}

Hasil:

  • Header dengan background abu-abu terang.
  • Teks lebih mudah dibaca dengan warna kontras.
  • Tombol biru yang berubah lebih transparan saat hover.

Kesalahan Umum Pemula

  1. Menggunakan warna tanpa kontras
    Teks hitam di background biru tua akan sulit dibaca.
  2. Lupa alpha pada transparansi
    Gunakan rgba atau hsla jika ingin efek transparan.
  3. Tidak konsisten kode warna
    Campur aduk antara rgb, hex, dan hsl tanpa standar → sulit dipelihara.

Tips Menggunakan Warna di CSS

  • Gunakan palet warna konsisten (misalnya 2–3 warna utama).
  • Manfaatkan tool online seperti Coolors atau Adobe Color untuk mencari kombinasi warna.
  • Pastikan aksesibilitas dengan rasio kontras cukup antara teks dan background (cek di Contrast Checker).

Latihan Praktis Hari 8

  1. Buat halaman HTML dengan judul, paragraf, dan tombol.
  2. Terapkan warna dengan HEX untuk judul, RGB untuk paragraf, dan HSL untuk tombol.
  3. Tambahkan efek hover pada tombol dengan rgba().

Referensi Belajar

Rencana Belajar Selanjutnya

Hari ini kamu sudah memahami CSS Colors dengan berbagai format (name, HEX, RGB, RGBA, HSL). Besok, kita akan lanjut ke Hari 9: CSS Background untuk mempelajari cara menambahkan warna, gambar, dan efek pada latar belakang.
👉 Lanjut ke Hari 9: CSS Background

Kesimpulan

  • CSS mendukung berbagai cara penulisan warna: nama, HEX, RGB, RGBA, HSL.
  • Warna sangat penting untuk tampilan website yang menarik dan mudah dibaca.
  • Gunakan palet konsisten dan perhatikan aksesibilitas.

🎨 Tantangan Hari 8:
Buat desain halaman sederhana dengan kombinasi warna HEX, RGB, dan HSL. Upload hasilnya ke GitHub atau bagikan screenshot di media sosial dengan hashtag #BelajarCSS.

Leave a Comment