Warna Website Hijau: 6 Palet dengan Kode Hex

Palet warna website hijau dengan kode hex, pasangan teks yang lolos uji kontras, dan contoh pemakaian, agar hijau pilihan Anda mudah dibaca dan sesuai brand.

Pertanyaan yang sering diajukan

Warna hijau apa yang terbaik untuk website?

Tidak ada satu hijau yang paling baik, tetapi hijau tua yang sedikit kurang jenuh seperti #166534 atau #2D6A4F adalah titik awal paling aman. Keduanya lolos ambang teks WCAG AA 4,5:1 terhadap putih (7,13:1 dan 6,39:1), sehingga cocok untuk tombol, tautan, dan judul. Hijau terang seperti #22C55E tidak lolos terhadap putih (2,28:1), jadi sebaiknya dipakai untuk ikon atau latar gelap.

Warna apa yang cocok dipadukan dengan hijau di website?

Putih gading hangat dan krem (#F6F4EC), hijau nyaris hitam (#081C15), serta satu aksen hangat seperti amber atau terakota sama-sama cocok. Gunakan warna netral yang condong ke hijau, bukan abu-abu murni, agar halaman terasa menyatu, dan batasi aksen hanya untuk satu warna ajakan bertindak.

Apakah warna hijau aman untuk teks (aksesibel)?

Hijau tua aman, hijau terang dan sedang sering kali tidak. WCAG 2 AA mensyaratkan minimal 4,5:1 untuk teks biasa dan 3:1 untuk teks besar serta komponen antarmuka. Uji setiap pasangan warna, jangan hanya mengandalkan mata, karena hijau sedang seperti #40916C (3,83:1 di atas putih) berada di zona yang hanya lolos untuk teks besar.

Apa makna warna hijau dalam desain web?

Hijau paling sering diasosiasikan dengan alam, pertumbuhan, kesehatan, keberlanjutan, dan uang, itulah sebabnya warna ini banyak dipakai di situs kesehatan, keuangan, energi, dan aktivitas luar ruang. Maknanya bergeser menurut nuansa: hijau hutan yang pekat terkesan mapan dan tenang, sedangkan hijau limau terkesan energik dan modern. Anggap ini sebagai kebiasaan umum, bukan jaminan, dan uji pada audiens Anda sendiri.

Apakah sebaiknya memakai hijau untuk tombol ajakan bertindak (CTA)?

Boleh, selama tombolnya menonjol dari bagian halaman lain dan labelnya lolos uji kontras. Tombol hijau tua dengan teks putih cocok untuk halaman berlatar terang. Pada halaman yang didominasi hijau, tombol beraksen hangat biasanya lebih mudah dibedakan. Lihat panduan kami tentang skema warna yang ramah konversi untuk membantu memutuskan.

Apakah saya perlu palet hijau untuk mode gelap?

Tidak wajib, tetapi latar hijau tua sendiri sudah menjadi pilihan desain yang populer. Jika Anda menyediakannya, jangan sekadar memakai ulang palet versi terang: hijau terang yang gagal di atas putih sering tampil bagus di atas hijau nyaris hitam, misalnya #22C55E di atas #052E16 yang terukur 6,54:1.

Jawaban singkat: Untuk website hijau, pakai hijau tua seperti #166534 atau #2D6A4F untuk tombol, tautan, dan judul, putih gading bernuansa seperti #F6F4EC atau #F0FDF4 untuk latar, dan sisakan hijau terang seperti #22C55E hanya untuk latar gelap atau dekorasi. Hijau tua di atas latar terang lolos ambang teks WCAG AA 4,5:1. Hijau terang di atas putih tidak lolos (#22C55E di atas putih hanya 2,28:1).

Berikut enam palet hijau lengkap dengan nilai hex, rasio kontras yang terukur, dan jenis situs yang cocok untuk masing-masing. Setiap rasio dihitung dengan rumus luminans relatif WCAG, dan Anda bisa memeriksa pasangan warna mana pun sendiri lewat pemeriksa kontras warna.

Mengapa hijau cukup tricky di layar

Hijau berada di tengah rentang luminans. Hijau sedang tampak cerah, tetapi di atas putih sering terlalu terang untuk teks, sedangkan di atas hitam sering terlalu gelap. Karena itu hijau yang tampak bagus di logo bisa gagal sebagai warna tombol.

Aturan praktisnya: pilih hijau berdasarkan rasio kontrasnya, bukan dari tampilannya di contoh warna. Untuk teks biasa, targetkan 4,5:1 atau lebih. Untuk teks besar (kira-kira 24px reguler atau 19px tebal ke atas) dan komponen UI seperti garis tepi input dan ikon, minimumnya 3:1.

Enam palet website hijau dengan kode hex

Setiap palet memuat warna latar, warna teks, aksen untuk tombol atau tautan, dan rasio kontras untuk pasangan yang paling penting.

1. Hijau hutan dan krem (editorial, alam terbuka, kuliner)

Peran	Hex	Pasangan dan rasio
Latar	#F6F4EC
Teks dan judul	#1B4332	di atas latar: 10,06:1
Tombol / tautan	#2D6A4F	teks putih di atasnya: 6,39:1
Panel lembut	#95D5B2	teks #1B4332 di atasnya: 6,56:1

Hangat, tenang, dan mudah dibaca. Latar krem membuatnya tidak terasa kaku seperti klinik. Cocok untuk restoran, toko hasil kebun, perjalanan wisata, dan situs dengan konten panjang.

2. Hijau mint segar (kesehatan, klinik, konten kesehatan)

Peran	Hex	Pasangan dan rasio
Latar	#F0FDF4
Teks dan judul	#14532D	di atas latar: 8,70:1
Tombol	#15803D	teks putih di atasnya: 5,02:1
Pita gelap	#052E16	teks #DCFCE7 di atasnya: 13,57:1

Ringan dan bersih. Hijau tombolnya baru sedikit di atas batas AA, jadi gunakan label tombol dengan ketebalan normal atau lebih tebal, dan hindari menaruhnya di atas panel berwarna.

3. Hijau sage dan zaitun (studio, interior, produk kerajinan tangan)

Peran	Hex	Pasangan dan rasio
Latar	#E9F5DB
Teks dan judul	#31572C	di atas latar: 7,33:1
Tombol	#4F772D	teks putih di atasnya: 5,24:1
Sorotan	#90A955	teks #132A13 di atasnya: 5,84:1

Palet kalem bernuansa tanah. Cocok untuk portofolio dan brand butik yang menginginkan hijau tanpa terkesan mencolok.

4. Tema gelap hijau tua (fintech, SaaS, premium)

Peran	Hex	Pasangan dan rasio
Latar	#081C15
Teks	#B7E4C7	di atas latar: 12,58:1
Aksen / tautan	#40916C	di atas latar: 4,62:1
Kartu	#1B4332	teks #95D5B2 di atasnya: 6,56:1

Latar gelap memungkinkan hijau sedang berfungsi sebagai aksen. Perhatikan bahwa #40916C lolos di atas #081C15 tetapi gagal di atas putih (3,83:1), jadi jangan dipakai ulang di bagian berlatar terang.

5. Hijau limau neon di atas hijau tua (acara, kreator, brand anak muda)

Peran	Hex	Pasangan dan rasio
Latar	#1A2E05
Judul / tombol	#A3E635	di atas latar: 9,69:1
Hijau terang alternatif	#22C55E	di atas #052E16: 6,54:1

Energik dan sangat terbaca, karena limau yang terang berada di atas dasar gelap. Pakai secukupnya: satu halaman penuh limau cepat melelahkan mata.

6. Hijau teal (SaaS, health tech, keberlanjutan)

Peran	Hex	Pasangan dan rasio
Latar	#CCFBF1
Teks dan judul	#134E4A	di atas latar: 8,41:1
Tombol	#0F766E	teks putih di atasnya: 5,47:1

Condong ke biru-hijau, sehingga terkesan lebih teknis dan kurang "alami". Pilihan yang pas bila Anda ingin hijau tanpa kesan organik.

Warna hijau yang gagal, dan penggantinya

Gagal	Pasangan	Rasio	Ganti dengan
Tombol hijau terang	#22C55E dengan teks putih	2,28:1	#15803D dengan teks putih (5,02:1)
Tautan hijau limau di atas putih	#65A30D di atas putih	3,09:1	#4D7C0F di atas putih (4,99:1)
Teks isi berwarna hijau sedang	#40916C di atas putih	3,83:1	#2D6A4F di atas putih (6,39:1)

Hijau bernada sedang di atas masih lolos batas 3:1, jadi boleh dipakai untuk judul besar, ikon, dan garis tepi, tetapi tidak untuk teks paragraf atau tautan kecil. Untuk penjelasan lebih lanjut tentang kesalahan yang umum terjadi, lihat contoh kontras warna yang buruk, dan untuk pasangan yang lebih kuat secara umum, baca panduan palet warna kontras tinggi.

Cara membuat palet hijau sendiri, langkah demi langkah

Tentukan dulu fungsi hijau. Apakah ia warna brand, warna aksi, atau sekadar aksen? Hijau khusus brand boleh nuansa apa saja. Hijau untuk aksi harus lolos kontras.
Pilih jangkar yang gelap. Mulailah dengan hijau sekitar #14532D sampai #2D6A4F. Ini menjadi warna judul, tautan, dan tombol Anda di atas latar terang.
Beri nuansa pada latar. Gunakan hijau sangat muda atau krem hangat sebagai pengganti putih murni, misalnya #F0FDF4 atau #F6F4EC. Periksa ulang kontras teks setelah diberi nuansa.
Tambahkan satu aksen yang bukan hijau. Amber atau terakota di samping hijau membuat tombol lebih terpisah pada halaman yang banyak hijaunya. Pastikan kontras labelnya: misalnya teks #92400E di atas #FEF3C7 terukur 6,37:1.
Uji setiap pasangan teks dan latar. Periksa judul, teks isi, tautan, tombol, dan teks placeholder lewat pemeriksa kontras. Apa pun di bawah 4,5:1 pada ukuran teks isi perlu nuansa yang lebih gelap atau lebih terang.
Periksa status hover dan nonaktif. Nuansa hover sering bergeser ke wilayah yang tidak lolos.
Simpan palet sebagai token bernama. Nama variabel seperti brand-900, brand-700, dan brand-100 membuat perubahan di kemudian hari cukup satu baris. Panduan warna Tailwind CSS kami menunjukkan konsep skala nuansa ini, dan beberapa hex di atas berasal dari skala bergaya serupa.

Hijau mana untuk jenis situs apa

Keberlanjutan, energi, nirlaba: hijau hutan dan krem, atau sage. Contoh nyata suasananya ada di template Greenfield Renewables kami.
Kesehatan dan kebugaran: hijau mint segar atau hijau teal.
Keuangan dan SaaS: tema gelap hijau tua, dengan satu aksen terang.
Kuliner, pertanian, taman: hijau hutan dan krem dengan aksen hangat.
Halaman kreator dan acara: limau neon di atas hijau tua, terbatas pada judul dan satu tombol.

Daftar periksa sebelum publikasi (bisa disalin)

[ ] Teks isi minimal 4,5:1 terhadap latarnya
[ ] Teks besar dan ikon minimal 3:1
[ ] Label tombol lolos 4,5:1 terhadap warna isi tombol
[ ] Tautan bisa dibedakan dari teks isi tidak hanya lewat warna (garis bawah sudah cukup)
[ ] Hijau terang hanya muncul di latar gelap atau sebagai dekorasi
[ ] Tidak lebih dari satu warna aksen selain hijau
[ ] Bagian gelap memakai pasangan warna sendiri yang sudah diuji, bukan daur ulang dari mode terang
[ ] Palet disimpan sebagai token bernama sehingga bisa diubah di satu tempat

Jika Anda belum yakin berapa banyak warna yang dibutuhkan sebuah situs secara keseluruhan, panduan skema warna website membahas dasar-dasarnya, dan entri glosarium palet warna menjelaskan istilah yang dipakai di sini.

Menerapkan palet hijau di situs sungguhan

Setelah kode hex siap, Anda butuh tempat untuk menerapkannya. Paket gratis We.Inc memungkinkan Anda memublikasikan hingga tiga situs dari template siap pakai; pembuat AI yang menyusun draf situs dari sebuah prompt tersedia mulai paket Starter seharga $20 per bulan. Anda bisa mendaftar di sini, lalu tempelkan hex latar, teks, dan tombol ke dalam gaya situs, kemudian jalankan pemeriksaan kontras yang sama pada halaman yang sudah dipublikasikan.

Mulai gratis · Tanpa kartu kredit

Umair Ali Sadaqat

Pendiri We.Inc

Umair adalah pendiri We.Inc. Ia menulis tentang pembuatan situs web dengan AI, agensi, dan bisnis menjalankan studio web.

Siap membuat sesuatu yang hebat?

Bergabunglah dengan 15,000+ bisnis yang memakai We.Inc untuk meluncurkan, berkembang, dan mengotomatiskan, semuanya dari satu platform.