DevToolPal
ID

Konverter Warna (HEX, RGB, HSL)

Konversi warna antara HEX, RGB, HSL, HSV, dan CMYK, dengan pratinjau langsung dan kontras terhadap putih dan hitam.

Berjalan lokal, tidak pernah diunggah

Opsi

Warna

Hasil

Hasil akan muncul di sini

Fungsinya

Konverter warna ini menerima warna dalam notasi CSS umum apa pun dan menampilkannya sekaligus dalam semua notasi lain: HEX, RGB, HSL, HSV, dan CMYK. Alat ini juga menampilkan swatch pratinjau, nama warna CSS jika ada yang persis cocok, dan rasio kontras terhadap putih dan hitam agar Anda bisa memeriksa keterbacaan.

Cara menggunakan

  1. Ketik atau tempel warna ke kotak Warna, atau gunakan color picker di sebelahnya.
  2. Semua notasi diperbarui saat Anda mengetik. Klik Salin di samping notasi yang Anda butuhkan.
  3. Aktifkan Hex huruf besar jika panduan gaya Anda menulis hex dengan huruf kapital.
  4. Periksa baris kontras sebelum memakai warna untuk teks: badge hijau berarti lolos WCAG AA.

Contoh

#1e90ff adalah warna CSS dodgerblue. Hasil konversinya:

  • RGB: rgb(30, 144, 255)
  • HSL: hsl(210, 100%, 55.9%)
  • HSV: hsv(210, 88.2%, 100%)
  • CMYK: cmyk(88%, 44%, 0%, 0%)

Kontrasnya di atas putih adalah 3.24:1, cukup untuk judul besar tetapi tidak untuk teks isi.

Sekilas tentang model warna

  • HEX dan RGB menggambarkan seberapa banyak cahaya merah, hijau, dan biru yang dipancarkan layar. Inilah yang dipakai browser dan alat desain secara internal.
  • HSL menggambarkan hue (sudut pada roda warna), saturasi, dan lightness, sehingga mudah membuat versi lebih terang atau lebih gelap dari warna yang sama.
  • HSV (disebut juga HSB) dipakai oleh sebagian besar color picker di software desain.
  • CMYK menggambarkan tinta cyan, magenta, kuning, dan hitam untuk cetak.

Warna dengan transparansi, seperti #1e90ff80 atau rgb(30 144 255 / 50%), ditampilkan dengan kanal alfa dalam HEX, RGB, dan HSL.

FAQ

› Bagaimana cara mengonversi HEX ke RGB?

Bagi enam digit hex menjadi tiga pasang dan baca setiap pasang sebagai angka dari 0 sampai 255. Untuk #1e90ff hasilnya 1e = 30, 90 = 144, dan ff = 255, jadi rgb(30, 144, 255). Alat ini melakukannya untuk Anda saat mengetik.

› Format apa saja yang bisa saya tempel?

Hex dengan atau tanpa # (3, 4, 6, atau 8 digit), rgb() dan rgba(), hsl() dan hsla() dalam sintaks koma maupun spasi, persentase, satuan sudut seperti deg dan turn, serta ke-148 nama warna CSS.

› Apa arti rasio kontras?

Itu adalah kontras WCAG 2 antara warna tersebut dan latar belakang putih atau hitam. Teks isi membutuhkan minimal 4.5:1 untuk level AA; teks besar (sekitar 24px, atau 19px tebal) membutuhkan 3:1.

› Mengapa CMYK hanya perkiraan?

Printer memakai profil tinta yang bergantung pada kertas dan mesin cetak. CMYK yang ditampilkan di sini memakai rumus standar yang tidak bergantung perangkat, cocok sebagai titik awal tetapi tidak menggantikan profil cetak.