Warna CSS: Nama, Hex, RGB, RGBA, HSL, Transparansi

Cara menulis warna di CSS

Setiap properti yang menerima warna (color, background-color, border-color, bayangan, fill SVG) menerima format yang sama. Empat contoh warna pertama adalah biru yang sama yang ditulis dengan empat cara, dan yang kelima adalah nama warna yang hampir sama:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>One blue, four formats</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    .swatch { padding: 10px 14px; margin: 6px 0; color: white; border-radius: 6px; }
  </style>
</head>
<body>
  <div class="swatch" style="background: #2563eb;">#2563eb (hex)</div>
  <div class="swatch" style="background: rgb(37 99 235);">rgb(37 99 235)</div>
  <div class="swatch" style="background: rgb(37, 99, 235);">rgb(37, 99, 235) (comma syntax)</div>
  <div class="swatch" style="background: hsl(221.2 83.2% 53.3%);">hsl(221.2 83.2% 53.3%)</div>
  <div class="swatch" style="background: royalblue;">royalblue (a named color, close but not equal)</div>
</body>
</html>

Warna hex

Warna hex adalah # yang diikuti merah, hijau, dan biru, masing-masing sebagai dua digit heksadesimal, dari 00 sampai ff. Tiga bentuk berikut adalah singkatan atau perluasannya:

• #rgb: setiap digit digandakan, jadi #25e sama dengan #2255ee.
• #rrggbbaa: pasangan terakhir adalah alpha, jadi #2563eb80 kira-kira 50% tidak transparan.
• #rgba: bentuk singkat dengan alpha.

Hex tidak peka huruf besar kecil: #2563EB dan #2563eb adalah warna yang sama.

rgb() dan rgba()

rgb() menerima merah, hijau, dan biru dari 0 sampai 255 (atau 0% sampai 100%). Nilai keempat yang opsional setelah garis miring adalah alpha, dari 0 (tidak terlihat) sampai 1, atau 0% sampai 100%.

color: rgb(37 99 235);          /* modern space syntax */
color: rgb(37 99 235 / 50%);    /* half transparent */
color: rgba(37, 99, 235, 0.5);  /* older comma syntax, same result */

rgba() dan rgb() sekarang adalah fungsi yang sama: keduanya menerima kedua sintaks dan alpha yang opsional. Kode lama memakai rgba() saat butuh transparansi, dan kode itu tetap berfungsi.

hsl(): format yang paling mudah disesuaikan

hsl() menjelaskan warna seperti cara orang memikirkannya: hue dari roda warna, saturation, dan lightness. Pertahankan hue dan ubah lightness untuk mendapatkan satu skala lengkap:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>HSL scale</title>
  <style>
    body { font-family: system-ui, sans-serif; font-size: 14px; }
    .row { display: flex; gap: 4px; margin-bottom: 8px; }
    .row div { flex: 1; padding: 20px 4px; text-align: center; border-radius: 4px; }
  </style>
</head>
<body>
  <div class="row">
    <div style="background: hsl(221 83% 90%);">90%</div>
    <div style="background: hsl(221 83% 75%);">75%</div>
    <div style="background: hsl(221 83% 53%); color: white;">53%</div>
    <div style="background: hsl(221 83% 35%); color: white;">35%</div>
    <div style="background: hsl(221 83% 20%); color: white;">20%</div>
  </div>
  <div class="row">
    <div style="background: hsl(0 70% 55%);">0 red</div>
    <div style="background: hsl(60 70% 55%);">60 yellow</div>
    <div style="background: hsl(120 70% 55%);">120 green</div>
    <div style="background: hsl(240 70% 55%); color: white;">240 blue</div>
    <div style="background: hsl(300 70% 55%);">300 magenta</div>
  </div>
</body>
</html>

Baris pertama mempertahankan hue 221 dan saturation 83% lalu hanya mengubah lightness. Baris kedua berkeliling roda warna dengan saturation dan lightness yang sama.

Transparansi: alpha vs opacity

Alpha channel membuat satu warna tembus pandang. opacity membuat seluruh elemen tembus pandang, termasuk teks dan anak-anaknya:

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Alpha vs opacity</title>
  <style>
    body {
      font-family: system-ui, sans-serif; font-weight: 600;
      background: repeating-linear-gradient(90deg, #fde68a 0 16px, #ffffff 16px 32px);
      padding: 12px;
    }
    .box { padding: 16px; margin-bottom: 10px; color: #111827; }
    .alpha { background: rgb(37 99 235 / 40%); }
    .opacity { background: rgb(37 99 235); opacity: 0.4; }
  </style>
</head>
<body>
  <div class="box alpha" id="a">Alpha background: the text stays solid</div>
  <div class="box opacity" id="o">opacity 0.4: the text fades too</div>
</body>
</html>

transparent adalah kata kunci untuk hitam yang sepenuhnya transparan, rgb(0 0 0 / 0). Ini adalah background default sebagian besar elemen.

currentColor

currentColor sama dengan color milik elemen itu sendiri. Tombol yang border, ikon, dan teksnya semua memakai nilai ini bisa mengubah semuanya dengan satu deklarasi:

.button {
  color: #16a34a;
  border: 2px solid currentColor;
}
.button svg { fill: currentColor; }

Border sudah memakai currentColor secara default, itulah sebabnya border: 2px solid tanpa warna akan sama dengan warna teks.

Coba warna apa saja

Ketik warna dalam format apa pun. Browser membacanya dan menampilkan hasil hitungannya; warna yang tidak valid membuat contoh warnanya tidak berubah.

<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>Color tester</title>
  <style>
    body { font-family: system-ui, sans-serif; }
    #swatch { height: 60px; margin: 12px 0; border: 1px solid #d1d5db; border-radius: 6px; background: white; }
  </style>
</head>
<body>
  <label>Color: <input id="val" value="hsl(38 92% 50%)" size="28"></label>
  <div id="swatch"></div>
  <code id="out"></code>
  <script>
    const swatch = document.getElementById('swatch');
    const input = document.getElementById('val');
    const show = () => {
      if (!CSS.supports('color', input.value)) {
        document.getElementById('out').textContent = 'not a valid color';
        return;
      }
      swatch.style.background = input.value;
      document.getElementById('out').textContent =
        'computed: ' + getComputedStyle(swatch).backgroundColor;
    };
    input.addEventListener('input', show);
    show();
  </script>
</body>
</html>

Coba tomato, #0f0, #2563eb80, rgb(0 0 0 / 25%), oklch(70% 0.15 150), dan color-mix(in srgb, #2563eb, white 50%).

Fungsi warna yang lebih baru

• oklch(L C H): lightness, chroma, dan hue dalam ruang warna yang dirancang agar kecerahan yang sama terlihat sama terangnya. Palet yang dibuat dengannya punya lebih sedikit langkah tengah yang kusam dibanding palet HSL.
• color-mix(in srgb, A, B 30%): mencampur dua warna. Dengan white atau black, fungsi ini membuat versi terang dan gelap dari satu warna brand, dan berfungsi dengan variabel CSS: color-mix(in srgb, var(--brand), white 80%).

Keduanya berfungsi di Chrome, Firefox, dan Safari versi saat ini. Simpan warna brand di variabel CSS supaya format yang kamu pilih ada di satu tempat.

Kesalahan umum

• Lupa # pada warna hex. color: 2563eb tidak valid dan diabaikan.
• Memakai opacity untuk membuat background transparan. Teksnya ikut memudar. Pakai warna dengan alpha.
• Mencampur pemisah di sintaks modern. rgb(37 99, 235) tidak valid: pakai spasi semua atau koma semua.
• Menganggap nama warna sama dengan desainmu. royalblue bukan #2563eb. Salin kode yang persis.
• Menilai kontras dengan mata. Periksa warna teks terhadap background-nya dengan contrast checker; 4.5:1 adalah batas minimum untuk teks isi.