Softonic

Pemilih Warna HEX

Langkah 1 / 4 Warna hex

Pick warna

Preset umum
Berikutnya: pratinjau

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 server kami. Memulai ulang, menutup tab, menghapus data browser, atau melewati batas waktu akan menghapusnya.

Alat Terkait

Referensi Tabel ASCII

Tabel ASCII lengkap dari 0 sampai 127 dengan desimal, heksadesimal, oktal, biner, dan referensi karakter numerik HTML untuk setiap karakter, termasuk kode kontrol seperti NUL, LF, dan DEL.

Referensi Karakter HTML

Daftar entitas HTML yang dapat dicari, beserta kode bernama dan kode numeriknya, serta fitur salin dengan satu klik untuk karakter khusus dan simbol.

Referensi pintasan papan ketik

Cari pintasan bawaan terdokumentasi untuk VS Code, Chrome, dan Bash dengan GNU Readline di macOS, Windows, dan Linux.

Konverter Ukuran File

Konversi antara byte, KB, MB, GB, TB, dan satuan biner IEC (KiB, MiB, GiB, TiB) dengan kombinasi desimal dan biner apa pun yang Anda inginkan.

JSON ke YAML

Konversi JSON ke YAML dengan penjelajaran yang tepat, penutupan string yang aman, skalar blok berbaris ganda, serta kunci yang tersortir untuk konfigurasi yang lebih rapi.

Obfuscator JavaScript

Obfuskasi JavaScript dengan pengodean array string, penggantian nama variabel, perataan alur kontrol, dan penyisipan kode mati untuk melindungi front-end.

Alat ini tersedia dalam bahasa lain