Mengenal CSS HEX Colors: Warna-warni Web dengan Gaya Kode (Tutorial CSS Part 8)

Gambar 8.0 : Logo CSS

Kalau kamu pernah ngulik-ngulik tampilan web, pasti sering ketemu kode warna kayak #ff5733 atau #0f0. Nah, itu namanya HEX color code, salah satu cara populer buat ngasih warna di CSS. Di artikel ini, kita bakal bahas dua jenis HEX code: HEX 6 digit dan HEX 3 digit. Siap? Gaskeun!

Apa Itu HEX Value?

HEX adalah singkatan dari hexadecimal, sistem bilangan berbasis 16 (jadi bukan cuma 0 sampai 9, tapi juga A sampai F). HEX digunakan buat representasi warna dalam CSS karena dia bisa nyambung langsung ke RGB (Red, Green, Blue).

Contoh kode HEX warna:

color: #ff5733;

Coba kita bongkar:

ff → merah (255)
57 → hijau (87)
33 → biru (51)

Jadi #ff5733 itu campuran warna merah terang, hijau muda, dan biru gelap. Hasilnya? Warna oranye kemerahan yang cukup ngejreng.

Contoh kode menggunakan internal CSS:

<!DOCTYPE html>
<html>
<head>
  <style>
    .teks-oranye {
      color: #ff5733;
      font-size: 20px;
    }
  </style>
</head>
<body>
  <p class="teks-oranye">Ini adalah teks berwarna oranye menggunakan HEX: #ff5733</p>
</body>
</html>

Hasilnya:

Gambar 8.1 : Contoh CSS Color dengan HEX value

Terus, Apa Bedanya dengan 3 Digit HEX?

Kadang kamu juga bakal nemu kode kayak:

color: #0f0;

Nah, ini yang disebut 3 digit HEX value. Lebih singkat, tapi masih powerful.

Formatnya gini:
#RGB → artinya sama kayak #RRGGBB, tapi masing-masing digit diulang dua kali.

Contoh:

#0f0 itu sama aja kayak #00ff00 → hijau cerah
#abc itu sama dengan #aabbcc → warna abu-abu kebiruan yang lembut

Simple, kan? 3 digit HEX cocok banget buat warna-warna yang punya nilai RGB ganda (misal 11, cc, ff, dll).

Contoh kode menggunakan internal CSS:


<!DOCTYPE html>
<html>
<head>
  <style>
    .teks-hijau {
      color: #0f0;
      font-size: 20px;
      background-color: #222; /* biar teks hijaunya lebih terlihat */
      padding: 10px;
    }
  </style>
</head>
<body>

  <p class="teks-hijau">Ini adalah teks berwarna hijau terang menggunakan HEX: #0f0</p>

</body>
</html>

Hasilnya:

Gambar 8.2 : Contoh CSS Color HEX value 3 digit

Kapan Harus Pakai 3 Digit atau 6 Digit?

Sebenarnya ini lebih ke preferensi dan kebutuhan. Kalau warnanya bisa diwakilin 3 digit, kenapa nggak? Lebih singkat dan ringkas. Tapi kalau butuh detail warna yang lebih spesifik, ya pakai 6 digit aja.

Contoh:

#333 → cukup buat warna abu gelap
Tapi #334455 → kasih nuansa biru-abu yang lebih rumit

Bonus: Tips Biar Gak Salah Gunakan HEX

Jangan lupa pakai tanda # di awal
Huruf besar atau kecil bebas, tapi konsisten aja (misal: #FFAA00 atau #ffaa00)
Validasi dulu warnanya, bisa pakai tools kayak coolors.co atau di Figma/Photoshop

Penutup

Pakai HEX colors itu kaya ngelukis pakai angka. Unik, simple, tapi bisa hasilin tampilan yang estetik banget. Jadi, jangan takut main warna pakai kode-kode ini. Mau 3 digit atau 6 digit, yang penting web kamu makin keren!

Kalau kamu baru mulai belajar CSS, main-main dulu aja sama kombinasi HEX. Lama-lama, kamu bakal hafal warna-warna favoritmu.

filesop.com