Pemilih Warna HEX
Desainer dan pengembang sering kali menggunakan warna yang sama dalam empat representasi berbeda hingga ratusan kali sehari. Cukup klik di mana saja pada bidang saturasi/tingkat kejernihan 2D, tarik slider nada, atau tempelkan nilai; pemilih warna ini akan menampilkan HEX, RGB, HSL, HSV, dan CMYK secara berdampingan, dilengkapi pemeriksaan kontras WCAG terhadap hitam-putih agar Anda langsung mengetahui apakah warna tersebut mudah dibaca atau tidak.
Cara memilih warna
-
1
Pilih warna
Geser slider warna vertikal sepanjang spektrum penuh 0–360°.
-
2
saturasi piksel dan nilai
Klik atau tarik di dalam kotak 2D untuk menentukan tingkat kejelasan dan kecerahan warna.
-
3
Lakukan penyetelan halus menggunakan masukan
Masukkan nilai tepat dalam format HEX, RGB, HSL, HSV, atau CMYK — kelima bidang tersebut akan tetap sinkron.
-
4
Periksa aksesibilitas dan salin
Rasio kontras terhadap hitam-putih ditampilkan secara langsung; cukup klik sekali untuk menyalin notasi yang Anda butuhkan.
Notasi warna dalam praktik
Setiap model warna menjawab pertanyaan yang sedikit berbeda.
Referensi Notasi
| Notasi | Komponen | Tempat penggunaannya |
|---|---|---|
| HEX | #RRGGBB | CSS, alat desain, panduan merek |
| RGB | merah 0–255, hijau 0–255, biru 0–255 | CSS rgb(), editor gambar |
| HSL | warna (0–360°), saturasi (%), kecerahan (%); | CSS hsl(), sistem desain |
| HSV/HSB | nilai warna (0–360°), saturasi (%), nilai/kecerahan (%); alat pemilih warna di Photoshop dan Figma | |
| CMYK | sian %, magenta %, kuning %, hitam utama % | Cetak, pra-pencetakan |
| OKLCH | tingkat kecerahan (%), kroma, warna dominan | Palet dari Modern CSS Color Module 4 |
Kontras aksesibilitas
WCAG 2.2 menetapkan rasio kontras minimum antara teks dan latar belakang:
- AA untuk teks biasa: ≥ 4,5:1
- AA untuk teks besar (teks tebal berukuran 18 pt atau 14 pt): rasio ≥ 3:1
- AAA untuk teks biasa: ≥ 7:1
Alat pemilih menghitung rasio antara warna putih dan warna hitam secara real-time. Jika warna latar depan khusus sangat penting, gunakan alat pemeriksa kontras khusus untuk setiap kombinasi warna tersebut.
Tips
- HEX merupakan format bawaan pada sebagian besar alat desain, namun bentuk heksadekimal tiga digit singkat (
#F60) setara dengan#FF6600, bukan#F06060. HSL lebih mudah digunakan untuk membuat palet warna: kunci nilai warna, lalu variasikan tingkat kecerahan untuk mendapatkan berbagai nuansa dan tonalitas. CMYK dan RGB tidak dapat diubah secara sempurna satu sama lain; pencetakan dalam format CMYK bergantung pada profil mesin cetak. Selalu lakukan cetakan uji coba menggunakan kertas asli. Jika Anda merancang untuk CSS modern, pertimbangkan penggunaan OKLCH untuk menghasilkan tingkatan kecerahan yang seragam secara perseptual.
Pertanyaan yang Sering Diajukan
Photoshop menerapkan profil warna (umumnya sRGB untuk layar, yang sering kali berbeda untuk cetakan). Peramban web menampilkan nilai HEX yang tidak diberi tag sebagai sRGB. Jika dokumen Anda diatur pada format Adobe RGB atau ProPhoto, nilai pikselnya tetap sama, namun warna yang terlihat akan berubah.
Ya—keduanya menggambarkan warna merah penuh, dengan nilai merah sebesar 255 dan nilai hijau serta biru masing-masing sebesar 0. HEX hanyalah notasi heksadesimal dua digit untuk setiap nilai saluran dari 0 hingga 255.
Pilih warna utama Anda, beralih ke sistem HSL, lalu ubah tingkat kecerahan secara bertahap sebesar 10% sambil mempertahankan nilai hue dan saturasi tetap konstan. Anda akan mendapatkan deretan nuansa yang terstruktur dengan baik dan berada pada nilai hue yang sama.
Warna-warna yang baru digunakan akan disimpan di penyimpanan lokal peramban Anda sehingga tetap terlihat meskipun halaman diperbarui. Tidak ada data yang dikirim ke server, dan Anda dapat menghapus riwayat palet kapan saja.