Pencampur Warna
Campurkan dua warna dalam ruang warna pilihan dengan rasio apa pun, seperti yang dilakukan color-mix() CSS. Masukkan dua warna dalam format CSS apa pun, atur porsi warna kedua dari 0 hingga 100 persen, lalu pilih OKLab, OKLCH, Lab, LCH, sRGB, sRGB linear, Display P3, HSL, HWB, atau XYZ. Hasilnya mencakup HEX, RGB, HSL, dan OKLCH, serta ekspresi color-mix() siap pakai untuk stylesheet Anda.
Pertanyaan yang sering diajukan
Bagaimana cara kerja jumlahnya?
Jumlahnya adalah porsi Warna 2 dalam campuran. 0% menghasilkan Warna 1, 100% menghasilkan Warna 2, dan 50% berada tepat di tengah keduanya dalam ruang yang dipilih. Rumusnya sesuai dengan color-mix(in space, color1 (100 - p)%, color2 p%).
Ruang warna mana yang sebaiknya saya pilih?
OKLab, pilihan default, seragam secara perseptual dan menghindari hasil tengah yang kusam atau gelap. sRGB mencampur kanal yang dikodekan gamma seperti browser lama dan Sass, sehingga campuran warna jenuh menjadi lebih gelap dan kusam. Lab adalah ruang perseptual CIE yang lebih lama dan berperilaku mirip dengan OKLab, tetapi warna birunya kurang merata.
Apa fungsi ruang berbasis rona?
OKLCH, LCH, HSL, dan HWB menginterpolasi rona melalui busur terpendek pada roda warna, yaitu default CSS, sehingga warna di tengah mempertahankan saturasinya dan dapat lebih cerah daripada kedua warna input. Jika salah satu warna adalah abu-abu netral tanpa rona, rona warna lainnya yang digunakan.
Untuk apa sRGB linear dan XYZ digunakan?
Keduanya mencampur intensitas cahaya secara linear, seperti berkas cahaya yang saling tumpang tindih, sehingga warna di tengah tampak lebih terang daripada dalam sRGB. Keduanya berguna untuk efek berbasis fisika dan untuk mencocokkan tampilan piksel yang diburamkan atau dicampur.
Bagaimana transparansi ditangani?
Seperti color-mix() CSS, pencampur ini melakukan interpolasi dengan alpha praperkalian, sehingga warna transparan tidak menarik campuran ke arah hitam. Alpha juga diinterpolasi dengan rasio yang sama dan ditampilkan dalam hex 8 digit serta setelah garis miring pada fungsi CSS.
Format input apa yang bisa saya gunakan?
Kode hex dengan atau tanpa #, CSS nama warna, rgb(), hsl(), hwb(), lab(), lch(), oklab(), oklch(), color() ruang seperti display-p3, dan cmyk(), dalam kombinasi apa pun. Setiap warna dapat memiliki panjang hingga 100 karakter.
Apa yang terjadi jika hasilnya berada di luar sRGB?
Pencampuran dalam Display P3, OKLCH, atau LCH dapat menghasilkan warna yang tidak dapat ditampilkan sRGB. Nilai HEX, RGB, dan HSL kemudian dipetakan ke sRGB dengan algoritme Color 4 CSS dan hasilnya disertai catatan, sedangkan nilai OKLCH mempertahankan warna yang belum dipetakan.
Bagaimana cara menggunakan ekspresi color-mix()?
Tempelkan ke properti CSS apa pun yang menerima warna. Ekspresi ini menyebut input berdasarkan kode hex, atau berdasarkan oklch() untuk input gamut luas, sehingga browser menghitung ulang campuran yang sama. color-mix() berfungsi di semua versi terkini Chrome, Edge, Firefox, dan Safari.
Seberapa presisi hasilnya?
Jumlahnya berupa persentase bilangan bulat dan pencampuran dihitung dengan presisi penuh menggunakan pustaka culori. Kanal RGB dibulatkan ke bilangan bulat, persentase HSL ke dua angka desimal, serta lightness dan kroma OKLCH ke empat angka desimal, sehingga hasil browser dapat berbeda satu tingkat pada digit terakhir.
Bagaimana cara mendapatkan beberapa tahapan di antara dua warna?
Jalankan pencampur dengan jumlah berbeda, misalnya 25%, 50%, dan 75%. Untuk skala lengkap menuju putih, hitam, atau abu-abu, Color Tint, Shade, and Tone Generators menghasilkan setiap tahapan dalam satu tabel.