Warna dan Background CSS: Mengisi Web dengan Warna

Tidak banyak hal yang bisa mengubah kesan sebuah website secepat warna. Coba ganti abu-abu yang membosankan dengan teal yang lebih berani, kasih background lembut di salah satu bagian, tambah gradien tipis — halaman yang tadinya polos langsung terasa “dirancang”. Inilah salah satu bagian CSS yang paling menyenangkan dipelajari, sebab hasilnya kelihatan saat itu juga, begitu kamu simpan.

Di artikel ini kita akan bahas berbagai cara menulis warna di CSS, cara menambahkan transparansi, sampai cara mengisi background sebuah elemen — entah dengan warna solid, gradien, atau bahkan gambar. Kamu sebenarnya sudah sempat ketemu color dan background-color sebelumnya; sekarang kita akan benar-benar mendalaminya.

Cara-cara menulis warna

Di artikel CSS pertama kamu sudah melihat blue dan #00838f. Itu baru dua dari beberapa cara yang CSS sediakan untuk menentukan warna, dan setiap cara punya situasinya sendiri — jadi ada baiknya kamu kenal semuanya.

Warna bernama

Yang paling sederhana adalah warna bernama — ada sekitar 140 nama, ditulis cukup sebagai kata biasa:

color: red;
color: teal;
color: rebeccapurple;

Enak dibaca dan cocok buat coba-coba cepat, tapi daftarnya terbatas — tidak ada nama warna untuk corak khusus yang persis sesuai desainmu. Kalau sudah masuk ke desain serius, kamu biasanya beralih ke salah satu opsi berikut.

Kode hex

Kode hex adalah cara paling umum menulis warna. Bentuknya # lalu diikuti enam karakter heksadesimal — dua untuk merah, dua untuk hijau, dua untuk biru:

color: #00b8e6;   /* cyan terang */
color: #333333;   /* abu-abu gelap */

Tiap pasang nilainya berkisar dari 00 (warna itu nol) sampai ff (jumlah penuh). Jadi #ff0000 itu merah murni, #00ff00 hijau murni, dan #0000ff biru murni. Tenang, kamu tidak perlu menghitung semua ini di kepala — biasanya kamu cukup pilih warna dari alat desain atau palet, lalu salin kode hex-nya langsung. Dan kalau ketiga pasangnya kebetulan kembar, kamu bisa menyingkatnya: #ffffff cukup ditulis #fff.

RGB dan RGBA

Warna juga bisa kamu tulis dalam bentuk RGB — konsep merah, hijau, biru yang sama, hanya saja nilainya berupa angka dari 0 sampai 255:

color: rgb(0, 184, 230);

Nilai lebih RGB justru ada pada versi pendampingnya, yaitu RGBA, yang menambahkan nilai alpha untuk transparansi — angkanya dari 0 (transparan total) sampai 1 (pekat penuh):

color: rgba(0, 184, 230, 0.5);   /* cyan setengah transparan */

Nilai 0.5 itu bikin warnanya 50% tembus pandang, sehingga apa pun yang ada di belakangnya ikut kelihatan. Transparansi ini ternyata sangat berguna untuk overlay, background tipis, sampai bayangan.

HSL

Ada satu lagi yang sayang kalau dilewatkan: HSL, singkatan dari Hue, Saturation, Lightness (corak, kejenuhan, kecerahan). Buat banyak orang, inilah cara berpikir tentang warna yang paling masuk akal:

color: hsl(193, 100%, 45%);

• Hue menentukan warnanya, dibaca sebagai posisi pada roda warna 360° (0 merah, 120 hijau, 240 biru).
• Saturation mengatur seberapa pekat, dari 0% (abu-abu) sampai 100% (warna penuh).
• Lightness mengatur seberapa terang atau gelap, dari 0% (hitam) sampai 100% (putih).

Dengan HSL, bikin variasi dari satu warna jadi gampang banget — mau versi yang lebih gelap? Cukup turunkan nilai lightness-nya, sisanya biarkan. Dan sama seperti RGB, HSL juga punya bentuk alpha, hsla(), kalau kamu butuh transparansi.

Warna teks vs warna background

Untuk urusan dasar memberi warna pada sebuah elemen, ada dua property yang perlu kamu tahu:

.box {
  color: white;             /* warna teks */
  background-color: #00838f; /* warna background kotaknya */
}

• color mengatur warna teks di dalam sebuah elemen.
• background-color mengisi background di belakang kontennya.

Satu kebiasaan kecil tapi penting: pastikan warna teks dan warna background selalu punya kontras yang cukup. Teks abu-abu muda di atas background putih mungkin kelihatan elegan di layarmu, tapi banyak orang akan kesulitan membacanya. Kontras yang baik itu salah satu pondasi aksesibilitas — usahakan teksmu tetap nyaman dibaca apa pun warna yang ada di belakangnya.

Gradien background

Background tidak harus berupa satu warna datar saja. CSS bisa menghasilkan gradien — peralihan halus antar warna — tanpa butuh file gambar sama sekali. Gradien linear memudar dari satu warna ke warna lain mengikuti garis lurus:

.hero {
  background: linear-gradient(to right, #00b8e6, #0077b6);
}

Kode ini mengisi elemen dengan gradien yang mengalir dari kiri (#00b8e6) menuju kanan (#0077b6). Arahnya bisa kamu ubah sesuka hati (to bottom, to right, atau sudut spesifik seperti 45deg), dan kamu juga bisa menyambung lebih banyak titik warna:

background: linear-gradient(to bottom, #00b8e6, #4fd6f5, #ffffff);

Ada juga radial-gradient(), yang menyebar keluar dari satu titik pusat, bukan berjalan lurus. Apa pun pilihannya, gradien adalah cara cepat menambah kesan kedalaman tanpa menyentuh satu pun file gambar.

Gambar background

Kamu juga bisa memakai gambar betulan sebagai background lewat background-image:

.banner {
  background-image: url("gunung.jpg");
  background-size: cover;
  background-position: center;
}

Biasanya ada tiga property yang bekerja sama di sini:

• background-image: url(...) menunjuk ke file gambarnya.
• background-size: cover memperbesar gambar sampai menutupi elemen sepenuhnya, dan bagian yang berlebih akan terpotong. Kalau kamu ganti dengan contain, seluruh gambar justru dipaskan ke dalam tanpa terpotong sedikit pun.
• background-position: center menentukan bagian gambar mana yang tetap terlihat saat gambarnya memang terpotong.

Shorthand background

CSS punya shorthand praktis yang membuatmu bisa mengatur beberapa property background sekaligus dalam satu baris:

.banner {
  background: #00838f url("pola.png") no-repeat center / cover;
}

Satu baris itu langsung mengatur warna, gambar, perilaku pengulangan, posisi, sekaligus ukuran. Shorthand seperti ini bertebaran di CSS — sangat menghemat ruang begitu kamu sudah akrab dengan tiap property-nya. Selama masih awal-awal, tidak ada salahnya kok menulis tiap property di barisnya sendiri biar lebih jelas; shorthand bisa kamu pakai pelan-pelan seiring rasa percaya dirimu tumbuh.

Penutup

Sekarang kamu sudah bisa membawa warna betulan ke halamanmu:

• Warna di CSS bisa ditulis sebagai warna bernama (teal), hex (#00b8e6), RGB (rgb(0,184,230)), atau HSL (hsl(193,100%,45%)) — semuanya menggambarkan warna yang sama.
• RGBA dan HSLA menambahkan kanal alpha untuk transparansi (0 = tak terlihat, 1 = solid).
• color mengatur warna teks; background-color mengisi background. Jaga selalu kontras keduanya supaya tetap mudah dibaca.
• Gradien (linear-gradient, radial-gradient) menghasilkan peralihan warna yang halus tanpa gambar.
• background-image memakai gambar betulan, biasanya dipasangkan dengan background-size: cover dan background-position.

Warna termasuk keterampilan yang paling cepat berkembang lewat coba-coba — ubah satu nilai, lihat halaman langsung berubah, lalu ulangi. Berikutnya, kita akan masuk ke salah satu konsep terpenting di seluruh CSS: box model, yang mengatur ukuran dan jarak setiap elemen di halaman. Inilah kunci yang membuka kendali penuh atas tata letak.