Alat Warna
Alat untuk memilih warna dan mengubahnya antar format. Seluruh proses berjalan di peramban Anda.
Pilih, konversi, dan periksa warna
Masukkan nilai HEX, RGB, HSL, HSV, atau OKLCH untuk melihat warna yang sama dalam semua format yang didukung. Atur rona, saturasi, kecerahan, dan alfa secara visual, lalu salin notasi yang tepat untuk CSS, perangkat lunak desain, atau panduan gaya.
Panel kontras menghitung rasio WCAG terhadap latar putih dan hitam serta menunjukkan kelulusan untuk teks biasa atau besar. Skala kecerahan yang dihasilkan membantu mengembangkan satu warna pilihan menjadi palet antarmuka yang konsisten.
Warna yang sama, ditulis dengan beberapa cara
Hex dan rgb() adalah nilai kanal yang langsung dijalankan layar. hsl() dan hsv() menyusun ulang hal itu menjadi hue, saturasi, dan lightness atau brightness, yang lebih mudah dinalar saat Anda membuat variasi dari sebuah warna alih-alih memilih satu warna. oklch() menyatakan warna yang sama dalam ruang warna yang dirancang agar sesuai dengan persepsi mata.
Tidak ada yang hilang saat berpindah di antara format-format itu di dalam gamut sRGB, jadi format yang dipakai adalah yang diminta tujuannya: hex di kebanyakan alat desain, hsl atau oklch di custom property CSS, dan cmyk hanya sebagai gambaran kasar, karena konversi cetak yang sebenarnya bergantung pada tinta, kertas, dan profil warna.
Mengapa palet yang dibuat dengan HSL terlihat tidak rata
Lightness pada HSL adalah rata-rata geometris dari kanal-kanalnya, bukan ukuran seberapa terang sebuah warna terlihat. Kuning dan biru sama-sama berada di lima puluh persen, padahal salah satunya hampir putih di mata. Skala apa pun yang dibuat dengan menahan angka itu tetap akan timpang dan akhirnya dikoreksi manual, satu warna demi satu warna.
OKLCH mengatasinya secara struktural: langkah lightness yang sama terlihat sebagai langkah yang sama. Pertahankan nilainya di berbagai hue, dan deretan warnanya benar-benar terbaca sebagai satu keluarga. Itulah yang membuatnya menjadi ruang yang tepat untuk membuat tint, shade, dan interpolasi tanpa abu-abu keruh yang muncul di tengah campuran RGB.
Kontras adalah persyaratan dulu, baru penilaian
Rasio yang ditampilkan terhadap putih dan hitam mengikuti rumus WCAG 2, dengan ambang yang lazim: 4,5:1 untuk teks isi, 3:1 untuk teks besar dan komponen antarmuka, 7:1 untuk AAA. Memenuhinya bukan pilihan di sebagian besar tempat yang mengadakan pengadaan perangkat lunak, dan ini pekerjaan aksesibilitas yang paling murah.
Namun angka bukanlah jawaban seutuhnya. Rumus itu melebih-lebihkan kontras teks terang di latar gelap dan sama sekali tidak memperhitungkan ketebalan huruf, sehingga huruf yang sangat tipis tetapi lolos masih bisa sulit dibaca. Penuhi rasionya, lalu lihat hasilnya pada ukuran dan ketebalan yang benar-benar akan Anda pakai.