Cara mengonversi warna
- Pilih warna, atau ketik dalam HEX (#0071e3), RGB, HSL, atau CMYK.
- Semua format muncul sekaligus. Klik Salin di samping yang Anda perlukan.
- Gulir ke bawah untuk palet yang serasi, versi lebih terang dan gelap, serta pemeriksa kontras teks.
Cara kerjanya
Semua format dihitung dari nilai RGB yang sama, jadi selalu cocok satu sama lain. HSL dan HSV menggambarkan warna lewat rona, saturasi, dan kecerahan, sehingga mudah membuat harmoni: warna komplementer berjarak 180° di roda warna, triadik 120°. Tint dan shade mempertahankan rona dan saturasi, hanya kecerahannya yang berubah.
Pemeriksa kontras memakai rumus luminans relatif WCAG 2, sama seperti audit aksesibilitas.
Contoh perhitungan
Biru kami #0071e3 adalah rgb(0, 113, 227), hsl(210, 100%, 44,5%), dan kira-kira cmyk(100%, 50%, 0%, 11%). Di atas putih, kontrasnya 4,70:1, sedikit di atas 4,5:1 yang disyaratkan WCAG AA untuk teks biasa.
Abu-abu klasik #767676 di atas putih menghasilkan 4,54:1 dan lolos; satu tingkat lebih terang, #777777, menghasilkan 4,48:1 dan gagal. Itulah sebabnya desainer memeriksa, bukan menebak. Oranye cerah #ff9f0a di atas putih hanya 2,06:1: cukup untuk ikon besar, tidak untuk teks.
Kapan dipakai
Mengubah warna dari panduan merek ke nilai CSS, Android, atau cetak. Menyusun palet kecil untuk slide, situs web, atau logo. Mengecek apakah teks tombol mudah dibaca sebelum dipublikasikan. Mencari warna sedikit lebih gelap untuk efek hover.
Untuk memberi warna pada kode QR, gunakan Buat kode QR. Untuk teks di atas gambar, Pembuat meme punya pengaturan warnanya sendiri.
Batasan
- Nilai CMYK adalah konversi matematis sederhana, bukan profil cetak. Untuk cetak profesional, minta profil dari percetakan.
- Warna memakai sRGB. Warna gamut lebar (Display P3) dipangkas ke sRGB.
- Kontras dihitung untuk latar polos; teks di atas foto perlu dicek terpisah.
Pertanyaan umum
Bagaimana mengubah HEX ke RGB?
Bagi enam digit menjadi tiga pasang dan baca masing-masing sebagai heksadesimal: #0071e3 → 00, 71, e3 → 0, 113, 227. Alat ini menghitungnya saat Anda mengetik.
Berapa kontras yang dibutuhkan?
WCAG AA meminta minimal 4,5:1 untuk teks biasa dan 3:1 untuk teks besar (sekitar 24 px, atau 19 px tebal). AAA meminta 7:1.
Apakah nilai CMYK siap cetak?
Itu titik awal yang baik, tetapi warna cetak bergantung pada kertas dan tinta. Untuk warna merek, minta cetak coba ke percetakan.
Format apa yang dipakai di CSS?
Semuanya bisa. HEX paling umum; hsl() praktis jika ingin mengatur kecerahan secara manual.
Alat yang cocok dipakai bersama
Panduan terkait
- Colour contrast: how much does text need to be readable? (bahasa Inggris)