Kode Warna HTML: Daftar, Cara Membaca, dan Cara Memakainya

Setiap piksel di layar laptop atau HP Anda sebenarnya terdiri dari tiga lampu yang sangat kecil: merah, hijau, dan biru. Warna yang kita lihat muncul dari seberapa terang masing-masing lampu itu menyala. Komputer tidak mengenal kata "biru muda" atau "krem", ia hanya mengenal angka intensitas ketiga lampu tersebut. Kode warna HTML adalah cara kita menuliskan angka-angka itu di halaman web, misalnya #FF0000 untuk merah atau #FFFFFF untuk putih.

Artikel ini tidak hanya menyajikan daftar kode warna yang bisa Anda salin. Kita akan membahas cara membaca kode hex sehingga Anda bisa menebak warnanya tanpa alat bantu. Setelah itu, kita lanjut ke lima format penulisan warna di CSS, cara memakainya di halaman, hingga patokan kontras agar teks tetap terbaca.

Apa Itu Kode Warna HTML?

Kode warna HTML (HTML color code) adalah notasi untuk menyatakan sebuah warna di halaman web. Bentuknya bisa berupa nama (red), kode heksadesimal (#FF0000), maupun fungsi seperti rgb(255 0 0). Ketiga contoh tersebut menghasilkan warna merah yang persis sama. Browser menerjemahkan notasi itu menjadi intensitas lampu merah, hijau, dan biru pada setiap piksel.

Istilah "kode warna HTML" sebenarnya peninggalan masa lalu. Dulu warna memang ditulis langsung di tag HTML, misalnya <body bgcolor="#FFFFFF"> atau <font color="red">. Spesifikasi HTML 4 hanya mencantumkan 16 nama warna dasar yang berasal dari palet kartu grafis VGA. Cara ini sudah usang sejak HTML5, dan kini seluruh urusan tampilan, termasuk warna, ditangani oleh CSS.

Jadi, kode warna HTML dan kode warna CSS sebenarnya merujuk ke hal yang sama. Keduanya adalah nilai warna yang ditulis di CSS lalu diterapkan ke elemen HTML. Nama lama itu bertahan karena kebiasaan.

Cara Membaca Kode Warna Hex: Tiga Pasang Angka 00 sampai FF

Kode hex adalah format warna yang paling sering Anda temui. Bentuk lengkapnya terdiri dari tanda # diikuti enam karakter, dengan pola #RRGGBB. Dua karakter pertama menyatakan intensitas merah (red), dua berikutnya hijau (green), dan dua terakhir biru (blue).

Angkanya ditulis dalam sistem heksadesimal (bilangan basis 16), yaitu angka 0–9 lalu dilanjutkan huruf A–F. Satu pasang karakter hex bisa menampung nilai dari 00 (0) sampai FF (255). Itulah arti "hex" pada kode warna hex: singkatan dari heksadesimal. Karena tiap kanal punya 256 kemungkinan, jumlah kombinasinya 256 × 256 × 256 = 16.777.216 warna.

Dengan pola ini, Anda bisa menebak warna hanya dari kodenya:

• #FF0000: merah penuh, hijau dan biru mati. Hasilnya merah murni.
• #FFFF00: merah dan hijau penuh, biru mati. Pada cahaya, merah ditambah hijau menghasilkan kuning.
• #808080: ketiga kanal sama besar di tengah-tengah (128). Setiap kode dengan tiga pasangan yang sama selalu menghasilkan abu-abu.
• #FFFFFF dan #000000: semua lampu menyala penuh menjadi putih, semua lampu mati menjadi hitam.

Ada dua variasi yang perlu Anda kenali. Pertama, bentuk singkat tiga digit: #F09 sama dengan #FF0099, karena setiap digit digandakan. Kedua, bentuk delapan digit #RRGGBBAA, dengan dua digit terakhir sebagai alpha (tingkat ketidaktransparanan). Nilai 00 berarti transparan penuh dan FF berarti pekat, sehingga #FF0099AA adalah merah muda yang kira-kira 67% pekat. Huruf besar atau kecil tidak berpengaruh: #ff0000 dan #FF0000 identik.

Lima Format Kode Warna CSS: Nama, HEX, RGB, HSL, OKLCH

Hex bukan satu-satunya cara. CSS modern mengenal beberapa format, dan masing-masing punya kegunaan sendiri. Berikut lima yang paling relevan untuk pekerjaan sehari-hari.

Nama warna adalah kata kunci seperti navy atau tomato. Spesifikasi CSS Color Level 4 dari W3C memuat 148 nama, tetapi hanya mewakili 139 warna unik. Selisihnya berasal dari sembilan pasang sinonim, misalnya gray dan grey atau aqua dan cyan.

rgb() atau kode warna RGB menulis tiga kanal yang sama dengan hex, tetapi dalam angka desimal 0–255. Sintaks modern memakai spasi dan garis miring untuk transparansi, misalnya rgb(255 0 0 / 50%). Bentuk lama dengan koma dan fungsi rgba() masih berlaku; rgba() kini hanya alias dari rgb().

hsl() menyusun warna dari hue (sudut di roda warna 0–360), saturation (kepekatan), dan lightness (kecerahan). Format ini memudahkan pembuatan variasi: cukup ubah angka kecerahan untuk mendapatkan versi lebih terang atau lebih gelap dari warna yang sama.

oklch() adalah format paling baru. Kelebihannya, angka kecerahan di format ini sesuai dengan persepsi mata manusia. Sebagai contoh, oklch(55% 0.12 250) menghasilkan biru sekitar #3275B4. Naikkan kecerahannya menjadi oklch(70% 0.12 250), hasilnya biru lebih terang sekitar #61A3E6 dengan karakter warna yang tetap sama. Format ini didukung sejak Chrome 111, Firefox 113, dan Safari 15.4.

Mengubah Kode Warna RGB ke Hex dan Sebaliknya

Konversi RGB ke hex bisa dihitung tanpa alat apa pun. Bagi setiap angka desimal dengan 16: hasil bagi menjadi digit pertama, sisanya menjadi digit kedua. Ingat bahwa 10 sampai 15 ditulis sebagai A sampai F.

Sebagai contoh, kita ubah rgb(78 128 213) menjadi hex:

Hasilnya #4E80D5. Konversi hex ke RGB adalah kebalikannya: kalikan digit pertama dengan 16 lalu tambahkan digit kedua. Untuk D5, hitungannya 13 × 16 + 5 = 213. Dalam praktik, DevTools browser bisa melakukan konversi ini otomatis, tetapi memahami hitungannya membantu Anda membaca kode warna dengan cepat.

Daftar Kode Warna HTML yang Paling Sering Dicari

Daftar berikut disusun per keluarga warna. Nilai untuk nama resmi CSS diambil langsung dari tabel spesifikasi W3C. Warna populer yang tidak punya nama resmi di CSS, seperti cream atau sage, ditandai — di kolom Nama CSS, lengkap dengan nilai yang umum dipakai. Untuk warna seperti ini, Anda wajib menulis kode hex-nya karena browser tidak mengenali namanya.

Sebelum masuk ke daftar per keluarga, berikut 16 warna dasar warisan HTML lama yang masih berlaku sampai sekarang:

Merah, Pink, dan Maroon

Kuning, Oranye, dan Emas (Gold)

Perlu dicatat, gold resmi CSS adalah kuning cerah yang jauh dari kesan logam. Untuk desain bernuansa emas mewah, nilai emas metalik #D4AF37 biasanya lebih sesuai.

Hijau Tosca, Hijau Sage, dan Emerald

Biru, Biru Muda, dan Navy

Ungu

rebeccapurple adalah satu-satunya nama yang ditambahkan di CSS Color Level 4, sebagai penghormatan untuk Eric Meyer, salah satu tokoh penting dalam sejarah CSS.

Coklat, Cream, dan Putih Tulang

brown resmi CSS cenderung kemerahan. Untuk coklat kayu atau kopi, saddlebrown atau chocolate biasanya lebih mendekati. Putih tulang juga tidak punya nilai standar; ivory, linen, dan beige adalah tiga pilihan resmi yang paling mendekati.

Putih, Abu-abu, Silver, dan Hitam

Cara Memakai Kode Warna di Halaman HTML

Tiga properti CSS yang paling sering memakai kode warna adalah color untuk warna teks, background-color untuk latar, dan border-color untuk garis tepi. Ketiganya menerima format apa pun yang sudah kita bahas: nama, hex, rgb(), hsl(), atau oklch().

Ada tiga tempat untuk menuliskan CSS tersebut. Untuk perubahan satu elemen secara cepat, Anda bisa memakai atribut style langsung di tag:

<p style="color: #1E3A5F;">Teks biru tua</p>

Untuk website sungguhan, kami menyarankan menaruh warna di berkas .css terpisah atau minimal di tag <style>. Dengan begitu, satu aturan berlaku untuk banyak elemen sekaligus:

body {
  color: #222222;
  background-color: #FFFFFF;
}

.tombol {
  background-color: #4E80D5;
  border: 2px solid #14305A;
  color: #FFFFFF;
}

Saat jumlah halaman bertambah, simpan palet Anda di CSS custom property (variabel CSS). Kode warna cukup ditulis sekali di :root, lalu dipanggil di mana saja dengan var():

:root {
  --warna-utama: #4E80D5;
  --warna-teks: #222222;
}

.tombol {
  background-color: var(--warna-utama);
}

Keuntungannya terasa saat warna brand berubah. Anda cukup mengganti satu baris di :root, bukan mencari puluhan kode hex yang tersebar di seluruh berkas.

Cara Mengetahui Kode Warna dari Website atau Gambar

Ada kalanya Anda melihat warna menarik di website lain atau di sebuah gambar dan ingin tahu kodenya. Ada tiga cara yang tidak membutuhkan aplikasi tambahan.

Lewat DevTools Browser

Cara paling akurat untuk warna di website adalah lewat DevTools bawaan browser. Klik kanan pada elemen, pilih Inspect, lalu lihat panel Styles: setiap nilai warna ditampilkan bersama kotak kecil berisi pratinjaunya. Penjelasan lengkap cara membuka alat ini ada di artikel inspect element.

Kotak pratinjau warna di DevTools Chrome dan Edge juga menyediakan eyedropper (pipet). Dengan pipet tersebut, Anda bisa mengambil warna dari bagian mana saja di halaman, termasuk dari gambar. Di jendela yang sama, Anda juga bisa mengganti format tampilan antara hex, RGB, dan HSL. Panel yang sama juga menampilkan nama font yang dipakai, sehingga langkahnya mirip dengan mengetahui jenis font sebuah website.

Lewat Elemen Pemilih Warna HTML

Kalau Anda hanya butuh pemilih warna sederhana, HTML punya elemen bawaan untuk itu:

<input type="color" value="#4E80D5">

Elemen ini memunculkan pemilih warna milik sistem operasi. Secara bawaan, nilai yang dikembalikannya berupa kode hex enam digit huruf kecil, misalnya #4e80d5.

Memasukkan Kode Warna di Canva

Canva menerima kode hex secara langsung, sehingga kode dari daftar di atas bisa dipakai di desain Anda. Pilih elemen atau teks, klik kotak warna di toolbar, lalu klik kotak bergambar pelangi (Add a new color) di panel warna. Pada tab warna solid, ketik kode hex-nya, misalnya #D4AF37 untuk emas metalik atau #FFFDD0 untuk cream. Di panel yang sama tersedia pipet untuk mengambil warna dari gambar yang sudah ada di desain.

Kelemahan dan Jebakan Kode Warna

Kode warna tampak sederhana, tetapi ada beberapa jebakan yang sering membuat hasil di layar tidak sesuai harapan.

1. Nama warna tidak konsisten: Spesifikasi CSS sendiri mengakui hal ini. darkgray (#A9A9A9) justru lebih terang daripada gray (#808080), dan lightpink lebih gelap daripada pink. Selain itu, green adalah hijau tua #008000, sedangkan hijau terang murni bernama lime. W3C tidak menganjurkan nama warna untuk pekerjaan serius; nama-nama itu dipertahankan karena sudah dipakai luas selama puluhan tahun.
2. Atribut warna lama menerima teks apa saja: Atribut usang seperti bgcolor tidak menolak nilai yang salah. Browser menjalankan algoritma lama yang mengganti setiap karakter non-hex dengan angka 0. Hasilnya, bgcolor="merah" menghasilkan #0E0A00 yang nyaris hitam, dan bgcolor="biru" justru menghasilkan merah #B00000. Properti CSS modern tidak bersikap seperti ini; nilai yang tidak valid diabaikan.
3. Hex tanpa tanda pagar bisa berubah makna: Di CSS, pada dokumen yang diawali <!DOCTYPE html>, nilai color: FF0000 tanpa # dianggap tidak valid dan diabaikan. Di atribut lama, ff0 tanpa pagar dibaca sebagai #0F0F00, bukan kuning.
4. Warna tampil berbeda di layar berbeda: Kode hex mengacu pada ruang warna sRGB. Namun, setiap layar menampilkannya sedikit berbeda, tergantung panel, kalibrasi, dan pengaturan kecerahan. Warna yang terlihat lembut di monitor desain bisa tampak pucat di layar HP murah.
5. Format baru butuh cadangan: oklch() didukung semua browser utama sejak 2023, tetapi browser lama akan mengabaikannya. Kalau pengunjung Anda masih banyak memakai perangkat lama, tulis nilai hex lebih dulu, lalu oklch() di baris berikutnya. Browser lama memakai baris pertama, browser baru menimpanya dengan baris kedua.

Rekomendasi Kode Warna yang Bagus dan Tetap Terbaca

Warna yang indah belum tentu terbaca. Patokan yang paling banyak dipakai adalah WCAG (Web Content Accessibility Guidelines), pedoman aksesibilitas web dari W3C. WCAG mengukur rasio kontras antara warna teks dan latar, mulai dari 1:1 (tidak ada perbedaan) hingga 21:1 (hitam di atas putih).

Angka minimum yang perlu Anda pegang:

1. Teks biasa: minimal 4,5:1 untuk level AA.
2. Teks besar: minimal 3:1, dengan teks besar berarti ukuran sekitar 24 px, atau sekitar 18,5 px kalau tebal.
3. Level AAA: minimal 7:1 untuk teks biasa, cocok untuk konten panjang atau pembaca lanjut usia.

Ambang ini tidak dibulatkan, sehingga selisih kecil bisa menentukan. Berikut beberapa hasil hitungan kontras di atas latar putih #FFFFFF:

Tabel ini menunjukkan dua hal yang sering mengejutkan. Pertama, #767676 adalah abu-abu paling terang yang masih aman untuk teks biasa di atas putih; satu tingkat lebih terang saja sudah gagal. Kedua, merah murni #FF0000 tidak cukup kontras untuk teks paragraf, meskipun terlihat mencolok.

Selain kontras, batasi palet Anda di 3–5 warna: satu warna utama, satu warna aksen untuk tombol atau tautan, serta warna netral untuk teks dan latar. Prinsip ini juga berlaku untuk perancangan antarmuka pengguna secara umum: warna aksen yang dipakai di terlalu banyak tempat akan kehilangan fungsinya sebagai penarik perhatian.

Pertanyaan yang Sering Diajukan

#FFFFFF kode warna apa?

#FFFFFF adalah putih. Ketiga kanal merah, hijau, dan biru bernilai maksimum (255), sehingga semua lampu piksel menyala penuh. Nama CSS-nya white.

#FF0000 warna apa?

#FF0000 adalah merah murni. Kanal merah bernilai maksimum, sedangkan hijau dan biru bernilai nol. Nama CSS-nya red, dan dalam format lain ditulis rgb(255 0 0) atau hsl(0 100% 50%).

Kode warna #FFFF00 adalah warna apa?

#FFFF00 adalah kuning. Merah dan hijau menyala penuh, biru mati. Pada cahaya layar, campuran merah dan hijau menghasilkan kuning, berbeda dengan pencampuran cat.

Berapa jumlah nama warna di CSS?

Spesifikasi CSS Color Level 4 memuat 148 nama warna yang mewakili 139 warna unik, karena sembilan di antaranya adalah sinonim. Di luar itu, ada kata kunci khusus transparent dan currentColor.

Apa arti hex pada kode warna?

Hex adalah singkatan dari heksadesimal, sistem bilangan basis 16 yang memakai angka 0–9 dan huruf A–F. Pada kode warna, setiap pasang karakter hex menyatakan nilai 0 sampai 255 untuk satu kanal warna.

Apa beda HEX dan RGB?

Keduanya menyatakan tiga kanal yang sama, hanya beda cara menulis angkanya. Hex memakai basis 16 (#4E80D5), sedangkan RGB memakai desimal (rgb(78 128 213)). Hasil warnanya identik.

Kesimpulan

Kode warna HTML pada dasarnya adalah tiga angka intensitas untuk lampu merah, hijau, dan biru, yang bisa ditulis sebagai nama, hex, rgb(), hsl(), atau oklch(). Gunakan hex untuk pekerjaan sehari-hari, rgb() dengan alpha saat butuh transparansi, dan oklch() saat menyusun palet dengan tingkat kecerahan yang konsisten. Hindari nama warna untuk desain serius, dan selalu periksa kontras teks minimal 4,5:1 sebelum warna dipakai di halaman sungguhan.

Semoga artikel ini membantu.