Konverter kode warna
Tempel warna dalam format CSS apa pun dan dapatkan semua format lainnya, beserta kontrasnya.
Tempel HEX, rgb(), hsl(), hwb() atau nama warna CSS, atau pilih warna
Varian terang dan gelap
Nilai
- HEX
- #3a5bd9
- RGB
- rgb(58, 91, 217)
- HSL
- hsl(227.5, 67.7%, 53.9%)
- HSV / HSB
- hsv(227.5, 73.3%, 85.1%)
- HWB
- hwb(227.5 22.7% 14.9%)
- CMYK
- cmyk(73%, 58%, 0%, 15%)
- Sebuah perkiraan. Warna cetak bergantung pada tinta dan kertas, jadi tanyakan nilai pastinya ke percetakan Anda.
- OKLCH
- oklch(52.35% 0.1965 267.75)
- Nama CSS terdekat
- royalblue
Kontras (WCAG)
Teks dengan warna ini di setiap latar belakang. Teks normal memerlukan 4.5:1 untuk AA dan 7:1 untuk AAA; teks besar (18pt, atau 14pt tebal) memerlukan 3:1 dan 4.5:1.
Di atas putih
Teks besar
Contoh kalimat untuk melihat keterbacaan teks dengan warna ini
5.71:1
- AA normal lolos
- AAA normal gagal
- AA besar lolos
- AAA besar lolos
Di atas hitam
Teks besar
Contoh kalimat untuk melihat keterbacaan teks dengan warna ini
3.68:1
- AA normal gagal
- AAA normal gagal
- AA besar lolos
- AAA besar gagal
Di atas #ffffff
Teks besar
Contoh kalimat untuk melihat keterbacaan teks dengan warna ini
5.71:1
- AA normal lolos
- AAA normal gagal
- AA besar lolos
- AAA besar lolos
Berikutnya: Buat latar transparan · Pembuat grafik
Laporkan masalah dengan alat ini
Cara menggunakan Konverter warna
Masukkan warna
Tempel kode HEX, rgb(), hsl(), hwb(), atau nama seperti tomato, atau pilih dengan pemilih warna.
Salin format yang Anda butuhkan
Setiap format diperbarui saat Anda mengetik. Salin mana saja dengan tombolnya, atau pilih format favorit Anda untuk tombol Salin besar.
Periksa kontrasnya
Lihat rasio kontras WCAG di atas putih, hitam, dan latar belakang pilihan Anda, dengan hasil AA dan AAA untuk teks normal dan besar.
Mengapa menggunakan Utils365
Membaca warna CSS apa pun
HEX 3, 4, 6, dan 8 digit, rgb() dan hsl() dalam sintaks koma lama atau spasi baru, hwb(), persentase, satuan hue, dan ke-148 nama warna.
Format modern juga
Dapatkan OKLCH untuk design system dan CSS wide-gamut, HWB dan HSV untuk pemilih warna, serta HEX dengan alfa untuk warna transparan.
Aksesibilitas bawaan
Rasio kontras mengikuti WCAG 2 dengan tepat dan tidak pernah dibulatkan ke atas agar lolos, jadi 4.49:1 tidak dianggap 4.5:1.
Varian terang dan gelap
Lima tingkat lebih terang dan lima lebih gelap ada di bawah contoh warna. Klik salah satunya untuk menjadikannya warna saat ini.
Pertanyaan yang sering diajukan
Apa bedanya HEX dan RGB?
Tidak ada perbedaan pada warnanya. Keduanya menyatakan merah, hijau, dan biru dari 0 sampai 255. HEX menulis masing-masing sebagai dua digit heksadesimal, jadi rgb(58, 91, 217) sama dengan #3a5bd9. HEX lebih pendek, sedangkan rgb() lebih mudah dibaca dan diubah secara manual.
Apa itu HSL?
Hue, saturation, dan lightness. Hue adalah posisi pada roda warna dalam derajat (0 merah, 120 hijau, 240 biru), saturation adalah seberapa cerah warnanya, dan lightness berkisar dari hitam di 0% hingga putih di 100%. HSL memudahkan menulis versi warna yang lebih terang, lebih gelap, atau lebih pudar.
Mengapa CMYK tidak cocok dengan warna cetakan saya?
Layar mencampur cahaya dan printer mencampur tinta, dan hasilnya bergantung pada tinta, kertas, dan profil printer. CMYK yang ditampilkan menggunakan rumus standar sederhana, jadi anggap sebagai titik awal dan tanyakan nilai pastinya ke percetakan Anda.
Apa itu rasio kontras WCAG?
Ukuran seberapa jauh perbedaan kecerahan dua warna, dari 1:1 (sama) hingga 21:1 (hitam di atas putih). WCAG AA meminta minimal 4.5:1 untuk teks normal dan 3:1 untuk teks besar; AAA meminta 7:1 dan 4.5:1.
Apa itu OKLCH?
Cara yang lebih baru untuk menulis warna di CSS berdasarkan lightness, chroma, dan hue, yang didasarkan pada cara manusia melihat warna. Mengubah lightness membuat hue tetap terlihat sama, sehingga populer untuk design system dan skala warna.
Bagaimana nama warna bekerja?
Jika warna sama persis dengan salah satu dari 148 nama warna CSS, nama itu ditampilkan. Jika tidak, Anda mendapat nama yang paling mirip secara tampilan, berguna untuk menggambarkan warna dengan kata-kata.