Pemilih Warna HEX

HEX colour picker

Preset umum

Pilih warna melalui kontrol visual bawaan browser atau masukkan nilai HEX tiga maupun enam digit. Pemilih mengubahnya menjadi RGB, HSL, dan perkiraan CMYK, lalu menghitung luminans relatif serta rasio kontras yang tepat terhadap putih dan hitam. Warna diproses di browser ini dan tidak ditambahkan ke URL langkah.

Cara memilih warna

  1. 1

    Mulai dari contoh atau kontrol warna

    Pilih salah satu warna contoh atau buka pemilih warna bawaan browser.

  2. 2

    Masukkan HEX yang tepat

    Ketik tiga digit seperti #F60 atau enam digit seperti #FF6600. Bentuk pendek akan diperluas dengan benar.

  3. 3

    Tinjau format hasil perhitungan

    Lihat HEX, RGB, HSL, perkiraan CMYK, dan luminans relatif sRGB dalam satu tempat.

  4. 4

    Periksa kontras dan salin

    Bandingkan warna dengan putih dan hitam, lalu salin nilai HEX, RGB, atau HSL yang diperlukan.

Notasi warna dalam praktik

Setiap model warna menjawab pertanyaan yang sedikit berbeda.

Referensi notasi

Notasi Komponen Umum digunakan untuk
HEX #RRGGBB CSS, alat desain, panduan merek
RGB merah 0–255, hijau 0–255, biru 0–255 CSS rgb(), editor gambar
HSL rona 0–360°, saturasi %, kecerahan % CSS hsl(), sistem desain
CMYK sian %, magenta %, kuning %, key/hitam % Cetak, pracetak

Kontras aksesibilitas

WCAG 2.2 menetapkan rasio kontras minimum antara teks dan latar belakang:

  • AA untuk teks normal: ≥ 4,5:1
  • AA untuk teks besar (18 pt atau 14 pt tebal): ≥ 3:1
  • AAA untuk teks normal: ≥ 7:1

Pemilih menghitung rasio terhadap putih dan terhadap hitam secara real time. Jika warna latar depan khusus sangat penting, gunakan pemeriksa kontras khusus untuk setiap pasangan warna.

Tips

  • HEX adalah format default di sebagian besar alat desain, tetapi hex singkat tiga digit (#F60) setara dengan #FF6600, bukan #F06060.
  • HSL lebih nyaman untuk membuat palet: kunci rona, lalu ubah kecerahan untuk menghasilkan tint dan shade.
  • CMYK dan RGB tidak bisa dikonversi secara sempurna, hasil cetak CMYK bergantung pada profil mesin cetak. Selalu lakukan proof di kertas sungguhan.
  • Jika Anda mendesain untuk CSS modern, pertimbangkan OKLCH untuk langkah kecerahan yang lebih seragam secara perseptual.

Pertanyaan yang Sering Diajukan

Photoshop menerapkan profil warna, biasanya sRGB untuk layar dan sering kali profil lain untuk cetak. Browser merender nilai HEX tanpa tag sebagai sRGB. Jika dokumen Anda memakai Adobe RGB atau ProPhoto, nilai pikselnya sama, tetapi warna yang terlihat dapat bergeser.

Ya, keduanya menjelaskan merah penuh: merah bernilai 255, sedangkan hijau dan biru bernilai 0. HEX hanyalah notasi heksadesimal dua digit untuk setiap nilai kanal dari 0 sampai 255.

Pilih warna utama lalu salin nilai HSL. Di CSS atau aplikasi desain, pertahankan rona dan saturasi sambil mengubah kecerahan. Periksa setiap pasangan warna depan dan latar secara terpisah.

Warna saat ini disimpan hingga 30 menit di tab browser ini agar tetap tersedia selama langkah terpandu. Warna tidak ditambahkan ke URL atau dikirim melalui Livewire. Memulai ulang, menutup tab, menghapus data browser, atau melewati batas waktu akan menghapusnya.

Alat Terkait