Konverter Warna

Konversi antara HEX, RGB, HSL, HSV, dan CMYK. Pratinjau langsung. Pemeriksa kontras WCAG untuk aksesibilitas. Tidak ada yang meninggalkan browser Anda.

Cara kerja Konverter Warna

Color Converter menerjemahkan warna mana pun antara format HEX, RGB, HSL, HSV, dan CMYK secara instan saat Anda mengetik. Ini juga menjalankan pemeriksaan kontras WCAG antara dua warna yang Anda pilih, menampilkan rasio kontras dan hasil lulus/gagal AA/AAA untuk teks normal, teks besar, dan komponen UI. Semua perhitungan terjadi di browser tanpa data yang dikirim ke mana pun; tidak ada yang Anda ketik yang meninggalkan perangkat Anda.

Memahami bagaimana warna yang sama terlihat di berbagai model warna berguna dalam serah terima desain. Seorang desainer mungkin menentukan warna merek sebagai HEX #1A4F8C; pengembang CSS membutuhkan ekuivalen HSL untuk theming; tim cetak membutuhkan breakdown CMYK. Alat ini melakukan konversi ke semua arah sekaligus sehingga Anda tidak perlu menjalankan beberapa konverter terpisah.

Ditulis oleh Bastien Sulyan

Cara menggunakan Konverter Warna, langkah demi langkah

Ketik nilai HEX, klik swatch warna, atau masukkan nilai RGB, HSL, HSV, atau CMYK ke bidang masing-masing.
Semua representasi format lainnya diperbarui segera untuk menampilkan warna yang setara.
Untuk menjalankan pemeriksaan kontras, pilih warna latar depan dan warna latar belakang menggunakan dua pemilih warna.
Baca rasio kontras WCAG dan lencana lulus/gagal untuk tingkat kepatuhan AA dan AAA.
Salin nilai warna mana pun menggunakan ikon salin di samping setiap bidang.

Kasus penggunaan umum

Seorang desainer UI mengonversi kode HEX merek ke HSL untuk menulis properti kustom CSS untuk sistem theming.
Seorang pengembang web memeriksa rasio kontras antara warna teks dan latar belakang sebelum merilis komponen untuk mengonfirmasi kepatuhan WCAG AA.
Seorang desainer cetak menerima warna HEX web dan membutuhkan ekuivalen CMYK untuk mencocokkannya dalam brosur cetak.
Seorang pengembang membutuhkan breakdown RGB dari token desain untuk meneruskan nilai saluran individual ke fungsi gambar canvas.

Pertanyaan yang sering diajukan

Apakah alat ini mendukung nilai alpha (transparansi)?

Konverter saat ini bekerja dengan warna sepenuhnya buram (alpha = 1). HEXA (hex 8 digit) dan RGBA belum dalam cakupan. Untuk opasitas, atur saluran alpha dalam CSS Anda secara terpisah menggunakan notasi rgba() atau oklch().

Apakah warna yang saya masukkan disimpan atau dikirim ke mana pun?

Tidak. Konversi warna adalah aritmatika murni (pemetaan ulang saluran dan penskalaan rentang) yang berjalan sepenuhnya di mesin JavaScript browser. Tidak ada yang Anda ketik di sini yang mencapai server atau layanan eksternal mana pun.

Tingkat kontras WCAG apa yang didukung oleh pemeriksa?

Alat ini melaporkan berdasarkan kriteria keberhasilan WCAG 2.1: AA memerlukan rasio kontras minimum 4.5:1 untuk teks normal (di bawah 18pt atau 14pt tebal) dan 3:1 untuk teks besar dan komponen UI. AAA memerlukan 7:1 untuk teks normal dan 4.5:1 untuk teks besar.

Mengapa nilai CMYK berbeda antara alat ini dan perangkat lunak desain profesional?

Konversi RGB-ke-CMYK yang dilakukan alat ini adalah rumus matematis tanpa profil warna. Aplikasi desain profesional menerapkan profil warna ICC yang memperhitungkan penambahan titik tinta dan properti substrat. Nilai CMYK di sini berguna untuk perkiraan; untuk cetak produksi, selalu terapkan profil cetak Anda dalam perangkat lunak khusus.

Bisakah saya mengonversi nama warna CSS seperti 'cornflowerblue' di sini?

Nama warna CSS tidak langsung diketikkan ke bidang konverter. Untuk mengonversi warna bernama, pertama temukan nilai HEX-nya dalam referensi CSS (cornflowerblue adalah #6495ED), lalu tempelkan HEX tersebut ke bidang HEX untuk melihat semua format lainnya.

Apakah alat ini bekerja secara offline setelah halaman dimuat?

Ya. Konversi warna adalah aritmatika tanpa ketergantungan eksternal. Setelah halaman ada di cache browser Anda, Anda dapat membukanya tanpa koneksi jaringan dan semua konversi akan berfungsi secara normal.

Alat terkait

Jaga semuanya tetap lokal, jelajahi alat pelengkap.

Semua alat developer