Cara mengganti background color di CSS: pakai properti background-color dengan nilai warna, misalnya background-color: #f97316; untuk warna oranye. Nilai warnanya bisa ditulis empat cara — nama warna (orange), kode hex (#f97316), rgb(), atau hsl() — dan semuanya menghasilkan warna latar yang sama. Pasang deklarasi itu di selector elemen yang mau kamu warnai, simpan, refresh browser, dan latar belakangnya langsung berubah.

Satu baris itu jawabannya. Tapi di balik satu baris itu ada banyak hal yang menentukan apakah hasilnya rapi atau berantakan: format warna mana yang sebaiknya kamu pakai (dan kenapa hsl() paling enak untuk variasi terang-gelap), jebakan shorthand background yang diam-diam menimpa warna latar kamu, perbedaan fatal antara opacity dan rgba(), cara mewarnai satu halaman penuh, sampai memastikan teks tetap terbaca di atas warna pilihanmu. Artikel ini membahas semuanya berurutan, lengkap dengan contoh kode yang bisa langsung kamu coba.

Background Color Adalah… (Pengertian Singkat)

Background color adalah warna latar belakang sebuah elemen HTML, dan di CSS diatur lewat properti background-color. Setiap elemen HTML dirender sebagai kotak, dan background-color mengecat seluruh area kotak itu — mulai dari konten, area padding, sampai tepat di belakang border. Nilai default-nya transparent, artinya elemen tembus pandang dan memperlihatkan warna elemen di belakangnya.

Contoh paling dasar:

<p class="sorotan">Paragraf ini punya warna latar sendiri.</p>

.sorotan {
  background-color: #fef3c7; /* kuning muda */
  padding: 12px;
}

Dua hal yang perlu kamu catat sejak awal. Pertama, penulisannya wajib pakai strip: background-color, bukan backgroundcolor atau background color. CSS tidak mengenal dua penulisan terakhir dan akan mengabaikan deklarasinya tanpa pesan error. Kedua, warna latar mengecat sampai area padding — makanya di contoh di atas kita menambah padding: 12px, supaya teks tidak menempel ke tepi kotak kuningnya. Kalau konsep dasar warna teks dan latar ini mau kamu latih dengan editor langsung di browser, lesson background-color di Hyper Sheets membahasnya step by step dengan preview yang berubah saat kamu mengetik.

Cara Mengganti Background Color di CSS: Tiga Langkah

Cara mengganti background color di CSS: (1) tentukan elemen targetnya lewat selector, (2) tulis deklarasi background-color dengan nilai warna pilihanmu, (3) pastikan file CSS-nya terhubung ke HTML. Tiga langkah ini berlaku untuk elemen apa pun — body, div, tombol, sampai satu kata di tengah kalimat.

Mari praktikkan pada tiga level yang paling sering dipakai:

/* 1. Seluruh halaman */
body {
  background-color: #f8fafc;
}

/* 2. Satu bagian/section */
.hero {
  background-color: #1e293b;
}

/* 3. Satu elemen kecil */
button {
  background-color: #f97316;
}

Kalau kamu menulis CSS langsung di atribut HTML (inline style), sintaksnya sama persis, hanya tempatnya berbeda:

<div style="background-color: #dbeafe;">
  Kotak dengan warna latar biru muda.
</div>

Inline style berguna untuk eksperimen cepat, tapi untuk proyek sungguhan sebaiknya semua warna tinggal di file CSS terpisah — lebih mudah diubah dan konsisten. Kalau struktur HTML dan cara menghubungkan file CSS-nya masih samar buat kamu, mampir dulu ke panduan belajar HTML untuk pemula, lalu kembali ke sini.

Satu lagi yang sering bikin pemula bingung: mengganti background color lewat JavaScript penulisannya berbeda. Di JavaScript, nama properti CSS yang mengandung strip berubah jadi camelCase:

// Di JavaScript: backgroundColor (camelCase), TANPA strip
document.querySelector(".hero").style.backgroundColor = "#1e293b";

Jadi hafalkan pasangannya: background-color di CSS, style.backgroundColor di JavaScript. Menukar keduanya adalah salah satu typo paling umum di dunia — kita bahas lagi di bagian kesalahan umum.

Format Nilai Warna: Keyword, Hex, RGB, dan HSL

CSS menerima empat format nilai warna utama untuk background-color: nama warna (keyword), kode hex, fungsi rgb(), dan fungsi hsl() — semuanya setara, bedanya di kenyamanan penggunaan. Nama warna paling cepat untuk prototipe, hex paling umum di dunia desain, rgb() paling gamblang untuk transparansi, dan hsl() paling enak saat kamu butuh variasi terang-gelap dari satu warna.

Keempat deklarasi ini menghasilkan warna oranye yang identik:

.kotak {
  background-color: orange;              /* keyword */
  background-color: #ffa500;             /* hex */
  background-color: rgb(255, 165, 0);    /* rgb */
  background-color: hsl(39, 100%, 50%);  /* hsl */
}

Mari bedah satu per satu supaya kamu tahu kapan memakai yang mana.

Nama Warna (Keyword)

CSS punya lebih dari 140 nama warna bawaan: red, blue, tomato, rebeccapurple, slategray, dan seterusnya. Ada juga dua keyword spesial: transparent (tembus pandang penuh — ini nilai default background-color) dan currentColor (mengikuti warna teks elemen).

.peringatan {
  background-color: tomato;
}

Keyword enak untuk belajar dan prototipe cepat, tapi jarang dipakai di proyek produksi — pilihan warnanya terbatas dan tidak bisa di-fine-tune. Begitu desainmu butuh “biru yang sedikit lebih gelap”, kamu harus pindah ke format lain.

Kode Hex: 3, 6, dan 8 Digit

Kode hex adalah format paling populer. Bentuk dasarnya 6 digit heksadesimal setelah tanda pagar — dua digit pertama untuk merah, dua berikutnya hijau, dua terakhir biru, masing-masing dari 00 (nol) sampai ff (maksimal):

.contoh-hex {
  background-color: #f97316; /* r=f9, g=73, b=16 → oranye */
  background-color: #000000; /* hitam pekat */
  background-color: #ffffff; /* putih */
}

Kalau ketiga pasangan digitnya kembar, kamu boleh menyingkatnya jadi 3 digit: #ff6600 boleh ditulis #f60, #ffffff jadi #fff. Dan yang sering tidak diketahui pemula: hex juga mendukung alpha (transparansi) lewat digit ketujuh-kedelapan — #f9731680 adalah oranye yang sama dengan tingkat kepekatan sekitar 50% (80 heksadesimal = 128 dari 255). Semua browser modern mendukung hex 8 digit ini.

.overlay {
  background-color: #0f172a99; /* biru gelap, sekitar 60% pekat */
}

Kelemahan hex: tidak intuitif untuk dimodifikasi. Melihat #f97316, kamu tidak bisa langsung membayangkan “versi lebih gelapnya” tanpa color picker.

rgb() dan rgba()

Fungsi rgb() menerima tiga angka 0–255 untuk merah, hijau, dan biru. Untuk transparansi, tambahkan nilai alpha 0–1 — cara klasiknya lewat rgba(), cara modernnya langsung di rgb() dengan garis miring:

.kartu {
  background-color: rgb(249, 115, 22);        /* oranye pekat */
  background-color: rgba(249, 115, 22, 0.5);  /* oranye 50% transparan (sintaks klasik) */
  background-color: rgb(249 115 22 / 0.5);    /* sama, sintaks modern tanpa koma */
}

Kedua sintaks itu valid dan didukung semua browser modern — pakai yang mana pun, yang penting konsisten. Kekuatan rgb() adalah keterbacaannya saat butuh transparansi: rgba(0, 0, 0, 0.5) jelas terbaca “hitam setengah transparan”, jauh lebih gamblang daripada #00000080.

hsl() — Paling Enak untuk Variasi Terang-Gelap

hsl() mendeskripsikan warna dengan tiga komponen yang cara berpikirnya mirip manusia: hue (rona, 0–360 derajat di roda warna), saturation (kepekatan, 0–100%), dan lightness (terang-gelap, 0–100%).

.tombol {
  background-color: hsl(25, 95%, 53%);  /* oranye */
}
.tombol:hover {
  background-color: hsl(25, 95%, 45%);  /* oranye LEBIH GELAP: cukup turunkan lightness */
}
.tombol-muted {
  background-color: hsl(25, 40%, 53%);  /* oranye kalem: cukup turunkan saturation */
}

Inilah alasan banyak developer menyukai hsl(): untuk membuat varian hover yang lebih gelap, kamu tinggal menurunkan angka lightness — tidak perlu buka color picker. Satu keluarga warna (oranye terang, oranye gelap, oranye pudar) cukup dari satu hue yang sama, jadi palet situsmu otomatis harmonis. hsl() juga menerima alpha dengan cara yang sama: hsla(25, 95%, 53%, 0.5) atau hsl(25 95% 53% / 0.5).

Ringkasan kapan pakai yang mana: keyword untuk coba-coba, hex saat menyalin warna dari desain (Figma dan tool desain lain default-nya hex), rgb() saat butuh transparansi yang mudah dibaca, hsl() saat membangun palet dan varian terang-gelap. Kalau mau melihat keempat format ini dikonversi bolak-balik secara visual, mainkan eksplorasi format warna interaktif — geser slider-nya dan lihat hex, RGB, dan HSL berubah bersamaan. Untuk pasangannya, properti color yang mengatur warna teks, ada juga lesson khusus properti color yang memakai format-format nilai yang sama persis.

Apa Beda background dan background-color?

background-color mengatur satu hal saja (warna latar), sedangkan background adalah shorthand yang mengatur delapan sub-properti sekaligus — termasuk gambar, posisi, ukuran, dan pengulangan latar. Keduanya bisa dipakai untuk mengganti warna, tapi background punya efek samping yang sering menjebak pemula: semua sub-properti yang tidak kamu tulis akan di-reset ke nilai default-nya.

Dua deklarasi ini sama-sama menghasilkan latar oranye:

.kotak-a { background-color: #f97316; }
.kotak-b { background: #f97316; }       /* shorthand, hasil terlihat sama */

Jebakannya muncul saat deklarasi bertumpuk. Perhatikan contoh ini:

.banner {
  background-color: #1e293b;              /* niatnya: latar biru gelap */
  background: url("pola.png") no-repeat;  /* lalu tambah gambar pola */
}

Hasilnya: warna biru gelapnya hilang. Kenapa? Karena background di baris kedua adalah shorthand — ia menimpa semua sub-properti, dan karena kamu tidak menyebut warna di dalamnya, background-color di-reset kembali ke transparent. Bukan bug, memang begitu cara kerja semua shorthand di CSS.

Solusinya ada dua: sebutkan warnanya di dalam shorthand, atau balik urutannya supaya background-color ditulis setelah shorthand:

/* Opsi 1: warna ikut di dalam shorthand */
.banner {
  background: #1e293b url("pola.png") no-repeat;
}

/* Opsi 2: background-color ditulis SETELAH shorthand */
.banner {
  background: url("pola.png") no-repeat;
  background-color: #1e293b;
}

Aturan praktisnya buat pemula: kalau kamu cuma butuh warna, pakai background-color — lebih eksplisit, dan tidak mungkin tersandung reset shorthand. Pakai background hanya saat kamu memang menggabungkan beberapa hal (warna + gambar + posisi) dalam satu baris dan paham konsekuensinya.

Cara Membuat Background Transparan

Cara membuat background transparan di CSS: pakai nilai warna yang punya kanal alpha — rgba(), hsl() dengan alpha, atau hex 8 digit — pada background-color. Jangan pakai properti opacity kalau yang mau kamu bikin transparan hanya latarnya, karena opacity menghilangkan seluruh elemen — termasuk teks dan gambar di dalamnya.

Tiga cara yang benar, hasilnya identik:

.kaca {
  background-color: rgba(15, 23, 42, 0.6);     /* rgba */
  background-color: hsl(222 47% 11% / 0.6);    /* hsl + alpha */
  background-color: #0f172a99;                 /* hex 8 digit */
}

Sekarang bandingkan dengan opacity, dan perhatikan bedanya:

/* SALAH untuk kasus ini: teks ikut memudar! */
.kartu-pudar {
  background-color: #0f172a;
  opacity: 0.6; /* seluruh elemen jadi 60% terlihat, termasuk teksnya */
}

/* BENAR: hanya latar yang transparan, teks tetap 100% terbaca */
.kartu-kaca {
  background-color: rgba(15, 23, 42, 0.6);
  color: white;
}

opacity bekerja pada elemen utuh beserta seluruh isinya — anak-anak elemen tidak bisa “melawan” dengan opacity: 1 sekalipun. Jadi kalau kamu memakai opacity: 0.6 pada kartu berisi teks, teksnya ikut pudar 60% dan jadi susah dibaca. Sedangkan alpha di nilai warna hanya memengaruhi warna itu sendiri.

Kasus nyata yang paling sering butuh latar transparan: overlay gelap di atas foto supaya teks di atasnya terbaca:

<div class="foto-hero">
  <div class="overlay">
    <h1>Judul yang Tetap Terbaca</h1>
  </div>
</div>

.foto-hero {
  background: url("pemandangan.jpg") center / cover;
}
.overlay {
  background-color: rgba(0, 0, 0, 0.55); /* lapisan hitam 55% */
  color: white;
  padding: 64px 24px;
}

Foto tetap terlihat samar di belakang, teks putih tetap kontras — kombinasi yang tidak mungkin dicapai dengan opacity.

Cara Mengganti Background Seluruh Halaman

Cara mengganti background color seluruh halaman: beri background-color pada elemen body (atau html). Browser punya perilaku khusus di sini — warna latar body otomatis “menjalar” mengisi seluruh viewport, jadi kamu tidak perlu mengakali tinggi halaman sama sekali.

body {
  margin: 0;
  background-color: #0f172a; /* seluruh layar jadi biru gelap */
  color: #e2e8f0;            /* jangan lupa warna teksnya disesuaikan */
}

Beberapa catatan supaya tidak bingung:

Tidak perlu height: 100vh hanya demi warna latar. Meskipun konten halamanmu cuma satu paragraf pendek, warna latar body tetap mengecat sampai dasar layar — itu perilaku bawaan browser (istilah teknisnya: background body dipropagasi ke kanvas dokumen).
Kalau html dan body dua-duanya diberi warna, html mengecat kanvas dan body mengecat area kontennya sendiri — bisa muncul efek “bingkai” kalau body punya margin. Untuk pemula, cukup pilih satu: kasih warnanya ke body saja.
Selalu pasangkan dengan color untuk warna teks. Latar gelap dengan teks default hitam = tidak terbaca.

Kalau kamu sedang membangun halaman web pertamamu dari nol dan mau langsung mempraktikkan ini pada proyek nyata sampai online, ikuti panduan membuat website pertama — pengaturan warna halaman penuh seperti ini adalah salah satu langkah pertamanya.

Cara Membuat Background Gradasi (Gradient)

Background gradasi di CSS dibuat dengan fungsi linear-gradient() atau radial-gradient() — dan ini penting: gradient bukan nilai background-color, melainkan background-image. Gradient dihitung browser sebagai “gambar” yang digenerate dari kode, jadi menaruhnya di background-color tidak akan bekerja sama sekali.

/* SALAH: background-color tidak menerima gradient */
.hero {
  background-color: linear-gradient(to right, #f97316, #ec4899); /* diabaikan browser */
}

/* BENAR: gradient adalah background-image */
.hero {
  background-image: linear-gradient(to right, #f97316, #ec4899);
}

/* Juga benar: lewat shorthand background */
.hero {
  background: linear-gradient(to right, #f97316, #ec4899);
}

Anatomi linear-gradient() yang paling sering dipakai: arah dulu, lalu daftar warnanya.

.contoh-gradasi {
  /* dari kiri ke kanan */
  background-image: linear-gradient(to right, #0ea5e9, #8b5cf6);

  /* diagonal 45 derajat */
  background-image: linear-gradient(45deg, #0ea5e9, #8b5cf6);

  /* tiga warna dengan posisi berhenti (color stop) */
  background-image: linear-gradient(to bottom, #0ea5e9 0%, #8b5cf6 50%, #ec4899 100%);
}

Tips praktis: pasang juga background-color dengan salah satu warna gradient sebagai cadangan — kalau karena satu dan lain hal gradient gagal dirender, halaman tetap punya warna yang mendekati:

.hero {
  background-color: #0ea5e9; /* fallback */
  background-image: linear-gradient(to right, #0ea5e9, #8b5cf6);
}

Gradasi adalah topik yang jauh lebih dalam dari teaser ini — ada radial-gradient, conic-gradient, pengulangan, sampai teknik multi-layer. Kalau mau serius mendalaminya, lesson gradient di Hyper Sheets membahasnya bertahap dengan editor langsung, dan playground gradient interaktif memungkinkan kamu meracik gradasi secara visual lalu menyalin kode CSS-nya.

Background Color dan Dark Mode

Untuk mengganti background color otomatis mengikuti tema gelap perangkat pengguna, pakai media query prefers-color-scheme: dark. Browser membaca preferensi tema dari sistem operasi pengguna, dan CSS di dalam media query itu hanya aktif saat pengguna memilih mode gelap.

Pola yang paling umum: definisikan warna sebagai CSS variable di :root, lalu timpa nilai variabelnya di dark mode — semua elemen yang memakai variabel itu otomatis ikut berubah:

:root {
  --warna-latar: #ffffff;
  --warna-teks: #0f172a;
}

@media (prefers-color-scheme: dark) {
  :root {
    --warna-latar: #0f172a;
    --warna-teks: #e2e8f0;
  }
}

body {
  background-color: var(--warna-latar);
  color: var(--warna-teks);
}

Dengan pendekatan variabel ini, kamu cukup mendefinisikan palet dua kali (terang dan gelap) di satu tempat, bukan menulis ulang background-color di ratusan selector. Di sinilah hsl() kembali bersinar: varian gelap dari sebuah warna sering kali cukup dengan menurunkan lightness dan sedikit saturation dari hue yang sama, jadi palet dark mode-mu tetap terasa satu keluarga dengan palet terangnya.

Kontras Teks dan Background: Aksesibilitas

Setiap kali mengganti background color, pastikan kontras antara warna teks dan warna latarnya cukup — standar WCAG mensyaratkan rasio kontras minimal 4,5:1 untuk teks ukuran normal (dan 3:1 untuk teks besar). Warna latar yang cantik tidak ada gunanya kalau pengunjung harus memicingkan mata untuk membaca kontennya.

Contoh klasik kombinasi yang gagal dan perbaikannya:

/* Kontras rendah: abu muda di atas putih — hampir tak terbaca */
.buruk {
  background-color: #ffffff;
  color: #cbd5e1;
}

/* Kontras aman: abu gelap di atas putih */
.baik {
  background-color: #ffffff;
  color: #334155;
}

Rasio kontras dihitung dari perbandingan luminansi (tingkat terang) kedua warna, dari 1:1 (warna identik) sampai 21:1 (hitam pekat di atas putih). Kamu tidak perlu menghitungnya manual — cukup ingat angkanya: 4,5:1 untuk teks normal, dan periksa setiap kombinasi warna teks-latar yang kamu pakai. Cara paling cepat mengeceknya: buka alat cek kontras warna interaktif, masukkan dua warnamu, dan lihat langsung lolos-tidaknya beserta simulasi teksnya.

Kebiasaan kecil yang menyelamatkan banyak desain: setiap kali menulis background-color, tulis juga color di selector yang sama. Dengan begitu pasangan warna latar-teks selalu didefinisikan bersama dan tidak ada teks yang “kejebak” di atas latar yang salah.

Background Color di Tailwind CSS

Di Tailwind CSS, background color diatur lewat utility class bg-*: misalnya bg-orange-500, bg-slate-900, atau bg-white — tanpa menulis CSS sendiri. Di balik layar, class-class itu tetap menghasilkan properti background-color yang sama persis dengan yang kita bahas sepanjang artikel ini; Tailwind hanya menyediakan palet siap pakai dengan skala angka 50 (paling terang) sampai 950 (paling gelap).

<div class="bg-orange-500 text-white p-6 rounded-lg">
  Kartu dengan latar oranye dari palet Tailwind.
</div>

<div class="bg-slate-900 text-slate-100 p-6">
  Section gelap: angka besar = makin gelap.
</div>

Butuh warna spesifik di luar palet? Pakai arbitrary value dengan kurung siku, isinya nilai warna CSS apa pun yang sudah kamu pelajari:

<div class="bg-[#1e293b] p-6">Warna hex custom.</div>
<div class="bg-[hsl(25,95%,53%)] p-6">Warna hsl custom.</div>

Transparansi juga tinggal tempel: bg-black/50 menghasilkan latar hitam dengan alpha 50% (persis rgba(0, 0, 0, 0.5)), dan dark mode cukup dengan prefix dark: — misalnya bg-white dark:bg-slate-900. Terasa betapa semua konsep dari artikel ini (alpha, dark mode, palet terang-gelap) muncul lagi dengan sintaks yang lebih ringkas.

Kalau kamu belum pernah menyentuh Tailwind sama sekali, baca dulu gambaran besarnya di panduan Tailwind CSS. Dan untuk melatih khusus utility warna latar dan teks versi Tailwind dengan latihan interaktif, ada lesson warna background Tailwind di Hyper Sheets.

Praktik: Membuat Kartu Profil dengan Kombinasi Warna Latar

Mari gabungkan semua konsep tadi ke satu komponen nyata: kartu profil dengan halaman berlatar gelap, kartu terang, header gradasi, dan badge transparan. Ini pola kombinasi warna latar yang akan terus kamu pakai di komponen apa pun — dan setiap barisnya sudah kamu pahami dari bagian-bagian sebelumnya.

Langkah 1: Struktur HTML

<body>
  <div class="kartu">
    <div class="kartu-header">
      <span class="badge">PRO</span>
    </div>
    <div class="kartu-isi">
      <h2>Raka Pratama</h2>
      <p>Front-end developer yang lagi jatuh cinta sama CSS.</p>
      <button class="tombol">Ikuti</button>
    </div>
  </div>
</body>

Langkah 2: Latar Halaman dan Kartu

body {
  margin: 0;
  min-height: 100vh;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: hsl(222, 47%, 11%); /* halaman: biru gelap */
}

.kartu {
  width: 320px;
  background-color: hsl(0, 0%, 100%);   /* kartu: putih, kontras dengan halaman */
  border-radius: 16px;
  overflow: hidden;
}

Halaman gelap, kartu terang — kontras antar-lapisan inilah yang membuat kartu “mengambang”. Perhatikan kita memakai hsl() supaya nanti gampang membuat varian warnanya.

Langkah 3: Header Gradasi dan Badge Transparan

.kartu-header {
  height: 96px;
  padding: 12px;
  /* gradient = background-image, bukan background-color! */
  background-color: hsl(25, 95%, 53%);  /* fallback */
  background-image: linear-gradient(135deg, hsl(25, 95%, 53%), hsl(340, 82%, 59%));
}

.badge {
  background-color: rgba(255, 255, 255, 0.25); /* putih transparan di atas gradasi */
  color: white;
  padding: 4px 10px;
  border-radius: 999px;
  font-size: 12px;
  font-weight: bold;
}

Badge-nya memakai rgba() putih 25% — teknik latar transparan dari bagian sebelumnya. Karena hanya latarnya yang transparan (bukan opacity), tulisan “PRO” tetap putih pekat dan terbaca.

Langkah 4: Isi Kartu dan Tombol dengan Varian Hover

.kartu-isi {
  padding: 20px;
  color: hsl(222, 47%, 11%); /* teks gelap di kartu putih: kontras aman */
}

.tombol {
  border: none;
  padding: 10px 20px;
  border-radius: 8px;
  color: white;
  background-color: hsl(25, 95%, 53%);
  cursor: pointer;
}
.tombol:hover {
  background-color: hsl(25, 95%, 45%); /* varian gelap: cukup turunkan lightness */
}

Di sinilah keputusan memakai hsl() terbayar: warna hover tombol cukup menurunkan lightness dari 53% ke 45% — satu angka, tanpa color picker. Warna tombol juga satu keluarga dengan gradasi header (hue 25), jadi kartunya terasa dirancang, bukan ditempel-tempel.

Simpan, buka di browser, dan coba-coba ganti angka hue-nya (misal 25 jadi 200) — seluruh kepribadian kartu berubah dari “oranye hangat” ke “biru kalem” hanya dengan mengganti satu angka di beberapa tempat.

Kesalahan Umum Saat Mengatur Background Color

Empat kesalahan yang paling sering membuat background color “tidak jalan”: salah menulis nama properti, tertimpa shorthand background, memakai opacity padahal maksudnya transparansi latar, dan kontras teks-latar yang terlalu rendah. Kalau warna latarmu tidak muncul atau hasilnya aneh, hampir pasti penyebabnya salah satu dari daftar ini.

1. Menulis backgroundcolor Tanpa Strip

Di CSS, properti yang benar adalah background-color — dengan strip. backgroundcolor maupun background color (pakai spasi) bukan properti yang dikenal, dan CSS mengabaikan deklarasi tak dikenal tanpa error apa pun — halaman tetap jalan, hanya warnanya tidak muncul. Membingungkannya, di JavaScript aturannya justru terbalik: strip tidak boleh dipakai di nama properti objek, jadi penulisannya style.backgroundColor (camelCase). Hafalkan pasangannya sekali, aman selamanya:

/* CSS: pakai strip */
.kotak { background-color: #f97316; }

// JavaScript: camelCase, tanpa strip
kotak.style.backgroundColor = "#f97316";

2. background-color Tertimpa Shorthand background

Seperti dibahas di atas: background adalah shorthand yang me-reset semua sub-properti yang tidak disebut. Kalau background: url(...) ditulis setelah background-color, warnamu kembali jadi transparent. Cek urutan deklarasimu di DevTools — properti yang dicoret berarti kalah. Solusi: sebut warnanya di dalam shorthand, atau pindahkan background-color ke bawah shorthand.

3. Memakai opacity untuk Membuat Latar Transparan

opacity: 0.5 membuat seluruh elemen setengah transparan — termasuk teks, ikon, dan gambar di dalamnya, dan anak elemen tidak bisa membatalkannya. Kalau niatmu hanya membuat warna latarnya tembus pandang, pakai nilai warna ber-alpha: rgba(), hsl() dengan alpha, atau hex 8 digit. Aturan cepatnya: opacity untuk memudarkan elemen utuh (misalnya animasi fade), alpha di warna untuk latar transparan.

4. Kontras Teks dan Latar Terlalu Rendah

Teks abu muda di latar putih, teks kuning di latar oranye — enak dilihat sekilas di layarmu yang terang, menyiksa di layar HP di bawah matahari. Patokannya rasio kontras 4,5:1 untuk teks normal. Biasakan menulis color dan background-color berpasangan di selector yang sama, dan cek kombinasinya dengan alat cek kontras sebelum di-publish.

5. Nilai Hex Salah Jumlah Digit

Kode hex yang valid hanya 3, 4, 6, atau 8 digit. #ff660 (5 digit) atau #f9731 tidak valid dan seluruh deklarasinya diabaikan diam-diam. Biasanya ini kejadian saat menyalin warna lalu tak sengaja menghapus satu karakter — kalau warnamu tiba-tiba hilang setelah edit kecil, hitung digit hex-nya dulu.

FAQ Seputar Background Color di CSS

Bagaimana cara mengganti warna background di CSS?

Pakai properti background-color pada selector elemen yang dituju, misalnya body { background-color: #f8fafc; } untuk seluruh halaman atau .kartu { background-color: white; } untuk satu elemen. Nilainya bisa nama warna, kode hex, rgb(), atau hsl(). Pastikan penulisannya pakai strip — background-color, bukan backgroundcolor.

Apa beda background dan background-color?

background-color hanya mengatur warna latar, sedangkan background adalah shorthand untuk delapan sub-properti latar sekaligus (warna, gambar, posisi, ukuran, pengulangan, dan lainnya). Efek sampingnya: background me-reset semua sub-properti yang tidak kamu tulis, sehingga bisa menimpa background-color yang dideklarasikan sebelumnya. Kalau hanya butuh warna, pakai background-color.

Bagaimana cara membuat background transparan?

Pakai nilai warna yang punya kanal alpha di background-color: rgba(0, 0, 0, 0.5), hsl(0 0% 0% / 0.5), atau hex 8 digit seperti #00000080. Jangan pakai properti opacity untuk tujuan ini — opacity membuat seluruh elemen transparan, termasuk teks di dalamnya, sehingga konten jadi susah dibaca.

Bagaimana cara membuat background gradasi?

Pakai fungsi linear-gradient() pada properti background-image (atau shorthand background), misalnya background-image: linear-gradient(to right, #f97316, #ec4899);. Ingat: gradient dihitung sebagai gambar, bukan warna — menaruhnya di background-color tidak akan bekerja. Untuk gradasi melingkar ada radial-gradient().

Kode warna hex itu apa?

Kode hex adalah cara menulis warna dengan angka heksadesimal setelah tanda pagar: dua digit untuk merah, dua untuk hijau, dua untuk biru — masing-masing dari 00 sampai ff. Contoh: #f97316 berarti merah f9, hijau 73, biru 16, hasilnya oranye. Ada bentuk singkat 3 digit (#f60) dan bentuk 8 digit yang menambahkan transparansi (#f9731680).

Kenapa background color saya tidak berubah?

Empat penyebab paling umum: (1) nama propertinya salah tulis — harus background-color dengan strip; (2) tertimpa shorthand background yang ditulis setelahnya; (3) selector-nya tidak mengenai elemen yang dimaksud, atau kalah spesifisitas dari aturan lain; (4) nilai warnanya tidak valid, misalnya hex 5 digit. Buka DevTools browser, inspeksi elemennya, dan lihat apakah deklarasimu muncul (dan tidak dicoret) di panel Styles.

Langkah Selanjutnya

Sekarang kamu pegang semuanya: sintaks dasar background-color, empat format nilai warna dan kapan memakainya, jebakan shorthand background, transparansi yang benar, gradasi, dark mode, sampai aturan kontras. Seperti biasa, yang mengubah “paham” jadi “bisa” adalah praktik — buka proyekmu, ganti-ganti warna latarnya, rusak, lalu perbaiki.

Kalau mau jalur latihan yang terstruktur, mulai dari lesson background-color interaktif di Hyper Sheets — kamu menulis CSS langsung di browser dan melihat hasilnya real-time, lalu lanjut ke materi warna teks, format warna, dan gradient dalam satu alur. Setelah nyaman dengan warna, lanjutkan ke properti pengatur ruang dan tata letak — dan suatu saat nanti, palet warnamu akan bertemu layout-mu di satu halaman yang benar-benar kamu banggakan. Selamat ngoding!