Color Picker dan Konverter Warna – HEX, RGB, HSL

Pilih warna atau tempel kode warna apa pun: semua format langsung diperbarui.

Teks dan file Anda tetap di browser — tidak ada yang dikirim ke server.

#0F766E
Kode warna

Warna lebih terang (dicampur putih)
Warna lebih gelap (dicampur hitam)

Klik salah satu kotak warna untuk memakai warna itu. Angkanya menunjukkan persentase campuran.

Variabel CSS

Cara pakai

  1. Klik kotak warna untuk memilih warna, atau tempel kode di kolom mana pun, misalnya HEX atau RGB.
  2. Ubah satu kolom dan semua kolom lain ikut menyesuaikan. Anda juga bisa mengetik tiga angka saja tanpa “rgb(”.
  3. Baris warna terang dan gelap menampilkan warna-warna yang mirip; satu klik menjadikannya warna dasar baru.
  4. Beri nama variabel di “Variabel CSS” lalu salin bloknya ke stylesheet Anda. Warna tersimpan di alamat halaman, jadi Anda bisa membagikan tautannya langsung.

Pertanyaan umum

Apa beda HEX dan RGB?

Keduanya menggambarkan warna yang sama dengan cara penulisan berbeda. HEX menulis nilai merah, hijau, dan biru (0–255) masing-masing dengan dua digit heksadesimal, sedangkan RGB menulis nilai yang sama dalam bilangan desimal.

Apakah hasil cetak dengan nilai CMYK ini akan sama seperti di layar?

Nilai CMYK di sini hanyalah konversi matematis, jadi anggap sebagai titik awal. Warna cetak sebenarnya bergantung pada kertas, tinta, dan profil warna mesin cetak, jadi pastikan nilainya dengan percetakan Anda.

Apa itu OKLCH?

OKLCH menggambarkan warna berdasarkan kecerahan yang dirasakan (L), kepekatan warna (C, chroma), dan rona (H). CSS modern mendukung oklch() secara langsung, dan jika Anda hanya mengubah kecerahan, ronanya tetap terlihat sama.

Mengapa tombol “Ambil dari layar” tidak muncul?

Tombol ini hanya muncul di browser desktop yang mendukung EyeDropper API, seperti Chrome dan Edge. Di browser lain, Anda bisa mengambil warna dari foto dengan alat pengambil warna dari gambar.

Alat serupa

Semua alat