Konverter warna — konverter HEX, RGB, HSL online _

Apa itu konversi warna?

Setiap warna yang ditampilkan peramban Anda pada akhirnya adalah triple sRGB — tiga angka antara 0 dan 255 untuk kanal merah, hijau, dan biru, ditambah alfa opsional. Spesifikasi CSS Color Level 4 mendefinisikan beberapa format teks yang dapat ditukar bolak-balik dengan triple yang sama, ditambah ruang OKLCH yang seragam secara persepsi. Alat ini membaca format mana pun, mengonversi ke semuanya, dan melaporkan rasio kontras WCAG 2.1 terhadap warna kedua sehingga Anda dapat merilis antarmuka yang dapat diakses dengan percaya diri.

Bagaimana konversi warna bekerja?

Konversi adalah serangkaian transformasi linear dan non-linear yang terdefinisi dengan baik. Setiap langkah berjalan di peramban Anda — tidak ada masukan yang pernah mencapai server kami:

1. Masukan Anda diurai. Alat secara otomatis mendeteksi HEX 3, 4, 6, atau 8 digit, bentuk fungsional rgb()/rgba()/hsl()/hsla()/hsv()/hwb() baik dalam sintaks koma klasik maupun sintaks slash-alfa modern, atau salah satu dari 150 warna CSS bernama (rebeccapurple termasuk).
2. Warna yang diurai dinormalisasi ke sRGB kanonik — empat bilangan float {r, g, b, a} masing-masing dalam rentang 0–1. Ini adalah satu-satunya sumber kebenaran yang darinya setiap format keluaran diturunkan.
3. HEX berasal dari pembulatan setiap kanal ke nilai byte 0–255 dan menggabungkan digit heksadesimal. RGB / RGBA mencetak byte yang sama. HSL dan HSV menerapkan algoritma koordinat silinder W3C standar; HWB menurunkan rona dari HSV, keputihan dari min(r, g, b), dan kehitaman dari 1 - max(r, g, b).
4. CMYK adalah perkiraan naif — k = 1 - max(r, g, b), lalu c, m, y dari kanal sisa. Cocok untuk pratinjau layar tetapi tidak untuk cetak: keluaran CMYK sesungguhnya membutuhkan profil ICC yang sengaja tidak disertakan oleh alat ini.
5. OKLCH mengikuti jalur maju css-color-4: sRGB dilinearisasi, dikalikan melalui matriks LMS, diakar pangkat tiga, dikalikan melalui matriks LMS-ke-OKLab, dan akhirnya dikonversi dari OKLab persegi panjang ke OKLCH polar. OKLCH seragam secara persepsi, yang menjadikannya ruang yang tepat untuk merancang palet yang terlihat seimbang bagi mata manusia.

Mengapa menggunakan konverter warna ini?

• Privasi: setiap konversi berjalan di peramban Anda menggunakan JavaScript biasa. Warna yang Anda tempel tidak pernah meninggalkan perangkat Anda, yang penting untuk karya merek yang belum dirilis, sistem desain internal, dan mockup klien di bawah NDA.
• Serah-terima desainer-ke-pengembang: tempel HEX dari Figma dan baca kembali string rgb() untuk konfigurasi Tailwind, string hsl() untuk CSS custom property, atau string oklch() untuk palet modern — setiap format di satu tempat, tanpa salin-tempel antar tab.
• Akurasi WCAG: pemeriksa kontras menggunakan rumus luminansi relatif WCAG 2.1 yang tepat dan ambang AA (4,5 / 3,0) serta AAA (7,0 / 4,5) yang dipublikasikan untuk teks normal dan teks besar. Rasio yang dilaporkan cocok dengan kalkulator manual hingga selisih 0,01.
• Mode gelap dan turunan palet: HSL dan OKLCH memaparkan kecerahan sebagai satu kanal, sehingga mudah menggeser warna merek naik atau turun pada sumbu kecerahan untuk menurunkan token mode gelap yang serasi atau menghasilkan tangga palet 10 langkah dari satu warna benih.

Apa saja aplikasi umum dari konversi warna?

Konversi warna muncul di pengembangan web, desain, dan pekerjaan aksesibilitas:

• Sistem desain: mengonversi HEX merek menjadi token HSL dan OKLCH yang serasi untuk skala CSS custom property, kemudian memverifikasi bahwa setiap kombinasi token lolos WCAG AA terhadap latar belakang halaman.
• Audit aksesibilitas: menempel pasangan warna depan dan latar belakang dari layar produk nyata dan membaca rasio kontras serta vonis AA/AAA untuk teks berbobot normal dan berbobot besar dalam satu pandangan.
• Perjalanan bolak-balik lintas alat: mengambil warna dari pemilih tangkapan layar (HEX), menempelnya di sini, dan menyalin string hsl() atau oklch() langsung ke Tailwind, token Figma, atau tema CSS-in-JS.

Seperti apa contoh konversi warna?

Ambil rebeccapurple yang terkenal. Pencarian warna bernama menguraikannya menjadi #663399. Konversi RGB menghasilkan rgb(102, 51, 153). Konversi HSL menghasilkan hsl(270, 50%, 40%) — rona ungu, setengah jenuh, empat persepuluh terang. Memeriksa warna itu terhadap putih murni dengan alat kontras menghasilkan rasio mendekati 7,39, yang lolos AAA (7,0) untuk teks normal dan AAA (4,5) untuk teks besar — pilihan warna depan yang kuat dan dapat diakses. Memutarbalikkan #663399 melalui RGB → HSL → RGB → HEX mengembalikan string asli persis, byte demi byte.

Gunakan konverter ini sebagai referensi cepat untuk warna apa pun yang Anda temui — dalam kode, dalam berkas desain, atau dalam tangkapan layar — dan pemeriksa kontras sebagai pemeriksaan akal sehat sebelum merilis. Semuanya berjalan secara lokal, tidak ada yang dicatat, dan matematika konversinya mengikuti spesifikasi W3C dan WCAG yang dipublikasikan sehingga angkanya cocok dengan apa yang akan dilaporkan alat audit atau devtools peramban Anda.