Cara Mengubah HEX ke RGB dan Mengecek Kontras Teks Online Gratis

Kamu sudah memilih warna untuk situsmu, dan sekarang desainnya bilang HEX tapi kodemu minta RGB. Atau kamu membuat tombol yang bagus dan tidak yakin ada yang bisa membaca teks di atasnya. Alat CSS dan Warna GetPlugzz mengerjakan keduanya, plus dua hal lain: membuat gradien dan menghasilkan CSS box-shadow dan border-radius. Semuanya ada di satu halaman, ter-update seketika saat kamu mengetik, dan berjalan di browsermu, jadi tanpa akun dan tidak ada yang diunggah.

Empat alat, dalam satu menit

Buka Alat CSS dan Warna dan pilih satu tab:

• Konverter Warna. Tulis warna sebagai HEX, RGB, atau HSL, dan dua lainnya langsung ter-update. Kamu juga bisa mengklik kotak warna untuk memilih warna.
• Gradien. Pilih warnamu (bisa ditambah), tentukan linear atau radial, atur sudutnya, lalu tekan Salin CSS.
• Pengecek Kontras. Pilih warna teks dan warna latar, lalu lihat apakah orang dengan penglihatan lemah bisa membacanya, dengan hasil untuk WCAG AA dan AAA.
• Bayangan dan Sudut. Geser pergeseran, blur, dan spread untuk membuat box-shadow, dan bulatkan sudut dengan border-radius. Salin CSS-nya kalau sudah bagus.

HEX, RGB, dan HSL: satu warna, tiga cara menyebutnya

Bayangkan satu warna cat yang ditulis di tiga label berbeda. Catnya sama, hanya resepnya yang ditulis dengan cara lain:

• HEX adalah kode singkat: # diikuti enam huruf atau angka, seperti #2563EB.
• RGB adalah resepnya: tiga angka yang menunjukkan berapa banyak merah, hijau, dan biru yang dicampur.
• HSL adalah kenop pengaturnya: rona, saturasi, dan kecerahan. Ini yang paling mudah diatur dengan tangan. Mau warna yang sama sedikit lebih terang? Putar satu kenop saja.

Desain biasanya memberimu salah satunya dan kodemu butuh yang lain, dan di saat itulah konverter menghemat beberapa menitmu.

Cara mengubah HEX ke RGB

1. Buka Konverter Warna. Ini tab pertama.
2. Ketik atau tempel kode HEX di kotak HEX.
3. Baca hasilnya. Nilai RGB dan HSL terisi sendiri, bersama kotak warnanya.

Bisa juga sebaliknya. Ketik di salah satu dari tiga kolom dan dua lainnya mengikuti.

Apakah tekstmu benar-benar terbaca? (masalah bisikan)

Teks abu-abu muda di latar putih tampak elegan di layarmu. Bagi orang dengan penglihatan lemah, atau ponsel di bawah terik matahari, itu seperti bisikan di ruangan yang bising. Pengecek Kontras mengukur seberapa berbeda warna teks dan latarmu dan memberi tahu apakah lulus.

Alat ini memakai WCAG, Web Content Accessibility Guidelines, yang menetapkan kontras minimum supaya teks tetap terbaca oleh orang dengan gangguan penglihatan. Ada dua tingkat: AA adalah standar yang dituju kebanyakan situs, dan AAA lebih ketat. Yang kamu butuhkan:

• Teks normal: minimal 4,5:1 untuk AA dan 7:1 untuk AAA.
• Teks besar: 3:1 cukup untuk AA. Besar berarti 18pt atau lebih, atau 14pt atau lebih kalau tebal.

Alatnya menampilkan rasio dan hasil untuk teks normal dan besar di kedua tingkat, jadi kamu tidak perlu menghitung apa pun.

Gradien dan bayangan tanpa menulis CSS dengan tangan

Untuk gradien, pilih warnamu, tentukan linear atau radial, atur sudutnya, dan tekan Salin CSS. Itu seluruh pekerjaannya.

Untuk bayangan, bayangkan lampu di atas sebuah kotak. Pergeseran mengubah ke mana bayangan jatuh, blur yang lebih besar membuatnya lebih lembut, dan spread membuatnya lebih besar. Kamu bisa mengatur warna dan opasitas bayangan, atau membuatnya jadi bayangan dalam. Lalu bulatkan sudutnya dengan border-radius, semua sudut sekaligus, dan salin CSS-nya kalau sudah bagus.

Kapan kamu benar-benar butuh ini

• Sebuah desain memberimu kode HEX dan kodemu minta RGB atau HSL.
• Sebuah tombol atau judul yang ingin kamu cek keterbacaan teksnya.
• Latar halaman atau kartu yang butuh gradien yang bagus.
• Kartu yang harus menonjol dari halaman dengan bayangan lembut dan sudut membulat.
• Pengecekan aksesibilitas untuk klien, tugas sekolah, atau situsmu sendiri.

Perlu diketahui sebelum mulai

Pertanyaan yang sering diajukan