Pembuat Tone Warna
Hasilkan tone warna dengan mencampurnya bersama abu-abu netral dalam tahapan yang sama, sehingga saturasi berkurang tanpa mengubah rona. Masukkan satu warna dalam format CSS apa pun, pilih 2 hingga 20 tahapan dan ruang pencampuran, lalu dapatkan tabel berisi nilai HEX, RGB, HSL, dan OKLCH untuk setiap tone, dimulai dari warna asli. Berguna untuk palet yang lebih lembut, status nonaktif, permukaan halus, dan varian merek yang lebih kalem.
Pertanyaan yang sering diajukan
Apa itu tone?
Tone adalah warna yang dicampur dengan abu-abu. Rona tetap sama dan warnanya menjadi lebih lembut, berbeda dengan tint yang dicampur dengan putih atau shade yang dicampur dengan hitam.
Abu-abu apa yang digunakan?
Abu-abu tengah sRGB #808080, rgb(128 128 128). Karena itu, warna terang menjadi sedikit lebih gelap dan warna gelap sedikit lebih terang saat mendekatinya; untuk mencampur dengan abu-abu lain, gunakan Color Mixer dengan abu-abu pilihan Anda.
Bagaimana tahapan pencampurannya ditentukan?
Dengan N tahapan, baris k mencampur warna dengan abu-abu sebanyak (k - 1) / N, jadi 10 tahapan menghasilkan 0%, 10%, 20%, dan seterusnya hingga 90%. Baris pertama selalu berisi warna asli Anda, dan abu-abu polos tidak pernah disertakan dalam daftar.
Apa bedanya tone dengan menurunkan saturasi HSL?
Menurunkan saturasi HSL mempertahankan lightness HSL, sedangkan mencampurnya dengan abu-abu juga menarik lightness ke nilai tengah. Karena itu, tone tampak seperti warna yang dilihat melalui filter abu-abu, cocok untuk latar yang lembut dan status nonaktif.
Apa perbedaan pencampuran sRGB dan OKLab?
Pencampuran sRGB merata-ratakan nilai kanal yang dikodekan gamma, pendekatan klasik pada bagan tone seperti cat dan Sass mix(). Pencampuran OKLab berlangsung dalam ruang perseptual, sehingga kroma berkurang lebih merata dari satu tahapan ke tahapan berikutnya.
Format input apa yang bisa saya gunakan?
Kode hex dengan atau tanpa #, nama warna CSS, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color(), dan cmyk(). Masukkan satu warna untuk setiap proses.
Berapa banyak tone yang dapat saya hasilkan?
Antara 2 dan 20 untuk setiap proses, dengan 10 sebagai nilai bawaan. Jumlahnya mencakup warna asli pada baris pertama.
Nilai apa saja yang ditampilkan tabel?
Untuk setiap tahapan, ditampilkan porsi abu-abu, kode hex, rgb(), hsl(), dan oklch() dalam sintaks modern CSS. Kanal RGB berupa bilangan bulat, persentase HSL memiliki hingga dua angka desimal, sedangkan lightness dan kroma OKLCH hingga empat angka desimal.
Apa yang terjadi pada warna transparan dan warna dengan gamut lebar?
Alpha input dipertahankan untuk setiap tone, sehingga kode hex memiliki 8 digit. Tahapan di luar gamut dipetakan ke sRGB dengan algoritme Color 4 CSS pada kolom HEX, RGB, dan HSL, sedangkan kolom OKLCH mempertahankan nilai yang belum dipetakan.
Bagaimana cara membuat ulang tone di CSS?
Salin nilai hex atau oklch(), atau biarkan browser mencampurnya dengan color-mix(in oklab, var(--brand) 70%, #808080) untuk tone 30% pada pengaturan OKLab. color-mix() berfungsi di semua browser utama versi terkini.