Apa itu Generator Kode Warna CSS?

Generator kode warna CSS yang mengonversi warna apa pun ke setiap format yang kompatibel dengan CSS: HEX, RGB, RGBA, HSL, HSLA, OKLCH, dan warna bernama CSS. Pilih warna secara visual atau masukkan format apa pun dan dapatkan semua format lainnya secara instan, lengkap dengan pemeriksaan kontras WCAG.

Ketik kode hex, geser pemilih warna, atur penggeser RGB, atau tempelkan string rgb() atau hsl() yang sudah ada. Format lain dihitung langsung, termasuk OKLCH untuk palet yang seragam secara persepsi, plus pencarian warna CSS bernama terdekat dari 147 entri daftar W3C. Nilai alpha hanya muncul saat Anda menurunkan opasitas di bawah 100%, jadi baris rgba() dan hsla() tetap bersih untuk warna yang sepenuhnya buram. Panel kontras menampilkan rasio WCAG pada latar putih dan hitam sehingga sekilas Anda tahu apakah warna itu mudah dibaca sebagai teks.

Cara menggunakan

1. Pilih warna menggunakan visual picker, atau masukkan nilai dalam format yang didukung (HEX, RGB, HSL).
2. Lihat warna ditampilkan dalam semua format CSS secara bersamaan, dengan fitur salin satu klik untuk setiap format.
3. Sesuaikan opasitas dengan slider alpha untuk mendapatkan nilai RGBA dan HSLA, lalu salin kode CSS yang Anda butuhkan.

Kapan menggunakan

• Mengonversi hex dari desainer ke format yang diminta framework CSS Anda.
• Menyusun palet dan butuh nilai HSL untuk menurunkan nada terang dan gelap yang konsisten.
• Memberi transparansi pada warna brand untuk overlay, bayangan, atau status hover.

Hasil

Seorang developer frontend memilih oranye merek mereka #F97316 dan langsung mendapatkan rgb(249, 115, 22), hsl(25, 95%, 53%), serta semua format lainnya untuk digunakan secara konsisten di seluruh stylesheet mereka.

FAQ

Mengapa kolom nama warna kadang kosong?

CSS hanya memiliki 147 warna bernama dan hex Anda harus cocok persis dengan salah satunya. Hampir semua warna brand jatuh di antara dua nilai bernama, ini wajar. Kolom ini berguna untuk memverifikasi warna umum seperti tomato atau steelblue.

Kapan sebaiknya pakai HSL ketimbang HEX atau RGB?

HSL lebih mudah disetel manual: menaikkan lightness 10 memberi nada lebih terang, menggeser hue 30 berjalan di roda warna. Desainer suka HSL saat membangun skala. RGB dan HEX sedikit lebih ringkas di stylesheet akhir.

Slider opasitas mengubah warna atau cuma transparansi?

Hanya mengubah kanal alpha. Nilai merah, hijau, biru tetap. Karena itu rgba(255, 0, 0, 0.5) di atas latar putih terlihat merah muda: merah yang sama, dicampur 50/50 dengan latar di belakangnya.

Apakah nilai CSS ini didukung semua browser?

HEX, RGB, RGBA, HSL, HSLA, dan nama warna punya dukungan universal sejak 15 tahun lalu, sampai IE11. OKLCH juga dihasilkan di sini dan berjalan di semua yang terkini — Chrome, Firefox, Safari, dan Edge sejak 2023 — jadi simpan cadangan hex atau rgb() jika Anda masih menargetkan mesin yang sangat lama.

Bagaimana mengambil hex dari warna yang saya lihat di situs?

Klik Ambil dari layar untuk membuka pipet, lalu klik piksel mana pun di layar Anda —sebuah halaman, gambar, atau mockup— dan warna itu langsung dimuat. (Pipet berjalan di Chrome, Edge, atau Opera; di Safari atau Firefox, ambil hex dengan pipet bawaan sistem operasi Anda lalu tempel ke kolom HEX.) Dengan cara apa pun Anda langsung melihat semua format setara dan varian opasitasnya sekaligus.

Alat terkait