Warna Mixer

Cara kerja pencampuran warna

Alat ini menggunakan pencampuran aditif dalam ruang warna RGB. Komponen RGB setiap warna dirata-ratakan menurut bobotnya. Ini menyimulasikan cara cahaya bercampur (seperti sorot lampu yang tumpang tindih), berbeda dengan pencampuran subtraktif (seperti mencampur cat).

Bisakah saya mencampur lebih dari dua warna?

Ya! Klik "+ Tambah warna" untuk menambahkan hingga 8 warna. Gunakan slider bobot untuk mengontrol seberapa banyak setiap warna berkontribusi pada campuran.

Cara menggunakan

1. Pilih warna Anda: gunakan pemilih untuk memilih setiap warna. Klik "+ Tambah warna" untuk menambahkan slot lebih banyak (hingga 8).
2. Atur bobot setiap warna: seret slider di bawah setiap warna untuk mengontrol kontribusinya pada campuran akhir.
3. Pratinjau hasilnya: warna campuran ditampilkan secara langsung dengan nilai hex, RGB, dan HSL-nya.
4. Salin warna campuran: klik untuk menyalin nilai hex atau RGB yang diperoleh, untuk digunakan dalam desain atau kode Anda.

Mengapa menggunakan pencampur warna?

Mencampur warna adalah operasi mendasar dalam desain, membuat tints (mencampur dengan putih), shades (dengan hitam), tones (dengan abu-abu), atau warna perantara yang harmonis antara dua warna merek. Desainer menggunakannya untuk menghasilkan varian palet, menemukan nada perantara untuk gradien, memastikan rasio kontras yang dapat diakses antara warna yang berdekatan, dan membuat status hover/focus yang terkait secara visual dengan warna dasar.

Tiga hal yang dimaksudkan orang dengan "mencampur warna"

Ketika orang non-spesialis mengatakan "campur dua warna", mereka hampir selalu memaksudkan salah satu dari tiga operasi yang sama sekali berbeda. Memilih model yang salah adalah sumber kebingungan terbesar tunggal dalam alat warna.

Pencampuran aditif adalah apa yang terjadi ketika balok cahaya berwarna tumpang tindih. Dua senter, satu merah dan satu hijau, diarahkan ke tempat yang sama di dinding putih, menghasilkan tempat kuning. Senter biru ketiga ditambahkan di atas menghasilkan putih. Model pencampurannya adalah "lebih banyak cahaya = lebih terang," dan tiga primer adalah merah, hijau, dan biru karena kerucut manusia memiliki kepekaan puncak kira-kira di pita-pita itu. Setiap layar, ponsel, monitor, televisi, proyektor, menggunakan pencampuran aditif. Setiap piksel berisi tiga subpiksel (R, G, B), dan memutar ketiganya ke maksimum menghasilkan putih. Inilah mengapa model warna default web adalah RGB: medium bersifat emisif, dan matematikanya cocok dengan medium.

Pencampuran subtraktif adalah apa yang terjadi ketika pewarna menyerap panjang gelombang dari cahaya putih. Tinta sian menyerap cahaya merah dan memantulkan hijau dan biru. Tinta kuning menyerap biru dan memantulkan merah dan hijau. Lapisi sian di atas kuning dan satu-satunya panjang gelombang yang bertahan dari kedua filter adalah yang hijau. Modelnya adalah "lebih banyak pigmen = lebih gelap," dan tiga primer subtraktif adalah sian, magenta, dan kuning. Secara teori, CMY bercampur menjadi hitam pada kekuatan penuh, tetapi dalam praktiknya pigmen tidak sempurna dan hasilnya adalah coklat berlumpur, sehingga percetakan komersial menambahkan tinta hitam terpisah (K dalam CMYK) untuk hitam sejati. Pencampur warna yang berjalan di layar tidak dapat benar-benar melakukan pencampuran subtraktif karena layarnya sendiri bersifat aditif; ia hanya dapat mensimulasikan tampilan.

Teori warna artis tradisional mengajarkan kita bahwa warna primer adalah merah, kuning, dan biru. Tradisi lukisan, dan Teori Warna Goethe tahun 1810, dan buku teks Bauhaus 1961 Itten Seni Warna, mengkodifikasikan RYB sebagai dasar palet artis. RYB tidak akurat secara fisik. Primer subtraktif sejati yang memaksimalkan gamut adalah CMY, bukan RYB. Tetapi RYB telah bertahan selama berabad-abad karena cat asli bukan filter subtraktif murni: tabung merah kadmium dan tabung biru ultramarin bercampur menjadi ungu yang dapat dikenali, dan sistem "bekerja" cukup baik di kuda-kuda untuk mengajar generasi siswa. Alat ini adalah blender RGB aditif, yang adalah apa yang sebenarnya web lakukan, jadi "merah plus hijau" memberikan kuning, bukan coklat yang akan dihasilkan mixer cat.

Ruang warna, sRGB, Display P3, Rec. 2020, Adobe RGB

Model warna (RGB, CMYK, HSL) memberi tahu Anda dimensi apa yang Anda miliki. Ruang warna memberi tahu Anda dengan tepat warna fisik mana yang sesuai dengan setiap tiga numerik: ia menetapkan kromatisitas primer, titik putih, dan fungsi transfer. Dua tampilan yang keduanya berbicara "RGB" dapat menghasilkan merah yang terlihat berbeda untuk kode yang sama jika mereka menargetkan ruang warna yang berbeda.

• sRGB (IEC 61966-2-1:1999) adalah default web dan telah menjadi sejak akhir 1990-an. Dibuat oleh Hewlett-Packard dan Microsoft pada 1996 untuk menstandarisasi warna di monitor PC, pemindai, dan web awal. Kira-kira 35% dari area kromatisitas CIE 1931 yang terlihat. Apa pun yang tidak menentukan ruang warna di web adalah sRGB secara konvensi.
• Display P3, pengenalan Apple dengan gamut luas. Apple mengirim iMac dengan layar Retina 5K pada akhir 2015 dengan tampilan gamut luas yang menargetkan Display P3, kemudian secara progresif meluncurkannya ke iPhone (iPhone 7, September 2016), iPad Pro, dan jajaran MacBook Pro. ~25% gamut lebih lebar dari sRGB, terutama dalam merah dan hijau yang jenuh. CSS Color Module Level 4 menambahkan sintaks color(display-p3 r g b).
• Rec. 2020 (ITU-R Recommendation BT.2020, pertama kali diterbitkan 2012) adalah ruang warna untuk televisi definisi ultra-tinggi dan dasar untuk sebagian besar alur kerja HDR. ~75% dari spektrum yang terlihat dengan primer yang berada di lokus spektral. Hampir tidak ada tampilan konsumen yang dapat memproduksi gamut Rec. 2020 lengkap hari ini; ini adalah spesifikasi yang kompatibel ke depan.
• Adobe RGB (1998) didefinisikan oleh Adobe Systems untuk memberi fotografer dan desainer cetak gamut yang lebih luas dari sRGB. Kira-kira 50% lebih luas. Bukan ruang warna web, peramban tidak menganggapnya, tetapi kamera foto profesional, Lightroom, dan Photoshop default ke itu untuk alur kerja cetak.

Ruang warna perseptual, dan mengapa mencampur di sRGB memberi titik tengah berlumpur

Koordinat sRGB dan HSL di mana sebagian besar alat web menyimpan dan memanipulasi warna tidak seragam secara perseptual. Langkah unit di saluran L HSL tidak sesuai dengan langkah unit dalam seberapa terang warna terlihat. Inilah alasan mendalam mengapa mencampur dua warna dengan rata-rata saluran mereka memberikan hasil yang tidak intuitif.

Contoh kanonik: ambil merah murni #ff0000 dan hijau murni #00ff00. Rata-ratakan saluran RGB komponen demi komponen: merah berubah dari 255 menjadi 127, hijau berubah dari 0 menjadi 127, biru tetap di 0. Hasilnya adalah #7f7f00, zaitun yang tampak kusam, gelap, dan sedikit keruh. Tidak sama dengan kuning cerah #ffff00 yang akan Anda dapatkan jika Anda benar-benar menyinari merah dan hijau ke tempat yang sama di dinding. Dua masalah yang menyatu menjelaskan hal ini.

Pertama, sRGB dikodekan-gamma. Angka yang disimpan sebagai 127 tidak mewakili setengah cahaya yang diwakili 255. Fungsi transfer adalah non-linear: 127 dalam sRGB sesuai dengan kira-kira 21% dari intensitas cahaya linear, bukan 50%. Jadi ketika Anda merata-ratakan nilai yang dikodekan gamma, Anda merata-ratakan sesuatu seperti akar kuadrat intensitas, bukan intensitas itu sendiri, dan hasilnya jauh lebih gelap dari yang seharusnya. Perbaikan untuk masalah itu saja adalah mengonversi sRGB ke linear-RGB sebelum merata-ratakan, lalu mengonversi kembali. Dengan rata-rata linear-RGB, merah plus hijau dibagi dua menjadi kuning-hijau yang jauh lebih cerah dan lebih kredibel.

Kedua, bahkan linear-RGB tidak sesuai dengan persepsi. Langkah yang sama dalam linear-RGB masih bukan langkah yang sama dalam kecerahan yang dirasakan atau kromatisitas. Titik tengah merah dan biru dalam linear-RGB adalah lavender yang tidak jenuh, bukan ungu kaya yang diharapkan desainer. Perbaikan untuk masalah yang lebih dalam itu adalah mencampur dalam ruang yang seragam secara perseptual, Lab, Oklab, OKLCH. Konversi kedua endpoint ke Oklab, interpolasikan secara linier saluran L, a, dan b, konversi kembali ke sRGB. Titik tengah merah dan hijau di Oklab adalah kuning yang hidup dan dapat dipercaya. Titik tengah merah dan biru adalah magenta jenuh. Titik tengah kuning dan biru adalah abu-abu netral yang bersih, bukan hijau rawa yang Anda dapatkan dari RGB naif.

Alat ini saat ini merata-ratakan dalam sRGB yang dikodekan gamma, model paling sederhana dan yang menghasilkan titik tengah berlumpur itu. Ini benar untuk kasus sederhana itu tetapi tidak sesuai dengan apa yang sebenarnya dilakukan cahaya fisik atau persepsi manusia. Jika Anda memilih perhentian gradien atau nada tengah palet dan Anda tidak ingin terjebak abu-abu berlumpur, gunakan fungsi CSS color-mix() yang dijelaskan di bawah atau salah satu pustaka matematika warna.

CIE Lab, Oklab, OKLCH, tumpukan perseptual

CIE Lab (juga ditulis CIELAB) diterbitkan oleh Komisi Penerangan Internasional pada tahun 1976. Memiliki tiga sumbu: L* untuk kecerahan dari 0 (hitam) sampai 100 (putih), a* untuk sumbu kromatik hijau-ke-merah, dan b* untuk sumbu kromatik biru-ke-kuning. Dirancang agar perbedaan numerik yang sama sesuai dengan perbedaan yang dirasakan kira-kira sama. Selama setengah abad ini adalah ruang perseptual standar dalam grafis, sains penglihatan, dan manajemen warna. Kelemahan yang diketahui: biru menjadi tidak alami keunguan saat diinterpolasi; sumbu kecerahan tidak melacak persepsi dengan sempurna untuk warna yang sangat jenuh.

CIE LCH hanyalah CIE Lab yang dinyatakan dalam koordinat polar: L untuk kecerahan, C untuk kroma (jarak dari sumbu netral), H untuk sudut rona. Lebih berguna daripada a*/b* mentah bagi desainer karena operasi seperti "geser rona 30 derajat" atau "turunkan kroma ke 0" memetakan langsung ke model mental alami.

Oklab, oleh Björn Ottosson, diterbitkan pada Desember 2020 dalam esai berjudul "A perceptual color space for image processing" di bottosson.github.io. Ottosson adalah insinyur Swedia yang telah bekerja pada warna di industri game. Oklab memperbaiki sebagian besar kekurangan yang diketahui dari CIE Lab, terutama pergeseran biru-ungu dalam interpolasi dan prediksi berlebihan perbedaan kroma dalam warna jenuh. W3C mengadopsi Oklab ke dalam CSS Color Module Level 4 dalam waktu sekitar satu tahun setelah postingan blog Ottosson, standarisasi yang luar biasa cepat untuk ruang warna baru. Hari ini setiap peramban utama mendukung oklab() secara native.

OKLCH adalah Oklab dalam koordinat silinder: L untuk kecerahan 0 sampai 1, C untuk kroma 0 sampai kira-kira 0,4, H untuk sudut rona 0 sampai 360 derajat. Ini menjadi ruang warna yang paling direkomendasikan untuk palet desain-sistem justru karena operasi pada sumbunya memetakan dengan bersih ke intuisi desainer, dan karena interpolasi antara dua warna OKLCH menghasilkan gradien paling halus dan paling menyenangkan dari ruang mana pun yang saat ini tersedia di CSS.

Fungsi CSS color-mix(), pencampuran perseptual tanpa JS

CSS Color Module Level 5 memperkenalkan color-mix(), yang mengambil dua warna, ruang warna interpolasi, dan bobot opsional, dan mengembalikan hasil yang dicampur yang dihitung sepenuhnya oleh peramban. Sintaksnya adalah color-mix(in oklch, red 50%, blue 50%). Anda dapat mengganti ruang (in srgb, in oklab, in lch, in hsl longer hue, dll.) dan matematika berjalan di ruang itu. Dukungan peramban tiba di awal 2023:

• Safari 16.2, Desember 2022 (peramban pertama yang mengirim)
• Chrome 111, Maret 2023
• Edge 111, Maret 2023 (rilis Chromium yang sama)
• Firefox 113, Mei 2023

Pencampur warna bebas JavaScript dan native CSS telah tersedia luas selama lebih dari dua tahun sekarang. Setiap alat yang dibangun di atas color-mix() mendapatkan hasil yang benar secara perseptual "gratis", peramban menangani tumpukan konversi. CSS Color Module Level 4 sendiri mencapai status Candidate Recommendation pada 2022 dan didukung secara luas di seluruh peramban modern.

Pustaka JavaScript untuk matematika warna

Tiga pustaka mendominasi ketika Anda tidak bisa atau tidak ingin bergantung pada color-mix():

• culori.js oleh Dan Burzo, yang paling fleksibel. Mendukung hampir setiap ruang warna bernama (sRGB, linear-RGB, P3, Rec. 2020, Lab, LCH, Oklab, OKLCH, HSL, HSV, Cubehelix, OKHSL, OKHSV, dan lainnya). Tree-shakable, ESM-first. Implementasi referensi untuk pembuatan palet berbasis OKLCH.
• colorjs.io oleh Lea Verou dan Chris Lilley, dalam arti pustaka penulis spec, karena Lilley ikut menyunting spesifikasi CSS Color Module. Setia pada semantik spec CSS Color, bundel sedikit lebih besar dari culori. Bagus ketika Anda ingin hasil yang persis cocok dengan apa yang akan dihitung peramban.
• chroma-js oleh Gregor Aisch, lebih tua, ergonomis, lebih kecil. Sangat baik untuk skala warna dan interpolasi sederhana. Dukungan Lab dan LCH tetapi tidak ada Oklab pada rilis utama terakhir; fork komunitas telah menambahkannya.

Sejarah singkat teori warna

Teori warna Barat dimulai dengan Isaac Newton pada 1665. Saat dikarantina dari Cambridge selama wabah, Newton melewatkan sinar matahari melalui prisma dan mengidentifikasi tujuh warna yang berbeda (merah, jingga, kuning, hijau, biru, nila, ungu). Dia kemudian menyusun ini pada lingkaran tertutup, roda warna Newton, menghubungkan ekstrem spektral (ungu dan merah) melalui magenta non-spektral. Roda diterbitkan dalam Opticks miliknya pada 1704 tetapi dikerjakan pada 1665-1666.

Johann Wolfgang von Goethe menerbitkan Teori Warna (Zur Farbenlehre) pada 1810. Di mana Newton adalah seorang fisikawan, Goethe adalah seorang penyair yang menyelidiki psikologi warna: bagaimana warna terasa, kontras, dan bergabung dalam pikiran pengamat. Karyanya secara ilmiah salah pada banyak poin tetapi memperkenalkan ide tentang warna komplementer, gambaran-setelah warna, dan karakter afektif palet hangat dan dingin yang masih diajarkan hari ini.

Johannes Itten, master Bauhaus, menerbitkan Seni Warna (Kunst der Farbe) pada 1961. Roda warna RYB dua belas jari-jari Itten dan tujuh kontras warnanya (rona, terang-gelap, dingin-hangat, komplementer, simultan, saturasi, ekstensi) menjadi kerangka pengajaran dominan untuk pendidikan desain pada paruh kedua abad kedua puluh.

Pantone dibuat oleh Lawrence Herbert, yang bergabung dengan Pantone Inc. sebagai karyawan pada 1956 dan membeli perusahaan tersebut pada 1962. Pada 1963 ia meluncurkan Pantone Matching System (PMS): pustaka standar tinta warna spot yang diidentifikasi dengan nomor, dengan buku swatch tercetak yang memungkinkan desainer di New York dan pencetak di Hong Kong untuk menentukan dan mereproduksi warna yang sama persis tanpa ambiguitas. Pantone bukan ruang warna dalam pengertian teknis CIE, ini adalah katalog kepemilikan campuran tinta fisik, tetapi pengaruhnya pada alur kerja warna profesional sangat besar.

HSL dan HSV diperkenalkan oleh Alvy Ray Smith dalam makalahnya tahun 1978 "Color Gamut Transform Pairs," yang diterbitkan dalam SIGGRAPH proceedings ketika dia berada di Xerox PARC (Smith kemudian ikut mendirikan Pixar). Dia mencari koordinat warna yang dipetakan lebih alami ke intuisi artis daripada RGB. HSL menjadi model warna "ramah-desainer" default di web dan tetap menjadi notasi non-RGB yang paling banyak dikenal di CSS. Namun, secara perseptual tidak seragam, OKLCH adalah penerusnya yang modern.

Kontras dan aksesibilitas, WCAG 1.4.3

Ketika seorang desainer mencampur dua warna untuk membuat warna ketiga, status hover, latar belakang berwarna, perhentian gradien, warna yang dihasilkan masih harus memenuhi persyaratan kontras terhadap teks atau ikon yang ditempatkan di atasnya. Kriteria sukses WCAG 2.x 1.4.3, "Kontras (Minimum)," mensyaratkan:

• Rasio kontras minimal 4,5:1 untuk teks berukuran normal.
• Rasio kontras minimal 3:1 untuk teks besar (18pt reguler atau 14pt bold dan di atasnya) dan untuk objek grafis dan komponen UI.

Rasio kontras dihitung menggunakan luminans relatif, konversi linear-RGB yang dijelaskan di atas dan jumlah berbobot dari saluran yang dilinearisasi (L = 0,2126·R + 0,7152·G + 0,0722·B). Rasio antara dua warna adalah (L_lebih_terang + 0,05) / (L_lebih_gelap + 0,05). Implikasi praktis: titik perhentian perantara di sepanjang gradien dapat lulus pemeriksaan kontras di endpoint tetapi gagal secara dramatis di tengah. Jika sebuah merek mencampur biru tua gelap dengan kuning cerah untuk menghasilkan zaitun status hover, zaitun itu mungkin berada di zona gagal WCAG terhadap teks putih dan teks hitam.

Pertanyaan lain

Mengapa merah plus hijau tidak memberi saya coklat?

Karena alat ini, seperti setiap layar, menggunakan pencampuran RGB aditif, dan cahaya merah plus cahaya hijau memberikan kuning. Coklat adalah apa yang Anda dapatkan saat mencampur cat merah dan hijau, yang bersifat subtraktif: setiap pigmen menyerap panjang gelombang berbeda dan panjang gelombang yang bertahan terlihat kecoklatan. Untuk mensimulasikan "pencampuran cat" secara akurat di layar Anda membutuhkan model spektral atau pigmen-sadar (Procreate dan Adobe Fresco melakukan ini untuk aplikasi seni); pencampur warna web generik, termasuk yang ini, adalah blender RGB aditif yang jujur dan akan memberi Anda kuning, bukan coklat.

Titik tengah saya terlihat berlumpur, apa perbaikannya?

Dua lapisan perbaikan. Langkah ketepatan minimal adalah pencampuran cahaya-linear: konversi sRGB ke linear-RGB sebelum merata-ratakan, lalu kembali. Itu saja membuat merah+hijau→kuning terlihat jauh lebih cerah dan lebih kredibel. Perbaikan perseptual penuh adalah mencampur di OKLCH atau Oklab, konversi kedua endpoint ke OKLCH, interpolasikan, konversi kembali. CSS color-mix(in oklch, red, green) peramban melakukan tepat ini dalam satu baris dan berfungsi di setiap peramban yang dikirim setelah Mei 2023. Untuk pipeline JavaScript, culori.js adalah pustaka referensi.

Apa ruang warna yang tepat untuk mencampur palet desain sistem?

OKLCH adalah jawaban konsensus saat ini. Ini seragam secara perseptual, memiliki sumbu yang bersih yang cocok dengan intuisi desainer (kecerahan / kroma / rona), menghasilkan interpolasi gradien tanpa titik tengah berlumpur, dan dikirim di setiap peramban modern melalui oklch() di CSS Color 4 dan color-mix(in oklch, ...) di CSS Color 5. Sistem desain yang dibangun pada 2024-2026 semakin beralih dari palet berbasis HSL ke yang berbasis OKLCH tepatnya karena alasan ini.

Apakah warna campuran saya akan lolos pemeriksaan kontras WCAG?

Alat ini saat ini tidak memunculkan rasio kontras hasilnya, tetapi Anda dapat menghitungnya: luminansi WCAG adalah L = 0,2126·R + 0,7152·G + 0,0722·B setelah linearisasi saluran sRGB, dan rasio kontras antara dua warna adalah (L_lebih_terang + 0,05) / (L_lebih_gelap + 0,05). Targetnya adalah 4,5:1 untuk teks normal dan 3:1 untuk teks besar atau komponen UI. Color Contrast Checker di area alat terkait menjalankan perhitungan ini secara langsung.

Alat terkait