🎨

color picker

Pilih warna apa pun dan konversi antarformat HEX, RGB, HSL, dan CMYK secara instan. Sinkronisasi dua arah, riwayat warna, dan salin dengan sekali klik.

Alat Konversi Berjalan lokal Tidak ada data dikirim
warna hex rgb hsl cmyk konverter
Pilih Warna
Gelap
Terdekat: —
Format
HEX
RGB
HSL
CMYK
Riwayat Warna
Belum ada warna yang dipilih
#5E6AD2
Nilai Warna
HEX
#5E6AD2
RGB
rgb(94, 106, 210)
HSL
hsl(234, 56%, 60%)
CMYK
cmyk(55%, 49%, 0%, 18%)

Apa itu color picker?

Pilih warna secara visual dan konversi antara HEX, RGB, HSL, dan CMYK. Salin format apa pun dengan satu klik dan sesuaikan nilai langsung di browser.

Cara Menggunakan color picker

  1. Masukkan nilai HEX atau gunakan pemilih visual untuk memilih warna.
  2. Periksa nilai RGB, HSL, dan CMYK hasil konversi yang ditampilkan di bawah.
  3. Sesuaikan input hingga warna cocok dengan target desain atau kode Anda.
  4. Salin format yang Anda butuhkan dengan satu klik.

Panduan Singkat

Referensi Format Warna membandingkan HEX, RGB, HSL, dan CMYK sehingga Anda dapat memilih format yang tepat untuk alur kerja CSS, desain, dan cetak.

Alat Terkait

🎨
konversi format warna
Konversi warna antara format HEX, RGB, HSL, OKLCH
 🎨
buat palet warna
Buat palet warna komplementer, analog, dan triadik
 ⚖️
cek kontras WCAG
Periksa rasio kontras warna WCAG AA dan AAA untuk aksesibilitas
Memahami Pemilihan Warna ▾
Contoh
Input #FF5733
Output RGB(255, 87, 51) · HSL(11°, 100%, 60%) · CMYK(0%, 66%, 80%, 0%)
Kasus Penggunaan Umum
  • Pilih warna UI yang tepat untuk CSS atau token desain
  • Salin nilai HEX, RGB, atau HSL ke dalam kode front-end
  • Periksa dan bandingkan warna selama QA desain
  • Buat palet kecil dari satu warna terpilih
Pertanyaan yang Sering Diajukan
Format warna apa saja yang didukung?

HEX, RGB, RGBA, HSL, HSLA, dan CMYK. Klik kolom format mana pun untuk menyalin nilainya.

Bisakah saya memakai eyedropper untuk mengambil warna dari layar?

Pada browser yang mendukung EyeDropper API (Chrome 95+), ya. Klik ikon eyedropper untuk memilih dari mana saja di layar.

Apa perbedaan antara HSL dan HSB/HSV?

HSL (Hue, Saturation, Lightness) dan HSB/HSV (Hue, Saturation, Brightness/Value) sama-sama model warna silindris, tetapi berbeda dalam cara mendefinisikan sumbu ketiga. Dalam HSL, lightness 50% adalah warna “murni”. Dalam HSB, brightness 100% berarti kecerahan maksimum, yang lebih mendekati warna yang dianggap hidup oleh para seniman. CSS menggunakan HSL; Photoshop dan Figma menggunakan HSB.

Bisakah saya menggunakan ini untuk memeriksa kontras warna WCAG?

Alat ini menampilkan nilai warna dan konversinya. Untuk pemeriksaan kontras aksesibilitas (rasio WCAG AA/AAA) terhadap warna latar belakang, gunakan alat Contrast Checker khusus.