HEX, RGB, HSL, CMYK dan cara cek kontras teks

Kode warna adalah satu warna yang ditulis dalam notasi yang berbeda. HEX, RGB dan HSL menggambarkan cahaya yang sama di layar, sehingga konversi di antara ketiganya tepat, kecuali pembulatan. CMYK menggambarkan tinta di atas kertas, jadi konversinya dari nilai layar hanya perkiraan. Rasio kontras WCAG adalah angka terpisah yang membandingkan seberapa terang dua warna, dan angka itu menentukan apakah teks mudah dibaca. Tempelkan warna ke konverter warna untuk melihat semua format sekaligus.

Konverter warnaPerlu warna dalam format lainPakai gratis

Jika warna yang Anda butuhkan ada di dalam foto, logo, atau tangkapan layar, ambil dulu nilainya dari piksel dengan pemilih warna gambar, lalu tempel kode HEX-nya di sini. Cara memilih warna yang tepat dari gambar menjelaskan langkah-langkahnya.

HEX dan RGB adalah angka yang sama

Kode HEX adalah tiga pasang digit heksadesimal. #34D6A0 memuat nilai merah, hijau, dan biru. Setiap pasangan adalah angka dari 00 sampai FF, yaitu 0 sampai 255 dalam desimal. Jadi 34 adalah 52, D6 adalah 214, dan A0 adalah 160, sehingga bentuk RGB-nya adalah rgb(52, 214, 160).

Menulis angka dalam heksadesimal hanya mengubah tampilannya. Singkatan #abc berarti #aabbcc, dengan setiap digit digandakan. Kode delapan digit menambahkan pasangan alpha di akhir, dari 00 untuk sepenuhnya transparan sampai FF untuk sepenuhnya tidak transparan, sehingga #34D6A080 kira-kira setengah transparan. RGBA menuliskan alpha yang sama sebagai angka dari 0 sampai 1.

CSS juga menerima nama warna. rebeccapurple sama dengan #663399. Konverter membaca nama melalui peramban itu sendiri, sehingga nama apa pun yang dikenali peramban akan berfungsi.

HSL menggambarkan warna seperti cara orang mendeskripsikannya

HSL adalah singkatan dari hue, saturation, dan lightness, atau rona, saturasi, dan kecerahan. Rona adalah sudut pada roda warna: merah 0 derajat, hijau 120, dan biru 240. Saturasi menunjukkan seberapa jauh warna itu dari abu-abu, dan kecerahan menunjukkan seberapa jauh warna itu dari hitam atau putih.

#34D6A0 yang sama adalah hsl(160, 66%, 52%). Ronanya berada di antara hijau dan biru, saturasinya tinggi, dan kecerahannya sedikit di atas titik tengah. HSL adalah bentuk yang paling mudah diedit secara manual, karena Anda bisa mempertahankan rona dan hanya menggeser kecerahan untuk mendapatkan nuansa yang lebih terang atau lebih gelap.

HSV mirip dengan HSL, tetapi menggunakan value, yaitu tingkat kecerahan dari saluran paling kuat, sebagai pengganti lightness. Beberapa pemilih warna memakainya, jadi Anda mungkin menemukannya di alat lain. Konverter menampilkannya di samping HSL agar Anda bisa membandingkan keduanya.

CMYK untuk tinta, jadi hanya perkiraan

Layar menambahkan cahaya: merah, hijau, dan biru bersama-sama menghasilkan putih. Printer mengurangi cahaya dengan tinta: cyan, magenta, kuning, dan hitam di atas kertas putih. Kedua sistem ini tidak bisa cocok persis, jadi nilai CMYK selalu merupakan terjemahan.

Konverter memakai rumus sederhana. Hitam adalah K, yaitu satu dikurangi nilai terbesar dari merah, hijau, dan biru pada skala 0 sampai 1. Cyan, magenta, dan kuning kemudian dihitung dari sisa yang ditinggalkan K. Rumus ini mengabaikan tinta, kertas, dan profil warna yang dipakai printer. Hasil cetakan karena itu akan berbeda, dan warna yang sangat cerah bisa berada di luar jangkauan tinta CMYK sama sekali. Gunakan nilai CMYK untuk memulai percakapan dengan printer, dan minta proof sebelum mencetak dalam jumlah besar.

Kontras soal cahaya, bukan rona

Rasio kontras WCAG membandingkan dua warna berdasarkan luminansi relatifnya. Luminansi dihitung dari nilai merah, hijau, dan biru setelah koreksi gamma, dan hijau paling berpengaruh karena mata manusia paling peka terhadapnya. Setiap saluran lebih dulu dikonversi dari skala 0 sampai 255, lalu luminansinya adalah 0,2126 kali merah, ditambah 0,7152 kali hijau, ditambah 0,0722 kali biru.

Rasionya adalah luminansi yang lebih terang ditambah 0,05, dibagi luminansi yang lebih gelap ditambah 0,05. Hitam di atas putih menghasilkan 21 banding 1, yaitu nilai terbesar yang mungkin. Dua warna bisa terlihat cukup berbeda dari segi rona dan tetap memiliki rasio yang rendah jika kecerahannya sama, dan itulah kasus yang ingin ditangkap oleh pemeriksaan ini. Kontras rendah yang sama juga menjadi alasan kode QR gagal dipindai.

Ambang batasnya

WCAG 2.x menetapkan dua level, dan rasio yang diminta bergantung pada ukuran teks.

• Level AA: 4,5 banding 1 untuk teks normal, dan 3 banding 1 untuk teks besar.
• Level AAA: 7 banding 1 untuk teks normal, dan 4,5 banding 1 untuk teks besar.

Teks besar adalah teks dengan ukuran 24 piksel atau lebih, atau 18,66 piksel dan tebal. Teks yang lebih kecil dianggap normal. Teks abu-abu di atas putih adalah kegagalan yang umum. Abu-abu sedang seperti #777777 di atas putih sekitar 4,48 banding 1. Warna ini gagal AA untuk teks normal dengan selisih kecil, dan lolos AA untuk judul besar.

Konverter menampilkan rasio yang dibulatkan hingga dua desimal, tetapi setiap hasil lolos atau gagal dihitung dengan angka yang persis. Nilai yang tampil sebagai 4,50 tetap bisa gagal jika sedikit di bawah ambang. Pemeriksaan ini hanya mengukur satu hal. Ia tidak mencakup ketebalan huruf, jarak baris, atau cara penderita buta warna melihat sebuah desain, jadi uji juga halaman asli pada ukuran aslinya.

Tint dan shade

Deretan di bawah konverter menampilkan sembilan langkah di sekitar warna tersebut: empat tint yang dicampur dengan putih, warna aslinya, dan empat shade yang dicampur dengan hitam. Mengklik salah satunya akan menyalin kode HEX-nya. Ini membantu saat Anda membutuhkan sekumpulan warna yang berkaitan, misalnya latar belakang terang, status saat kursor di atas tombol, dan warna teks gelap, yang semuanya diambil dari satu nilai warna merek. Periksa setiap pasangan yang Anda pilih dengan bagian kontras sebelum Anda memakainya.

Cara melakukannya dengan fixmint

1. Tempelkan warna ke kotak Color dalam bentuk HEX, RGB, HSL, atau nama CSS seperti rebeccapurple.
2. Baca baris HEX, RGB, HSL, HSV, dan CMYK. Tekan Copy di samping yang Anda butuhkan. CMYK diberi label perkiraan.
3. Ketik warna latar belakang Anda ke dalam Background, atau gunakan kotak warnanya, lalu baca rasio di bawah On white, On black, dan On your background.
4. Periksa empat tanda di bawah setiap rasio: AA dan AAA, masing-masing untuk teks normal dan teks besar.
5. Di bagian Tints and shades, ketuk sebuah kotak warna untuk menyalinnya.

Jawaban singkat

Apakah nilai CMYK itu tepat?

Tidak. Itu adalah konversi aritmetika biasa yang mengabaikan printer, kertas, dan profil warna. Anggap sebagai titik awal dan minta proof.

Apakah rasio kontras yang lolos membuat desain mudah diakses?

Itu berarti warna teks memenuhi satu ambang yang terukur. Aksesibilitas juga bergantung pada ukuran, jarak, animasi, dan cara halaman dibangun, jadi rasio hanya panduan, bukan tinjauan lengkap.

Format mana yang sebaiknya saya simpan di stylesheet?

Yang paling mudah Anda baca dan edit. HEX ringkas dan umum. HSL lebih mudah disesuaikan secara manual, karena Anda cukup mengubah kecerahan tanpa mengubah rona.