Properti Warna CSS — Panduan Lengkap untuk Pengembang Web
Kuasai setiap properti warna CSS dari color dan background-color hingga gradien dan opacity. Referensi lengkap dengan contoh praktis.
Dasar: color dan background-color
Dua properti warna CSS paling fundamental adalah color (untuk teks) dan background-color (untuk latar belakang elemen). Keduanya menerima nilai warna CSS yang valid termasuk warna bernama, HEX, RGB, HSL, dan fungsi warna modern.
Properti color mengatur warna depan elemen. Properti background-color mengisi seluruh area konten dan padding elemen.
Fungsi Warna CSS Modern
CSS telah berkembang melampaui rgb() dan hsl() dasar:
Fungsi rgb() sekarang mendukung sintaks modern: rgb(255 0 0). Transparansi alfa menggunakan garis miring: rgb(255 0 0 / 50%).
Fungsi hsl() bekerja serupa. HSL berguna untuk membuat variasi warna.
Fungsi color-mix() memungkinkan Anda mencampur dua warna. oklch() dan oklab() menyediakan ruang warna yang seragam secara perseptual.
Gradien: Linear, Radial, dan Conic
Gradien CSS menciptakan transisi warna yang halus:
Gradien linear mengalir dalam garis lurus: background: linear-gradient(to right, #ff0000, #0000ff).
Gradien radial memancar dari titik pusat: background: radial-gradient(circle, red, blue).
Gradien conic berputar di sekitar titik pusat seperti diagram lingkaran. Sangat baik untuk membuat roda warna.
Opacity dan Transparansi
CSS menawarkan beberapa cara untuk mengontrol transparansi:
Properti opacity mempengaruhi seluruh elemen dan semua anak-anaknya. Saluran alfa dalam nilai warna hanya mempengaruhi properti spesifik.
Kata kunci transparent setara dengan rgba(0, 0, 0, 0). currentColor mewarisi warna teks saat ini.
Properti Kustom CSS untuk Sistem Warna
Properti kustom CSS adalah fondasi sistem warna modern. Mereka mendefinisikan warna sekali dan menggunakannya kembali di seluruh stylesheet.
Untuk mode gelap, cukup timpa variabel.
Alat pemilih warna kami menghasilkan nilai warna dalam semua format CSS secara instan.