Konverter RGB/HSL/CMYK

RGB · HSL · CMYK · HEX

Konverter RGB/HSL/CMYK

Saat satu nilai diubah, pratinjau dan semua notasi warna langsung ikut menyesuaikan.

LIVE Konversi otomatis

Pratinjau warna

HEX dan pemilih warna diletakkan lebih dulu; sampel dan reset berada di baris yang sama.

#3498DBrgb(52, 152, 219)
Teks disarankan
Kontras putih3.15
Kontras hitam6.66

Warna valid.

Gunakan tombol salin untuk mengambil notasi yang dibutuhkan.

Atur nilai warna

Nilai RGB, HSL, dan CMYK disusun dalam baris dengan tinggi yang selaras.

RGB

Warna layar
rgb(52, 152, 219)

HSL

Penyesuaian desain
hsl(204, 69.9%, 53.1%)

CMYK

Estimasi cetak
cmyk(76.3%, 30.6%, 0%, 14.1%)

HEX

Kode web
#3498DB

HEX juga otomatis mengubah bentuk pendek #RGB menjadi enam digit.

RGB warna cahaya untuk layarHSL hue, saturasi, lightnessCMYK estimasi untuk cetak

Panduan konversi warna

Kode warna adalah cara membaca satu warna dalam beberapa notasi

Konverter ini menjaga satu warna tetap selaras dalam HEX, RGB, HSL, dan CMYK. HEX cocok dibaca sebagai kode web, RGB sebagai kanal merah-hijau-biru untuk layar, HSL sebagai cara mengatur hue, saturasi, dan lightness, sedangkan CMYK sebagai estimasi tinta untuk kebutuhan cetak. Dengan begitu, nilai yang disalin tidak tercampur konteksnya.

Ubah HEX atau slider, lalu nilai lain langsung mengikuti

Tidak ada tombol hitung. Saat kamu mengubah kolom HEX, pemilih warna, angka, atau slider RGB/HSL/CMYK, pratinjau dan semua hasil yang bisa disalin ikut diperbarui untuk warna yang sama.

  1. Tentukan warna dulu. Masukkan nilai seperti #3498DB di kolom HEX atau pilih lewat color picker. HEX tiga digit akan dibuka menjadi enam digit sebelum hasil ditampilkan.
  2. Atur model yang diperlukan. RGB memakai kanal 0–255, HSL memakai hue 0–360° dengan saturasi dan lightness persen, sedangkan CMYK memakai persentase 0–100%.
  3. Lihat pratinjau dan kontras bersama-sama. Pratinjau menunjukkan warna saat ini, sementara kartu kontras membandingkan teks putih dan hitam di atas latar tersebut.
  4. Salin notasi yang memang dibutuhkan. Untuk CSS dan layar, biasanya HEX, RGB, atau HSL sudah cukup. Anggap CMYK sebagai catatan perkiraan untuk cetak, bukan profil final percetakan.

RGB, HSL, dan CMYK membaca warna yang sama untuk kebutuhan berbeda

Satu warna biru bisa dibutuhkan sebagai nilai CSS, sebagai penyesuaian tone, atau sebagai catatan untuk cetak. Field di tool ini memisahkan kontrol yang mengubah warna dari format yang dipakai untuk membaca warna itu.

Kode HEX dan color picker

HEX menulis merah, hijau, dan biru dengan dua digit heksadesimal, seperti #RRGGBB. Color picker membantu saat kamu ingin memilih nilai yang sama secara visual.

Nilai RGB

Red, Green, dan Blue berjalan dari 0 sampai 255. Untuk warna layar, canvas, dan pengecekan CSS, RGB biasanya paling langsung dibaca.

Nilai HSL

Hue adalah sudut warna, Saturation adalah intensitas, dan Lightness adalah terang-gelap. HSL enak dipakai saat ingin menjaga keluarga warna tetapi mengubah terang atau saturasinya.

CMYK dan kontras

CMYK adalah estimasi tinta yang dihitung dari warna layar. Kartu kontras membantu memilih teks putih atau hitam yang lebih mudah dibaca di atas warna saat ini.

Dua digit HEX menjadi satu kanal RGB bernilai 0 sampai 255

Konversi berangkat dari RGB. Setiap pasangan digit HEX diubah menjadi kanal desimal 0–255; HSL menghitung ulang RGB sebagai hue, saturation, dan lightness; CMYK memperkirakan persentase tinta dari warna layar yang sama. Ini bukan pengganti profil ICC percetakan.

HEX#RRGGBB → R,G,B
RGBkanal 0–255
HSLH 0–360° / S,L %
CMYKperkiraan C,M,Y,K %
Nilai warna CSS di MDNRujukan untuk mengecek sintaks warna HEX, RGB, HSL, dan warna CSS terkait.Batas kontras WCAGRujukan saat membaca angka kontras teks putih dan hitam.

Masukkan #FF8800 untuk membaca oranye yang sama dalam RGB, HSL, dan CMYK

Jika #FF8800 dimasukkan, RGB terbaca merah 255, hijau 136, biru 0. Warna yang sama menjadi hsl(32, 100%, 50%), dan estimasi CMYK berpusat pada magenta 46.7% serta kuning 100%.

HEX input#FF8800
Hasil RGBrgb(255, 136, 0)
Hasil HSLhsl(32, 100%, 50%)
Estimasi CMYKcmyk(0%, 46.7%, 100%, 0%)

Oranye ini lebih cocok memakai teks hitam

Di latar #FF8800, teks hitam memiliki rasio kontras sekitar 8.77, sedangkan teks putih sekitar 2.39. Warna bisa sudah benar, tetapi warna teks tetap perlu dicek terpisah.

Warna layar dan warna cetak bisa memakai angka serupa tetapi hasilnya berbeda

RGB dan HSL lebih dekat dengan kerja warna layar sRGB, sedangkan CMYK adalah perkiraan untuk membahas tinta. Kertas, tinta, pengaturan printer, dan profil bisa mengubah hasil akhir, jadi pekerjaan cetak penting tetap perlu proof.

  • Salin hasil HEX enam digit. Walaupun kamu memasukkan HEX tiga digit, output akan dinormalisasi menjadi kode enam digit huruf besar.
  • Gunakan HSL sebagai tampilan penyesuaian. Hue, Saturation, dan Lightness nyaman untuk mengatur warna, tetapi notasi CSS akhir tetap mengikuti aturan proyekmu.
  • Jangan perlakukan CMYK sebagai hasil final percetakan. CMYK di tool ini dihitung dari RGB layar. Materi brand sebaiknya mengikuti profil dan proof dari percetakan.
  • Baca kontras bersama konteksnya. Rasio membantu, tetapi ukuran teks, ketebalan huruf, dan latar sekitar tetap memengaruhi keterbacaan nyata.

Pertanyaan yang sering muncul

Apakah tanda # wajib ditulis sebelum kode HEX?

Tidak. Tool ini menerima 3498DB dan #3498DB. Bentuk pendek tiga digit juga bisa dimasukkan, lalu hasilnya ditampilkan sebagai kode HEX enam digit.

Apakah RGB dan HSL menjelaskan warna yang sama?

Ya. RGB menulis kanal merah, hijau, dan biru; HSL membaca ulang warna yang sama sebagai hue, saturation, dan lightness.

Bisakah nilai CMYK berbeda dari hasil percetakan?

Bisa. CMYK di sini adalah estimasi dari warna RGB layar. Warna cetak asli dapat berubah karena kertas, tinta, mesin, dan profil ICC.

Bagaimana membaca angka kontras?

Makin tinggi angkanya, makin jelas perbedaan teks dan latar. Pada warna awal #3498DB, teks hitam bernilai 6.66 dan teks putih 3.15, sehingga tool merekomendasikan teks hitam.

Roberin
Developer yang berpengalaman
Saya Roberin, developer berpengalaman yang menciptakan dunia yang lebih baik melalui tools kreatif dan praktis. Teknologi adalah untuk semua orang - mari bersama-sama membangun dunia yang lebih nyaman! 😊
Formulir kontak
Kirim hanya detail yang perlu kami periksa.
Jika perlu balasan, sertakan alamat email. Untuk laporan kesalahan, tuliskan URL halaman, nilai yang dimasukkan, hasil yang diharapkan, dan hasil yang muncul.