Color picker dan konverter warna

Ketik atau pilih warna, baca nilainya dalam dua belas notasi, susun skema harmoni dan skala 50-900, lalu periksa kontrasnya menurut WCAG.

Cara Salin warna

1
Pilih warna atau tempel nilainya
Ketik notasi apa pun yang dipahami browser: kode hex, rgb(), hsl(), oklch(), bahkan nama warna CSS. Kolom teks adalah kontrol utama di sini; contoh warna dan pipet warna hanyalah jalan pintas ke nilai yang sama.
2
Salin dalam format apa pun
Kedua belas notasi ditampilkan sekaligus, dengan tombol salin di samping setiap notasi. Tidak ada yang tersembunyi di menu tarik-turun, jadi mengubah HEX ke RGB butuh satu klik, bukan tiga.
3
Ekspor palet sebagai CSS atau JSON
Warna dasar, skala sepuluh langkahnya, dan warna yang diambil dari gambar diekspor bersama sebagai CSS custom properties, potongan tema Tailwind, variabel SCSS, atau JSON biasa.

Mengapa ruang kerjanya OKLCH

HSL punya satu sifat yang praktis dan satu kelemahan serius. Praktisnya, rona (hue), saturasi, dan kecerahan adalah angka terpisah yang mudah dipahami. Kelemahannya, kecerahan HSL bukan kecerahan yang Anda lihat: hsl(60 100% 50%) adalah kuning terang dan hsl(240 100% 50%) adalah biru gelap, padahal keduanya mengaku 50%. Karena itu memutar rona di HSL menghasilkan skema harmoni dengan satu contoh warna yang mencolok dan satu lagi yang seolah hilang. OKLCH memperbaikinya. Kecerahannya mengikuti persepsi manusia, jadi menggeser rona saja memang menjaga kecerahan tetap sama. Setiap skema dan setiap skala di halaman ini dihitung di OKLCH, lalu dikonversi kembali ke sRGB untuk hasil akhir.

Arti angka kontras

WCAG menyatakan kontras sebagai rasio antara luminans relatif dua warna, dari 1:1 untuk warna yang identik sampai 21:1 untuk hitam di atas putih. Teks isi butuh 4,5:1 untuk lulus AA. Teks besar (18,66 px ke atas, atau 14 px tebal) dan elemen antarmuka seperti ikon dan garis tepi kolom input butuh 3:1. AAA meminta 7:1 untuk teks isi. Ini bukan soal selera gaya: inilah beda antara halaman yang tetap terbaca di bawah sinar matahari atau dengan penglihatan yang kurang baik, dan halaman yang tidak. Bila pasangan warna tidak memenuhi syarat, tombol di samping hasil penilaian menurunkan kecerahan secara bertahap di OKLCH sampai lulus, jadi Anda mendapat versi terdekat yang memenuhi syarat dari warna Anda sendiri, bukan warna lain.

Palet yang diambil dari foto

Pilih gambar, dan warna dominannya diekstrak dengan median cut: kumpulan piksel berulang kali dibelah menurut kanal yang paling bervariasi, dan rerata setiap kotak yang dihasilkan menjadi satu contoh warna. Warna yang nyaris sama lalu dibuang dengan CIEDE2000, metrik jarak perseptual, jadi Anda mendapat enam warna yang berbeda, bukan enam gradasi dari langit yang sama. Gambar lebih dulu diperkecil menjadi 400 piksel dan tidak pernah keluar dari browser.

Warna dan gambar tetap di tab ini

Setiap konversi adalah aritmetika yang dikerjakan JavaScript di perangkat Anda sendiri; tidak ada panggilan API di baliknya. Gambar yang Anda letakkan untuk palet dibuka, diperkecil, dan diambil sampelnya secara lokal, dan tidak pernah diunggah atau disimpan. Tutup tab, dan tidak ada yang tersisa.

Pertanyaan yang sering diajukan

Mengapa OKLCH lebih baik daripada HSL?

Karena kecerahannya sesuai dengan apa yang dilihat mata. Di HSL, dua warna dengan nilai kecerahan yang sama bisa tampak sangat berbeda terangnya, dan itu merusak skema harmoni dan skala nada. OKLCH seragam secara perseptual sejak awal dirancang, jadi langkah yang sama besar juga tampak sama besar.

Mengapa nilai CMYK hanya sebagai acuan?

Pemisahan CMYK yang sebenarnya bergantung pada mesin cetak, tinta, dan kertas, yang semuanya dijelaskan oleh profil ICC. Nilai di sini berasal dari konversi aritmetika sederhana: cukup untuk gambaran kasar, tetapi salah untuk produksi cetak. Minta angka yang sudah dikoreksi dengan profil dari percetakan Anda.

Bagaimana cara membaca rasio kontras seperti 4,5:1?

Rasio itu membandingkan luminans dua warna. 4,5:1 adalah batas minimum WCAG AA untuk teks isi, 3:1 untuk teks besar dan elemen antarmuka, dan 7:1 adalah AAA. Makin tinggi rasionya, makin mudah dibaca; 21:1 adalah hitam di atas putih.

Apakah pipet warna berfungsi di Safari dan Firefox?

Belum. EyeDropper API adalah fitur Chromium. Di browser lain, tombolnya memberi tahu hal ini dan mengarahkan Anda ke jalur gambar: pilih gambar dan ambil warna dari palet yang dihasilkannya.

Bagaimana cara mengambil palet dari foto?

Buka pengaturan, pilih gambar, lalu tentukan jumlah warna yang diinginkan, antara tiga dan dua belas. Warna dominan muncul sebagai contoh warna yang bisa disalin satu per satu atau diekspor bersama semua yang lain.

Apakah gambar saya diunggah ke suatu tempat?

Tidak. Gambar dibuka oleh browser, digambar ke canvas pada 400 piksel, dan sampelnya diambil di sana. Tidak ada bagiannya yang dikirim, dan file tidak pernah ditulis ke penyimpanan.

Untuk apa skala 50-900?

Itu tangga nada warna yang diharapkan sistem desain dan Tailwind: sepuluh langkah dari satu rona, dari hampir putih sampai hampir hitam. Kroma dikurangi di kedua ujung, karena saturasi penuh pada kecerahan yang sangat tinggi atau sangat rendah berada di luar sRGB dan hasilnya jadi keruh.