Pemilih warna hex gratis: pilih atau tempel warna dan dapatkan nilai HEX, RGB, HSL dan OKLCH, tint dan shade, serta skor kontras terhadap putih dan hitam.
Pemilih Warna Hex
Pilih warna atau tempel nilai HEX, RGB, atau HSL apa pun untuk mendapatkan setiap format yang Anda butuhkan untuk desain dan kode: HEX, RGB, HSL, dan OKLCH. Lihat skala tint dan shade, dan cek seberapa terbaca teks di atasnya terhadap putih dan hitam.
Gunakan color picker-nya, atau ketik nilai seperti #4F98FB, rgb(79, 152, 251), atau hsl(215, 95%, 65%).
Salin format apa pun dengan satu klik. OKLCH adalah format CSS modern yang menjaga kecerahan tetap konsisten di semua hue.
Klik tint atau shade mana pun untuk menjadikannya warna saat ini.
Baca rasio kontrasnya untuk memutuskan apakah teks putih atau hitam cocok di warna ini.
Untuk tombol, usahakan kontras minimal 4.5:1 antara label dan warna tombolnya.
Bangun palet dari satu warna merek: tint terang untuk latar, warna itu sendiri untuk tombol, shade gelap untuk status hover dan teks.
Layar berbeda-beda. Cek warna merek Anda di ponsel maupun laptop.
Pertanyaan yang sering diajukan
Apa itu kode warna hex?
Kode enam digit untuk warna di layar, ditulis sebagai # diikuti tiga pasang digit heksadesimal untuk merah, hijau, dan biru. #FF0000 adalah merah murni; #000000 adalah hitam; #FFFFFF adalah putih.
Apa bedanya HEX, RGB, dan HSL?
Mereka mendeskripsikan warna yang sama dengan cara berbeda. HEX dan RGB memberi jumlah merah, hijau, dan biru. HSL memberi hue (sudut pada roda warna), saturasi, dan kecerahan, yang lebih mudah disesuaikan secara manual.
Apa itu OKLCH dan haruskah saya memakainya?
OKLCH adalah format warna CSS yang lebih baru berdasarkan cara orang memersepsikan warna. Dua warna dengan nilai L yang sama terlihat sama terangnya, yang membuat palet yang konsisten lebih mudah. Semua browser utama saat ini mendukungnya.
Bagaimana kontras dihitung?
Memakai rumus WCAG 2: luminansi relatif warna yang lebih terang ditambah 0.05, dibagi luminansi warna yang lebih gelap ditambah 0.05. Untuk pengecekan dua warna lengkap, gunakan We.Inc color contrast checker.
Memilih warna merek yang berfungsi di situs web
Warna merek harus melakukan beberapa tugas: menonjol di tombol, tetap terbaca di belakang teks putih, dan tidak melelahkan mata di seluruh halaman. Biru, hijau, dan merah tua bertona sedang biasanya menangani ketiganya. Warna yang sangat terang (kuning, pink pastel) terlihat bagus di logo tapi jadi tombol yang buruk, karena baik teks putih maupun hitam tidak terbaca baik di atasnya tanpa penyesuaian.
Panel kontras menunjukkan ini seketika. Jika teks putih mendapat skor di bawah 4.5:1, gunakan teks hitam atau pilih shade yang lebih gelap dari skalanya untuk tombol.
Tint, shade, dan palet sederhana
Tint mencampur warna Anda dengan putih; shade mencampurnya dengan hitam. Palet situs web yang praktis hanya butuh beberapa: tint yang sangat terang untuk latar seksi, warna utama untuk tombol dan tautan, dan satu shade lebih gelap untuk status hover. Tambahkan abu-abu netral untuk teks dan border dan Anda punya set yang lengkap dan konsisten.
Untuk mengecek pasangan teks dan latar tertentu (misalnya teks abu-abu di latar bertint), gunakan color contrast checker, yang memberi skor WCAG AA dan AAA.