Color dan Background-Color

Dua property inilah pasangan warna yang paling sering kita tulis sepanjang karier CSS: color mewarnai teks, sedangkan background-color mengisi kotak elemen. Keduanya menerima format warna apa pun dari chapter sebelumnya, tetapi sifat keduanya berbeda mendasar — satu diwariskan ke anak, satu tidak; satu mengecat huruf, satu mengecat bidang. Memahami perbedaan itu, plus area mana saja yang dicat oleh background, menyelamatkan kita dari banyak kebingungan sepele seperti teks yang tak terlihat atau kartu yang warnanya “bocor” ke anak-anaknya.

color: Warna Teks yang Diwariskan #

body {
  color: #1f2933;
}

blockquote {
  color: #14503a;
}

Demo berikut memasang kedua aturan itu pada halaman mini:

color termasuk property yang diwariskan (inherited). Anak-anak elemen tidak perlu mendeklarasikannya ulang; cukup satu aturan di induk, dan seluruh keturunannya mengikuti. Inilah alasan praktik umum menetapkan warna teks utama sekali di body — mengubah tema tinggal mengganti satu deklarasi.

Efek dari color juga merambat ke bagian lain: dekorasi teks (text-decoration), caret pada input, dan — seperti dibahas pada chapter Border — warna border-color bila kita tidak menuliskannya.

background-color: Mengisi Kotak, Tidak Diwariskan #

.kartu-profil {
  background-color: #f4fbf7;
  padding: 16px;
  border: 6px solid rgb(31 111 84 / 25%);
}

Demo berikut memakai deklarasi yang sama, plus satu anak tanpa warna sendiri:

Dua fakta penting perlu kita pegang:

1. background-color tidak diwariskan. Elemen anak tidak menerima warna sama sekali. Anak kartu tampak “berlatar hijau muda” bukan karena mewarisi, melainkan karena kotaknya transparan sehingga warna induk terlihat dari baliknya.
2. Area lukisannya mencapai tepi luar border. Warna digambar di bawah border; bila border pekat (opaque) warna itu tertutup, tetapi bila border transparan atau semi transparan, warnanya ikut terlihat.

currentColor: Mengikuti Warna Teks #

Kata kunci currentColor bernilai persis sama dengan color elemen tersebut. Ia berguna ketika kita ingin bagian lain — border, bayangan, ikon SVG — ikut senada dengan teksnya:

.tautan-strip {
  color: #14503a;
  border-bottom: 3px solid currentColor;
}

.tautan-strip:hover {
  color: #1f6f54;
}

Bila border-color tidak ditulis sama sekali, browser memakai currentColor sebagai nilainya — garis bawah pun otomatis senada dengan teks tanpa deklarasi kedua.

transparent: Warna Tanpa Isi #

Kata kunci transparent setara dengan warna ber-alpha 0. Pemakaiannya yang paling klasik adalah memesan ruang border sejak awal agar layout tidak bergeser saat hover (trik dari chapter Border), dan menghapus latar bawaan elemen:

.tombol-halus {
  background-color: transparent;
  border: 2px solid #1f6f54;
}

Perhatikan bahwa transparent hanya mengosongkan warna — berbeda dengan opacity yang meredupkan seluruh elemen beserta isinya (dibahas pada chapter tersendiri).

Lapisan Paling Bawah dari Background #

Ketika elemen memiliki background-image, background-color tetap digambar lebih dulu pada posisi paling bawah. Inilah dasar pola fallback: bila gambar gagal dimuat, warna latar menjaga teks tetap terbaca.

.hero {
  background-color: #14503a;
  background-image: linear-gradient(160deg, #1f6f54, #14503a);
  color: #f4fbf7;
}

Detail menumpuk gambar kita bedah pada chapter Background Image; yang perlu dipegang sekarang: warna selalu menjadi dasar, gambar datang di atasnya.

Awal Mengenal Kontras #

Warna teks dan warna latar selalu berpasangan — keputusan atas salah satunya otomatis mempengaruhi yang lain. Patokan WCAG yang akan terus kita pakai: kontras teks normal minimal 4.5:1, teks besar minimal 3:1. Kita bedah tuntas cara menghitung dan memperbaikinya pada chapter Kontras Warna di ujung section ini.

Tiga pasangan teks–latar berikut bisa langsung dibandingkan:

Kesalahan Umum #

Ringkasan #

color mewarnai teks dan diwariskan ke seluruh keturunannya, sedangkan background-color mengisi kotak elemen sampai ke tepi border tanpa diwariskan sama sekali. Kata kunci currentColor dan transparent menambah fleksibilitas: yang satu mengikuti warna teks, yang satu mengosongkan bidang. Warna latar juga selalu berperan sebagai lapisan paling bawah dan fallback bila gambar gagal — dan gambar itulah topik chapter berikutnya: menempelkan gambar serta gradien di belakang konten lewat background-image.