Konverter Warna – HEX, RGB, HSL, dan OKLCH

Cara mengonversi warna

1. Masukkan warna di kotak, misalnya #6366F1, rgb(99 102 241), hsl(239 84% 67%), atau nama seperti teal. Anda juga bisa menekan Pilih warna untuk memakai pemilih warna bawaan perangkat.
2. Lihat pratinjaunya. Kotak contoh besar menampilkan warna tersebut dengan teks contoh berwarna putih dan hitam di atasnya.
3. Salin format yang Anda perlukan. Daftar Format menampilkan HEX, RGB, HSL, dan OKLCH, masing-masing dengan tombol salin.
4. Periksa kontrasnya. Panel Kontras teks (WCAG) menampilkan rasio terhadap putih dan terhadap hitam, serta tingkat WCAG tertinggi yang dicapai warna itu.

Fitur

• Empat format hasil sekaligus: HEX, RGB, HSL, dan OKLCH, siap ditempel ke CSS.
• Input yang fleksibel: HEX 3, 4, 6, dan 8 digit, rgb(), hsl(), oklch(), sintaks modern maupun lama, serta nama warna CSS.
• Dukungan transparansi, dengan alpha ditampilkan di setiap format.
• Pemilih warna bawaan di HP maupun komputer.
• Rasio kontras WCAG 2 di atas putih dan di atas hitam, dengan label Lolos AAA, Lolos AA, Lolos AA Large, atau Gagal AA.
• Pratinjau langsung dengan teks contoh putih dan hitam.
• Pesan kesalahan yang ramah beserta contoh jika sebuah nilai tidak dapat dibaca.

Mengapa konversi warna di Fileora

Semua perhitungan dilakukan di browser Anda, jadi tidak ada yang perlu ditunggu dan tidak ada yang dikirim ke mana pun, termasuk warna brand yang belum dirilis. Gratis, tanpa daftar, dan bisa dipakai di HP, praktis saat Anda ingin mencocokkan warna yang baru saja Anda lihat di layar.

Menggabungkan konversi warna dengan pengecekan kontras menghemat satu langkah: Anda langsung tahu apakah warna brand aman dipakai untuk tombol dan link sebelum masuk ke tahap review desain.

Perbandingan HEX, RGB, HSL, dan OKLCH

HEX adalah format yang paling ringkas dan paling luas dukungannya. #6366F1 hanyalah nilai merah, hijau, dan biru yang ditulis dalam basis 16. Format ini ideal untuk serah terima desain, tetapi sulit disesuaikan dengan mata.

RGB menyimpan informasi yang sama sebagai bilangan bulat dari 0 sampai 255. Berguna ketika warna berasal dari kode, misalnya canvas atau library pengolah gambar.

HSL memecah warna menjadi hue, saturation, dan lightness, sehingga Anda bisa membuat warna lebih terang tanpa mengubah ronanya. Kelemahannya, lightness di HSL tidak mengikuti persepsi mata: kuning dengan lightness 50% terlihat jauh lebih terang daripada biru dengan lightness 50%.

OKLCH memperbaiki hal itu. Lightness-nya mengikuti penglihatan manusia, jadi Anda bisa membuat skala gradasi yang setiap langkahnya terlihat merata, atau mengganti rona sambil menjaga kontras teks tetap mirip. Untuk design token dan tema, OKLCH biasanya pilihan terbaik, dengan HEX sebagai cadangan untuk tool lama.

Mendapatkan kontras yang tepat

Usahakan minimal 4,5:1 untuk teks isi dan 3:1 untuk judul besar dan ikon. Warna menengah sering lolos di satu latar tetapi gagal di latar lain, jadi periksa putih dan hitam jika situs Anda punya mode gelap. Jika warna brand tidak lolos, turunkan sedikit lightness OKLCH-nya untuk teks dan pertahankan warna asli untuk latar dan garis tepi.

Saat Anda ingin menyisipkan ikon kecil berwarna itu langsung ke CSS, gambar ke Base64 mengubahnya menjadi data URI. Anda juga bisa membuat kode QR dengan pembuat kode QR, dan menjaga file tema tetap rapi dengan format JSON.