Pemilih Warna HEX
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
Mulai dari contoh atau kontrol warna
Pilih salah satu warna contoh atau buka pemilih warna bawaan browser.
-
2
Masukkan HEX yang tepat
Ketik tiga digit seperti #F60 atau enam digit seperti #FF6600. Bentuk pendek akan diperluas dengan benar.
-
3
Tinjau format hasil perhitungan
Lihat HEX, RGB, HSL, perkiraan CMYK, dan luminans relatif sRGB dalam satu tempat.
-
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
Penghitung FPS
Ukur FPS browser dengan requestAnimationFrame: penghalusan, frame rate minimum dan maksimum, ambang peringatan, dan grafik opsional. Berjalan lokal, tanpa unggahan dan tanpa API.
Konverter Base64 ke Hex
Konversi string Base64 menjadi byte dasarnya yang dinyatakan dalam heksadesimal (hex). Berguna untuk memeriksa token, kunci, sertifikat, dan JWT.
Konverter Biner ke Oktal
Konversi biner ke oktal dengan mengelompokkan bit tiga per tiga. Berguna untuk izin Unix, sistem lama, dan tampilan angka ringkas.
Konverter Biner ke ASCII
Tempel data biner (bita dipisah spasi atau aliran bit panjang) dan dapatkan teks ASCII yang diwakilinya. Mendukung pengodean 7-bit dan 8-bit.
Generator Warna Acak
Buat 1 hingga 50 warna HEX acak dengan contoh warna yang bisa dipratinjau, disalin, dan dipakai di CSS, pengujian, atau eksplorasi palet.
Penyederhana Aljabar Boolean
Sederhanakan ekspresi Boolean memakai Karnaugh map dan algoritma Quine-McCluskey. Menampilkan setiap langkah minimisation dan bentuk SOP/POS akhir.