Cara mengambil palet warna dari foto, dan memastikan warnanya bisa dipakai untuk teks

Foto adalah tempat yang bagus untuk menemukan warna-warna yang serasi dan tempat yang buruk untuk menemukan warna teks. Alasannya mekanis: apa yang dilakukan ekstraktor terhadap piksel, dan dari apa sebuah foto tersusun. Panduan ini membahas pemilih warna gambar, lalu angka di balik baris kontras yang dicetaknya di bawah setiap palet.

Mengekstrak palet

1. Muat foto. Jatuhkan ke panel bertuliskan “Drop an image here”, atau tekan Browse image. Apa pun yang bisa didekode browser Anda akan berfungsi; jika browser tidak bisa membaca file-nya, alat ini meminta PNG, JPEG, WebP, atau SVG. Replace dan Remove muncul di atas gambar setelah gambar dimuat.
2. Pilih metode ekstraksi. Dominant, Distinct, atau Accessible, di bawah Extraction. Kalimat di bawah tombol menjelaskan apa yang dilakukan mode yang sedang aktif, dan tombol M berpindah di antara ketiganya.
3. Atur jumlah warna. Tombol − dan + di samping Colours berkisar dari 2 sampai 10. Nilai awalnya 5.
4. Baca setiap baris. Setiap swatch menampilkan kode hex, porsinya dalam gambar sebagai persentase, dan rasio kontrasnya terhadap putih.
5. Baca baris di bawah daftar. Baris ini menyebutkan berapa swatch yang akan gagal sebagai teks isi di atas putih dan, jika ada pasangan yang sulit dibedakan dalam simulasi buta warna, berapa pasangan.
6. Beralih ke Accessible jika teks akan berada di atas putih, lalu ekspor. Export menyalin palet sebagai CSS, OKLCH, Tailwind v4, SCSS, JSON, Figma tokens, atau swatch SVG, dan Save here menyimpannya di perangkat ini.

Ada dua tautan di bawah daftar. Check colour vision membuka swatch di simulator buta warna, dan Build a ramp membawa swatch pertama ke generator ramp dan token. Alat ini menyimpan salinan gambar yang sudah diperkecil untuk tab tersebut, jadi membuka salah satu tautan lalu kembali tidak membuat gambarnya hilang.

Apa yang terjadi pada piksel

k-means clustering adalah metode yang mendasarinya. Metode ini mengelompokkan piksel sampel ke sejumlah grup tetap dengan menempatkan setiap piksel ke pusat terdekatnya, memindahkan setiap pusat ke rata-rata pikselnya, dan mengulanginya sampai tidak ada yang bergerak. Setiap swatch yang Anda lihat adalah salah satu pusat itu. Alurnya, dibaca dari kode sumber alat ini:

• Gambar diskalakan agar sisi terpanjangnya paling besar 320 piksel sebelum apa pun dibaca. Foto yang lebih kecil dari itu dibiarkan apa adanya.
• Paling banyak 6 000 piksel diambil sebagai sampel, dengan jarak yang merata. Foto 4 000 × 3 000 menjadi 320 × 240 = 76 800 piksel, jadi setiap piksel ke-13 dibaca (76 800 ÷ 6 000 = 12.8, dibulatkan ke atas), yang menghasilkan 5 908.
• Piksel dengan nilai alfa di bawah 128 dari 255 dilewati, jadi logo di latar transparan tidak kembali sebagai hitam.
• Pengelompokan berjalan di OKLab, ruang warna yang dibuat agar jarak numerik antara dua warna sesuai dengan seberapa berbeda keduanya terlihat. Di sRGB, jarak antarwarna gelap dilebih-lebihkan dan jarak antarwarna terang dikecilkan, itulah sebabnya ekstraktor sRGB mengembalikan beberapa warna gelap yang hampir identik dari foto yang jelas-jelas memiliki beberapa warna gelap yang berbeda.
• Prosesnya berjalan hingga 24 putaran, dan pusat awalnya tidak melibatkan keacakan: pusat pertama adalah piksel di tengah sampel, dan setiap pusat berikutnya adalah piksel terjauh dari pusat-pusat yang sudah dipilih. Foto yang sama selalu menghasilkan palet yang sama.

Perbandingan Dominant, Distinct, dan Accessible

Ketiga mode menjawab pertanyaan yang berbeda, dan persentase di samping setiap swatch bermakna sedikit berbeda di masing-masing mode.

Mode	Grup yang dihitung	Yang Anda dapat	Persentasenya
Dominant	Jumlah yang Anda atur	Setiap grup, dari yang terbesar	Porsi piksel sampel dalam grup itu
Distinct	Dua kali jumlahnya ditambah dua, paling banyak 16	Grup diambil dari yang terbesar, melewati grup yang berjarak kurang dari 0.1 kecerahan dan 0.05 kroma dari grup yang sudah disimpan, lalu dipotong sesuai jumlah yang Anda atur	Porsi di dalam pengelompokan yang lebih besar, jadi kolomnya tidak harus berjumlah 100
Accessible	Jumlah yang Anda atur	Grup Dominant, dengan setiap grup di bawah 4.5:1 terhadap putih digeser ke kecerahan terdekat yang lolos	Sama seperti Dominant

Uji duplikat Distinct hanya melihat kecerahan dan kroma, bukan hue, jadi dua aksen dengan hue berbeda tetapi kecerahan dan kroma yang mirip dihitung sebagai satu. Jika aksen dalam sebuah foto terutama berbeda pada hue, Dominant dengan jumlah lebih tinggi bisa menjadi cara yang lebih baik untuk memunculkannya.

Accessible mencari kecerahan dengan langkah 0.01 dan mengambil nilai lolos yang paling dekat dengan aslinya, dengan mempertahankan hue dan, jika layar bisa menampilkannya, kromanya.

Mengapa warna foto gagal sebagai teks di atas putih

Ada tiga hal yang menumpuk melawan sebuah foto.

Pusatnya adalah rata-rata. Sebuah swatch adalah rerata setiap piksel dalam grupnya, jadi swatch tergelap lebih terang daripada piksel-piksel tergelap di dalamnya: bayangan dirata-ratakan dengan area yang hampir bayangan. Nilai ekstrem yang dibutuhkan warna teks adalah hal pertama yang dihilangkan oleh perata-rataan.

Teks isi di atas putih membutuhkan warna gelap, sedangkan sebagian besar foto bernada menengah. Untuk 4.5:1 di atas putih, rumus WCAG membatasi luminans relatif pada 1.05 ÷ 4.5 − 0.05, sekitar 0.183. Untuk warna netral, kecerahan OKLCH adalah akar pangkat tiga dari luminans relatif, jadi itu setara kecerahan sekitar ∛0.183 ≈ 0.568. Contoh perhitungan di catatan alat warna situs ini sampai di titik yang sama: biru pada kecerahan 0.567 terukur 4.50:1, dan amber pada 0.572 terukur 4.51:1.

Angka di setiap swatch hanya terhadap putih. Amber matahari terbenam, #e8b04b, terukur 1.95:1 di atas putih pada kecerahan 0.791. Accessible mengembalikan #a16c00 pada 4.51:1, mempertahankan hue 79° dan menurunkan kecerahan ke 0.572, turun sebesar 0.791 − 0.572 = 0.219. Hasilnya amber yang jelas lebih gelap tetapi masih menjadi bagian dari foto itu.

Halaman gelap membalik masalahnya. Rasio sebuah warna di atas hitam adalah 21 dibagi rasionya di atas putih, jadi amber aslinya mencapai 21 ÷ 1.95, lebih dari 10:1, di atas hitam. Versi Accessible mencapai 21 ÷ 4.51, sedikit di bawah 4.7:1, nyaris di atas ambang. Untuk teks di latar gelap, tetap di Dominant dan hitung angka setiap swatch di atas hitam dengan cara itu.

Dibandingkan dengan ekstraktor pada umumnya

	Alat ini	Ekstraktor online pada umumnya
Ruang pengelompokan	OKLab	sRGB
Mode	Dominant, Distinct, atau Accessible, dengan nama	Satu, tanpa nama
Pemeriksaan kegunaan	Kontras terhadap putih untuk setiap swatch	Tidak ada
Swatch yang gagal	Pencarian kecerahan dengan hue yang sama	Tidak ditawarkan
Gambar	Didekode di tab	Dikirim ke server

Cara lain melakukannya

Tidak ada metode bawaan di macOS, Windows, atau iPhone untuk mengekstrak palet dari foto, dan tidak ada jalur command line di antara yang dijamin oleh panduan-panduan ini. Jika Anda sudah punya warna dari sumber lain, pemeriksa kontras akan memberi tahu mana yang bisa membawa teks dan menemukan versi terdekat dari masing-masing yang bisa.

Memastikan foto tetap di tempatnya

Area drop menyatakan bahwa file dibaca di browser Anda, dan Anda bisa memastikannya. Buka DevTools, pilih panel Network, lalu jatuhkan sebuah foto: tidak ada permintaan yang membawa gambar keluar. Memutuskan koneksi jaringan sebelum menjatuhkan foto juga bisa, dan paletnya tetap muncul.

Buka pemilih warna gambar dengan foto yang Anda pikirkan dan baca baris di bawah swatch sebelum Anda terlanjur jatuh hati. Jika warna yang Anda inginkan gagal di atas putih, Cara memperbaiki kontras warna tanpa mengubah warna brand menjelaskan mengapa menggeser kecerahan, bukan hue, membuat warna tetap mudah dikenali.