Cara menggunakan Pencampur Warna
- Masukkan atau pilih Warna A dan Warna B.
- Pilih berapa langkah yang kamu mau (termasuk kedua ujung).
- Pilih ruang interpolasi. OKLab memberikan campuran yang paling halus dan rata.
- Klik swatch untuk menyalin satu warna, atau salin seluruh set sebagai variabel CSS,
color-mix()atau JSON.
Apa fungsi color mixer?
Alat ini menghitung warna yang tersebar merata di antara dua warna ujung. Dengan 5 langkah di antara biru dan amber, kamu mendapatkan biru, tiga warna transisi, dan amber. Ini berguna untuk gradien multi-stop, skala visualisasi data, indikator progres, border halus di antara dua warna permukaan, dan state hover bertema.
Mengapa ruang interpolasi itu penting
| Ruang | Hasil | Terbaik untuk |
|---|---|---|
| OKLab | Langkah yang rata secara persepsi, tanpa bagian tengah yang kotor | Sebagian besar pekerjaan UI, gradien, skala chart |
| OKLCH | Bergerak mengelilingi roda hue, menjaga warna tetap cerah | Gradien pelangi dan gradien brand |
| sRGB | Default browser yang klasik; titik tengah bisa berubah abu-abu atau gelap | Mencocokkan desain lama |
| Linear sRGB | Pencampuran cahaya yang benar secara fisik, titik tengah lebih terang | Mensimulasikan pencampuran cahaya nyata |
| HSL | Berbasis hue, kecerahan persepsi tidak merata | Sapuan hue yang cepat |
Mencampur warna komplementer seperti biru dan kuning di sRGB menghasilkan abu-abu kusam di tengah. OKLab menjaga transisinya tetap bersih. Itulah mengapa CSS modern memungkinkan kamu memilih ruang interpolasi secara eksplisit.
Mencampur warna dengan CSS native
Semua browser modern mendukung color-mix() dan interpolation hint di gradien, jadi kamu sering bisa melewati nilai yang di-hard-code sepenuhnya:
.border { border-color: color-mix(in oklab, var(--surface), var(--text) 15%); }
.hero { background: linear-gradient(in oklch 90deg, #2563eb, #f59e0b); }Langkah yang dihasilkan tetap berguna untuk tool desain, template email, chart yang digambar di canvas/SVG, dan di mana pun fungsi CSS tidak tersedia. Untuk membuat skala penuh dari terang ke gelap dari satu warna, gunakan Tailwind Color Generator. Untuk kode gradien dengan banyak stop, gunakan CSS Gradient Generator.
Juga dicari sebagai: campur dua warna, generator gradien warna, interpolasi warna, langkah warna gradien, color mixer online, blend warna, color-mix css, mencampur warna css.
Tool yang cocok dipakai bersama Pencampur Warna
- Konverter OKLCH — Jelajahi ruang warna OKLCH yang seragam secara persepsi dengan slider langsung, cek apakah warna masuk ke sRGB, dan salin fallback HEX, RGB, dan HSL yang sesuai.
- Konverter Warna — Tempel warna CSS apa pun — HEX, rgb(), hsl(), hwb(), oklch(), atau nama seperti tomato — dan langsung dapatkan format lainnya, plus palet siap pakai 50–950.
- Pencari Nama Warna — Tempel kode HEX untuk mendapatkan nama warna yang paling mendekati dan nama token yang rapi untuk CSS, SCSS, JavaScript, atau konfigurasi Tailwind kamu.
- Konverter HEX ke OKLCH — Tempel warna HEX dan dapatkan nilai OKLCH-nya untuk CSS.
Pertanyaan yang sering diajukan
Interpolasi mana yang sebaiknya saya pakai?
Apakah warna ujung ikut dihitung dalam jumlah langkah?
Apa itu color-mix() di CSS?
color-mix(in oklab, red, blue 30%) mencampur dua warna di browser. Fungsi ini didukung di semua browser modern dan bisa dipakai bersama variabel CSS, sehingga campuran otomatis ikut berubah mengikuti tema kamu.