Warna dan Background

Empat cara menulis warna

CSS menerima warna dalam beberapa format. Pahami semuanya karena kamu akan menemui semuanya di kode orang.

1. Nama warna: red, navy, tomato. Ada sekitar 140 nama. Gampang dibaca, tapi pilihannya terbatas.

2. Hex: #ff0000. Enam digit heksadesimal: dua untuk merah, dua hijau, dua biru. Bisa disingkat kalau digitnya berpasangan: #f00 sama dengan #ff0000.

3. RGB: rgb(255, 0, 0). Tiap kanal 0 sampai 255. Tambah kanal keempat buat transparansi: rgba(255, 0, 0, 0.5) berarti merah setengah transparan.

4. HSL: hsl(0, 100%, 50%). Hue (0-360 derajat di roda warna), saturation, lightness. Banyak desainer suka format ini karena gampang bikin varian warna: naikkan lightness buat versi terang, turunkan buat versi gelap.

.tombol {
  background-color: #2563eb;      /* biru hex */
  color: rgb(255, 255, 255);      /* putih rgb */
  border-color: hsl(220, 90%, 40%); /* biru hsl */
}

Opacity vs warna transparan

Properti opacity: 0.5 membuat seluruh elemen (termasuk teks di dalamnya) setengah transparan. Kalau kamu cuma mau background-nya yang transparan tapi teksnya tetap solid, pakai rgba atau format hex 8 digit #2563eb80 (dua digit terakhir = alpha).

.kartu {
  background-color: rgba(37, 99, 235, 0.15); /* background samar, teks tetap jelas */
}

Background lebih dari sekadar warna

Properti background adalah shorthand untuk banyak hal: warna, gambar, posisi, ukuran, pengulangan.

.hero {
  background-color: #0f172a;
  background-image: url("pola.svg");
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}

Atau versi ringkasnya:

.hero {
  background: #0f172a url("pola.svg") no-repeat center / cover;
}

Gradasi

linear-gradient bikin peralihan warna mulus tanpa file gambar.

.banner {
  background: linear-gradient(135deg, #8b5cf6, #d946ef);
}

Angka derajat mengatur arah: to right, 135deg, dan sebagainya. Bisa lebih dari dua warna, dan bisa atur titik berhentinya: linear-gradient(to right, red 0%, orange 50%, yellow 100%).

Catatan teknis: teks di atas background foto sering susah dibaca. Trik klasiknya adalah menumpuk gradasi gelap di atas gambar: background: linear-gradient(rgba(0,0,0,0.5), rgba(0,0,0,0.5)), url("foto.jpg"). Gambar ditulis terakhir karena lapisan pertama digambar paling atas.

Rangkuman

Kuasai hex dan rgb/rgba buat sehari-hari, kenal hsl buat eksplorasi warna. Opacity mempengaruhi seluruh elemen, rgba hanya warnanya. Background bisa menumpuk beberapa lapisan, dan gradasi adalah cara termurah bikin tampilan premium tanpa gambar.