Konverter Warna

Konverter mendukung HEX (3-digit, 6-digit dan 8-digit dengan alfa), RGB dan RGBA (sintaksis koma atau spasi), HSL dan HSLA, OKLCH, dan semua CSS bernama warna seperti cornflowerblue, rebeccapurple atau tomat. Formatnya terdeteksi secara otomatis saat Anda mengetik, sehingga Anda dapat menempelkannya langsung ke kolom masukan tanpa memilih mode terlebih dahulu.

OKLCH adalah ruang warna kutub yang seragam dan ditentukan oleh kecerahan (L), kroma (C), dan rona (H). Tidak seperti HSL, di mana warna dengan nilai kecerahan yang sama dapat terlihat sangat berbeda secara visual dalam kecerahan yang dirasakan, OKLCH menggunakan model dasar yang lebih cocok dengan cara penglihatan manusia dalam melihat perbedaan warna. Hal ini membuatnya ideal untuk secara terprogram menghasilkan skala warna yang dapat diakses, palet tombol yang konsisten, dan token desain. CSS secara asli mendukung oklch() di semua browser modern mulai tahun 2023, dan sistem desain utama telah mengadopsinya untuk presisi ini. Anda dapat memasangkan nilai OKLCH secara langsung dengan CSS Gradient Generator untuk mendapatkan gradien yang terlihat mulus.

Rasio kontras menggunakan rumus WCAG 2.1: (L1 + 0.05) / (L2 + 0.05), dengan L1 adalah luminansi relatif dari warna yang lebih terang dan L2 adalah luminansi relatif dari warna yang lebih gelap. Pencahayaan relatif dihitung dari nilai saluran sRGB yang dilinearisasi dengan bobot 0,2126 R + 0,7152 G + 0,0722 B. Alat ini memeriksa warna Anda terhadap putih bersih (255, 255, 255) dan hampir hitam (15, 23, 42) dan menampilkan rasio di samping nilai WCAG untuk teks normal dan besar.

WCAG 2.1 mendefinisikan dua tingkat kesesuaian untuk kontras teks. Level AA memerlukan rasio minimal 4,5:1 untuk teks normal dan 3:1 untuk teks besar (18pt+ atau 14pt+ tebal). Level AAA memerlukan 7:1 untuk teks normal dan 4,5:1 untuk teks besar. AA adalah batas minimum legal di banyak peraturan aksesibilitas termasuk EN 301 549 dan Bagian 508. AAA direkomendasikan untuk dokumen atau antarmuka yang mengutamakan keterbacaan maksimum, seperti konten medis atau hukum.

Palet mengubah warna Anda menjadi ruang HSL, lalu menghasilkan lima rona dengan menginterpolasi kecerahan hingga 95% (mendekati putih) dan lima rona dengan melakukan interpolasi menuju 5% (mendekati hitam), menjaga rona dan saturasi tetap konstan. Hasilnya adalah 11 contoh strip: 5 rona, warna dasar Anda (diuraikan dalam palet), dan 5 rona. Mengklik contoh mana pun akan segera memuat warna tersebut ke dalam input untuk konversi lebih lanjut atau pemeriksaan WCAG.

Tidak. Semua penguraian warna, matematika konversi, dan penghitungan WCAG sepenuhnya dijalankan di browser Anda menggunakan JavaScript. PureTools tidak memiliki titik akhir server untuk alat ini dan tidak pernah menerima warna yang Anda masukkan. Warna terakhir yang Anda ketik disimpan di sessionStorage di bawah kunci dengan spasi nama sehingga tetap ada saat penyegaran, namun sessionStorage secara otomatis dihapus saat Anda menutup tab, sehingga data terhapus saat Anda menutup tab. Tidak ada yang pernah diunggah atau disimpan dari jarak jauh. Data Anda tidak pernah digunakan untuk melatih model AI atau meningkatkan sistem pembelajaran mesin.

Ya. Figma biasanya menyalin warna sebagai HEX, HSL, atau RGB. Browser DevTools menyalin warna sebagai hex, rgb() atau hsl(). Semua ini diterima secara langsung. Jika Anda menyalin nilai oklch() dari file CSS atau token desain JSON, itu juga didukung. Alat ini secara otomatis mendeteksi format dari string yang ditempel, jadi Anda tidak perlu memilih apa pun sebelum menempelkannya. Anda juga dapat menggunakan JSON Formatter untuk mengekstrak nilai warna dari file token desain JSON sebelum menempelkannya di sini.

Baik HSL (Hue, Saturation, Lightness) dan HSV (Hue, Saturation, Value) merepresentasikan warna menggunakan sudut rona dan dua sumbu relatif, namun keduanya mendefinisikan sumbu ketiga secara berbeda. Dalam HSL, kecerahan 50% dengan saturasi maksimum menghasilkan rona murni. Dalam HSV, nilai 100% dengan saturasi maksimum juga memberikan rona murni, namun nilainya secara konseptual mendekati kecerahan yang dirasakan. HSL memetakan secara lebih intuitif bagaimana desainer memikirkan rona dan corak, sedangkan HSV umumnya digunakan dalam roda pemilih warna dan aplikasi pengeditan gambar.

sRGB dan OKLCH mencakup gamut yang serupa namun tidak identik. Saat Anda mengonversi sRGB ke OKLCH, nilainya tepat secara matematis. Saat mengkonversi kembali, pembulatan floating-point dalam perkalian matriks perantara dan langkah akar pangkat tiga dapat menghasilkan nilai saluran yang bernilai 0 atau 1 dalam rentang bilangan bulat 0–255, sebuah perbedaan yang tidak terlihat secara visual. Jika masukan Anda menggunakan nilai OKLCH dengan kroma sangat tinggi yang berada di luar gamut sRGB, alat akan menjepit saluran keluaran ke nilai sRGB terdekat yang valid daripada menghasilkan CSS yang tidak valid.

Pemilih warna browser asli (input type="color") selalu menyimpan nilainya sebagai hex. Setiap kali Anda mengetikkan warna yang valid di bidang teks dalam format apa pun, alat ini akan mengonversinya menjadi hex dan memperbarui nilai pemilih secara terprogram. Sebaliknya, memilih warna dari contoh akan menuliskan nilai hexnya ke dalam kolom teks. sinkronisasi dua arah ini berarti Anda dapat menggunakan pemilih visual untuk eksplorasi dan bidang teks untuk presisi, dan keduanya selalu mencerminkan warna yang sama.

Ya, dalam sesi browser yang sama. Alat ini menyimpan masukan valid terakhir ke sessionStorage sehingga tetap ada saat penyegaran. Saat Anda menutup tab, sessionStorage akan dihapus secara otomatis oleh browser, sehingga warnanya terhapus dan data Anda hanya tersimpan di perangkat Anda. Alat ini tidak menggunakan localStorage untuk data warna, hanya preferensi tema yang disimpan di sana.

Tidak. Konverter warna menyimpan file, nilai, dan hasil sementara di perangkat Anda. PureTools tidak memiliki database backend untuk menyimpan input tersebut dan tidak mengirimkannya ke server pemrosesan. Data alat dapat berada di memori atau sessionStorage selama tab aktif, lalu dihapus ketika Anda menutup tab atau mengatur ulang halaman. Konverter warna menjalankan perhitungan dan pemrosesan langsung di browser dengan JavaScript sisi klien. Alat membaca input Anda, menerapkan opsi yang terlihat seperti Konversi HEX, RGB, HSL, HSV dan OKLCH dalam satu langkah, lalu memperbarui hasil tanpa mengunggah file atau nilai ke server. Cara kerja ini menjaga sesi tetap lokal, mengurangi langkah yang tidak perlu, dan memungkinkan halaman dipakai kembali setelah pemuatan pertama tersimpan di cache browser.

Konverter warna menjalankan perhitungan dan pemrosesan langsung di browser dengan JavaScript sisi klien. Alat membaca input Anda, menerapkan opsi yang terlihat seperti Konversi HEX, RGB, HSL, HSV dan OKLCH dalam satu langkah, lalu memperbarui hasil tanpa mengunggah file atau nilai ke server. Cara kerja ini menjaga sesi tetap lokal, mengurangi langkah yang tidak perlu, dan memungkinkan halaman dipakai kembali setelah pemuatan pertama tersimpan di cache browser.

Saat tab ditutup, nilai sementara yang digunakan oleh Konverter warna hilang bersama sesi browser. Preferensi umum seperti tema dapat tetap berada di localStorage, tetapi file, hasil, dan konten yang dimasukkan ke alat tidak disimpan sebagai riwayat jangka panjang. Pemisahan ini menjaga pengalaman tetap praktis tanpa membuat jejak permanen dari data Anda.