Cara Menggunakan Warna Hex di CSS

Halo teman-teman!
Setelah sebelumnya kita membahas tentang format warna RGB dan RGBA, sekarang kita akan bahas tentang cara menggunakan warna hex di CSS.

Format hex ini sering banget muncul di dunia desain web, baik dari aplikasi desain seperti Figma maupun tools palet warna. Kode hex juga jadi favorit karena bentuknya ringkas, akurat, dan cocok untuk semua jenis elemen.

Apa Itu Warna Hex?

Hex (atau heksadesimal) adalah format warna yang ditulis dengan awalan tanda pagar # diikuti enam digit kombinasi angka dan huruf (0–9 dan A–F). Enam digit ini mewakili tiga komponen warna dasar:

• Dua digit pertama untuk merah (Red)

• Dua digit berikutnya untuk hijau (Green)

• Dua digit terakhir untuk biru (Blue)

Format umumnya:

#RRGGBB

Contoh:

• #ff0000 → merah penuh

• #00ff00 → hijau penuh

• #0000ff → biru penuh

• #000000 → hitam

• #ffffff → putih

Cara Pakai Hex di CSS

Sama seperti warna lain, kode hex bisa digunakan di properti seperti color, background-color, border-color, dan lainnya.

Contoh:

body {
  background-color: #f0f0f0;
}

h1 {
  color: #333333;
}

button {
  border: 1px solid #cccccc;
}

Shortcut Hex 3 Digit

Beberapa warna bisa ditulis dengan lebih singkat menggunakan format hex 3 digit. Format ini berlaku jika setiap digit warna dobel.

Contoh:

• #f00 sama dengan #ff0000

• #0f0 sama dengan #00ff00

• #00f sama dengan #0000ff

• #fff sama dengan #ffffff

Hemat karakter, hasilnya tetap sama!

Contoh Kombinasi Warna Hex

Berikut contoh kombinasi warna hex dalam sebuah layout:

.container {
  background-color: #ffffff;
  color: #333333;
  border: 1px solid #dddddd;
  padding: 20px;
}

.button-primary {
  background-color: #0077cc;
  color: white;
}

.alert {
  background-color: #ffcc00;
  color: #333;
}

Tips Biar Warna Hex-mu Konsisten

• Simpan warna-warna utama proyekmu agar mudah digunakan ulang

• Gunakan tool seperti coolors.co untuk bikin palet warna harmonis

• Perhatikan kontras agar teks tetap terbaca

• Gunakan hex 3 digit kalau warnanya mendukung, biar ringkas

Kelebihan dan Kekurangan Hex

Kelebihan:

• Ringkas dan umum digunakan

• Mudah dikopi dari banyak tool desain

• Akurat untuk warna solid

Kekurangan:

• Tidak mendukung transparansi (beda dengan RGBA atau HSLA)

• Tidak se-intuitif HSL dalam mengatur kecerahan atau kejenuhan

Yuk Coba Sendiri!

Sekarang giliran kamu untuk bereksperimen. Coba ubah warna latar, warna teks, atau warna border dengan hex. Lihat hasilnya dan mulai pilih mana warna favoritmu!

Kalau kamu suka desain yang rapi dan profesional, hex bisa jadi pilihan utama buat styling elemen di halaman web.

Di materi selanjutnya, kita akan belajar tentang warna HSL dan HSLA yang lebih fleksibel dalam mengatur tone warna.

Baca juga