Pencampur Warna

Hasilkan skala gradien seragam secara perseptual antara dua warna, atau campur dengan semantik subtraktif.

Warna A

Warna B

Langkah7

Skala campuran

#E639460%#CD4D6617%#B3588133%#995E9950%#7E61AF67%#5F60C583%#3B5BDB100%

linear-gradient(90deg, #E63946 0%, #CD4D66 17%, #B35881 33%, #995E99 50%, #7E61AF 67%, #5F60C5 83%, #3B5BDB 100%)

Interpolasi di ruang OKLab: hue mengikuti jalur yang seragam secara visual — merah + biru menghasilkan ungu bukan abu-abu keruh, tanpa zona mati di antaranya.

Campurkan dalam tiga langkah: pilih dua warna, pilih algoritma, baca skalanya.

Ramp yang seragam secara persepsi antara dua warna apa pun - kepadatan yang dapat disesuaikan, gradien CSS satu klik.

01
Tetapkan kedua titik akhir
Pilih warna untuk A dan B (pemilih warna atau input HEX langsung); tombol pertukaran menukar titik akhir dalam satu klik.
02
Pilih algoritma
Mode persepsi melakukan interpolasi di OKLab sehingga bahkan pasangan komplementer tetap mempertahankan transisi hue; Mode RGB mereproduksi pencampuran naif dari sebagian besar perangkat lunak - bandingkan keduanya untuk melihat perbedaannya.
03
Salin atau terus menjelajahi
Seret slider langkah untuk kepadatan skala (3-15), salin gradien CSS lengkap, atau klik warna perantara mana pun untuk membuka profilnya.

FAQ pencampuran warna

Tiga pertanyaan umum tentang algoritma pencampuran.

Pencampuran persepsi vs RGB - apa perbedaannya?: Pencampuran RGB menginterpolasi saluran merah/hijau/biru secara linier, sehingga pasangan komplementer (merah+sian, biru+kuning) melewati zona abu-abu mati di tengah. Pencampuran persepsi menginterpolasi di OKLab, di mana kecerahan dan hue mengikuti jalur yang seragam secara visual - merah + biru menghasilkan ungu bukan abu-abu lumpur.
Apa arti pengurangan A−B?: Setiap saluran A dikurangi saluran yang sesuai dari B (dibatasi pada 0), meniru bagaimana pigmen menggelap saat dicampur - semantik yang sama dengan notasi a−b ColorHexa. Ini mengembalikan satu hasil bukan skala.
Apa arti #b= di URL?: Setiap penyesuaian disinkronkan ke tautan (kedua titik akhir, jumlah langkah, dan algoritma). Salin bilah alamat untuk membagikan campuran yang tepat; siapa pun yang membukanya akan melihat skala yang sama.

Setelah pencampuran

Bawa skala ke studio gradien untuk menambahkan lebih banyak titik henti, atau buka roda warna untuk membangun harmoni dari warna yang dicampur.

Pembuat Gradien

Gradien OKLCH yang seragam secara persepsi, tanpa pita abu-abu, ekspor CSS satu klik.

Roda Warna

Seret roda untuk memilih dasar, dapatkan enam skema harmoni secara langsung, buka di papan atau ekspor PNG.

Pembuat Skala

Ubah warna apa pun menjadi skala sistem desain 11-langkah, merata secara persepsi di OKLCH, kontras WCAG per langkah, ekspor ke Tailwind/CSS/SCSS/JSON.

Campurkan dalam tiga langkah: pilih dua warna, pilih algoritma, baca skalanya.

Ramp yang seragam secara persepsi antara dua warna apa pun - kepadatan yang dapat disesuaikan, gradien CSS satu klik.

Tetapkan kedua titik akhir

Pilih warna untuk A dan B (pemilih warna atau input HEX langsung); tombol pertukaran menukar titik akhir dalam satu klik.

Pilih algoritma

Mode persepsi melakukan interpolasi di OKLab sehingga bahkan pasangan komplementer tetap mempertahankan transisi hue; Mode RGB mereproduksi pencampuran naif dari sebagian besar perangkat lunak - bandingkan keduanya untuk melihat perbedaannya.

Salin atau terus menjelajahi

Seret slider langkah untuk kepadatan skala (3-15), salin gradien CSS lengkap, atau klik warna perantara mana pun untuk membuka profilnya.

FAQ pencampuran warna

Tiga pertanyaan umum tentang algoritma pencampuran.

Pencampuran persepsi vs RGB - apa perbedaannya?

Pencampuran RGB menginterpolasi saluran merah/hijau/biru secara linier, sehingga pasangan komplementer (merah+sian, biru+kuning) melewati zona abu-abu mati di tengah. Pencampuran persepsi menginterpolasi di OKLab, di mana kecerahan dan hue mengikuti jalur yang seragam secara visual - merah + biru menghasilkan ungu bukan abu-abu lumpur.

Apa arti pengurangan A−B?

Setiap saluran A dikurangi saluran yang sesuai dari B (dibatasi pada 0), meniru bagaimana pigmen menggelap saat dicampur - semantik yang sama dengan notasi a−b ColorHexa. Ini mengembalikan satu hasil bukan skala.

Apa arti #b= di URL?

Setiap penyesuaian disinkronkan ke tautan (kedua titik akhir, jumlah langkah, dan algoritma). Salin bilah alamat untuk membagikan campuran yang tepat; siapa pun yang membukanya akan melihat skala yang sama.