Color converter untuk kerja UI nyata

Konversi nilai warna, cek kontras, dan eksplorasi palet terkait sebelum design token masuk produksi.

Klik untuk memilih warna
4.70vs Black
4.46vs White
Cek kontras WCAG
Rasio kontras 4,5:1 adalah baseline WCAG yang umum untuk teks body normal. Teks besar punya ambang lebih rendah, tetapi kontras lemah tetap merugikan pengguna nyata.
HEX
RGB
HSL
CMYK

Relasi warna yang disarankan

Komplementer
#6366f1
#f1ef63
Analog
#63acf1
#6365f1
#a863f1
Shade
#6467f2
#2529ec
#1013bd
#0b0d7e
#05063f

Panduan format warna

HEX

Format ringkas yang banyak dipakai dalam desain web, biasanya ditulis sebagai nilai heksadesimal enam digit.

RGB

Model warna untuk layar yang berbasis nilai cahaya merah, hijau, dan biru.

HSL

Model yang lebih mudah dibaca manusia berdasarkan hue, saturation, dan lightness. Berguna untuk membuat state UI yang lebih terang, gelap, atau terkait.

CMYK

Model untuk cetak berdasarkan cyan, magenta, yellow, dan key black. Warna layar cerah bisa bergeser saat diterjemahkan ke cetak.

Kontras

Kontras memengaruhi form, dashboard, tabel harga, state error, dan semua tempat pengguna harus membaca cepat.

Pertanyaan umum

Mengapa konversi RGB dan CMYK bisa sedikit bergeser?

Warna layar dan warna cetak bekerja di ruang warna berbeda. Beberapa warna RGB memang tidak bisa direproduksi persis dalam CMYK.

Apa arti skor kontras WCAG?

Skor ini mengukur keterbacaan warna foreground dan background saat dipakai bersama. Nilai lebih tinggi biasanya berarti teks lebih mudah dibaca.

Apakah warna brand cocok untuk teks body?

Tidak selalu. Warna brand yang bagus untuk logo atau aksen bisa gagal sebagai teks body. Gunakan neutral yang lebih kuat atau shade yang disesuaikan saat keterbacaan penting.

Mengapa warna terlihat berbeda di beberapa tool?

Layar, profil warna, browser, dan proses cetak yang berbeda dapat merender nilai numerik yang sama secara berbeda. Jadikan konversi sebagai panduan praktis, lalu uji di media target.