Pemilih Warna

Cara menggunakan pemilih warna

1. Klik kotak warna di bawah Pilih warna untuk membuka pemilih warna bawaan browser Anda, lalu pilih warna. Anda juga bisa mengetik atau menempel nilai di kolom Kode warna: kode HEX seperti #1E90FF, rgb(30, 144, 255), hsl(210 100% 56%), atau nama warna CSS seperti tomato.
2. Pratinjau besar langsung diperbarui, dengan kode HEX yang ditulis dalam hitam atau putih, mana yang lebih mudah dibaca di atas latar tersebut.
3. Di bawah Kode warna, salin format yang Anda butuhkan dengan tombol Salin di sampingnya: HEX, RGB, HSL, HSV, atau CMYK.
4. Klik Warna acak saat Anda butuh inspirasi, atau Ambil dari layar (di browser yang mendukungnya, seperti Chrome dan Edge) untuk mengambil warna piksel mana pun di layar Anda, termasuk dari jendela lain.

Semuanya terjadi di browser Anda: tidak ada warna atau gambar yang dikirim ke mana pun.

Arti setiap kode warna

• HEX adalah notasi heksadesimal enam digit yang dipakai di HTML dan CSS. Setiap pasang digit adalah satu kanal (merah, hijau, biru) dari 00 sampai FF, jadi #1E90FF berarti merah 30, hijau 144, biru 255.
• RGB menyatakan tiga kanal yang sama sebagai angka desimal dari 0 sampai 255. Format inilah yang diharapkan sebagian besar software desain dan library pemrograman.
• HSL menggambarkan warna dengan rona (hue, sudut 0° sampai 360° pada roda warna), saturasi, dan kecerahan (lightness). Format ini praktis untuk membuat warna lebih terang atau lebih gelap hanya dengan mengubah satu angka.
• HSV (juga disebut HSB) menggunakan rona, saturasi, dan value (brightness). Model inilah yang ada di balik kotak warna di Photoshop, Figma, dan banyak editor lainnya.
• CMYK menyatakan warna sebagai persentase tinta cyan, magenta, kuning, dan hitam.

Tentang nilai CMYK

Kode CMYK adalah konversi sederhana: K = 1 − max(R, G, B), lalu C = (1 − R − K) / (1 − K), begitu pula untuk M dan Y. Ini adalah rumus standar di buku pelajaran, tetapi tidak menggunakan profil ICC. Hasil cetak yang sebenarnya bergantung pada mesin cetak, kertas, dan tinta, sehingga percetakan akan mengonversi warna Anda dengan profilnya sendiri dan hasilnya bisa berbeda. Gunakan angka ini sebagai titik awal, bukan sebagai acuan cetak.

Membaca rasio kontras

Di bawah kode HEX, pratinjau menampilkan Kontras pada putih dan Kontras pada hitam, yang dihitung dengan rumus luminans relatif WCAG 2. Rasio 4,5:1 atau lebih dibutuhkan untuk teks isi normal pada level AA, dan 3:1 untuk teks besar serta elemen antarmuka. Jika warna Anda hanya mencapai 3:1 pada putih, gunakan untuk judul besar atau ikon saja, dan pakai gradasi yang lebih gelap untuk teks.

Tips

• Anda bisa menempel kode hex tanpa #: 1e90ff juga berfungsi, begitu pula bentuk pendek seperti f60.
• Nilai dengan transparansi, seperti rgb(0 0 0 / 50%), diterima; pemilih warna menampilkan warna buramnya.
• Dialog warna bawaan browser berbeda-beda di setiap sistem. Jika Anda membutuhkan nilai yang tepat, mengetiknya di kolom Kode warna selalu akurat.