Daripada Mesin Taip kepada Piksel: Perjalanan dengan CMYK, RGB dan Membina Penglihat Warna

Semasa saya kecil, saya menerbitkan fanzine tentang komik. Ini adalah lama sebelum saya mempunyai komputer—ia dicipta menggunakan mesin taip, kertas dan gunting!

Fanzine pada mulanya berwarna hitam putih, difotostat di sekolah saya. Lama kelamaan, apabila ia memperoleh lebih banyak kejayaan, saya mampu membeli cetakan mengimbangi dengan penutup warna!

Walau bagaimanapun, menguruskan warna tersebut agak mencabar. Setiap kulit muka perlu dicetak empat kali, sekali untuk setiap warna: cyan, magenta, kuning dan kunci (hitam) — disingkatkan sebagai CMYK.

Ini bermakna saya perlu menyediakan empat helaian berasingan, setiap helaian dicetak dalam dakwat hitam, tetapi sepadan dengan warna tertentu.

Ini salah satu isu yang saya terbitkan:

Semua warna kuning yang anda lihat dalam imej di atas dilukis tangan oleh saya menggunakan dakwat hitam pada helaian "kuning". Untuk warna kulit, saya menggunakan sesuatu yang dipanggil "titik raster." Ini adalah helaian yang boleh anda beli dengan titik hitam dengan ketumpatan yang berbeza-beza. Anda akan memotong titik dan menerapkannya — dalam kes ini, pada helaian “merah”.

Saya bekerja pada meja ringan — meja lukisan atas kaca dengan pencahayaan terbina dalam — supaya saya dapat melihat melalui pelbagai helaian sambil menjajarkannya dengan betul.

Ia sangat memakan masa, tetapi ia mencetuskan minat sepanjang hayat untuk memahami warna — dan perbezaan besar antara warna cetakan dan skrin!

Walaupun CMYK terhad kepada empat warna, ia masih agak mudah untuk difahami. Kami semua telah menggunakan pensel warna di atas kertas dan mempunyai rasa intuitif tentang cara warna bercampur. CMYK ialah model warna tolak. Anda bermula dengan helaian kertas putih, dan semasa anda menambah lebih banyak dakwat, anda sebenarnya menolak cahaya. Menggabungkan semua warna menggerakkan anda ke arah hitam. Jika anda tidak menggunakan sebarang dakwat, kertas itu kekal putih kerana ia memantulkan semua cahaya.

Apabila saya mendapat komputer pertama saya, saya perlu memahami RGB, yang sangat berbeza daripada CMYK. RGB ialah model warna tambahan yang digunakan untuk skrin digital. Di sini, anda mencampurkan cahaya itu sendiri — menambahkan lebih banyak cahaya menjadikan warna lebih cerah dan menggerakkan anda ke arah putih. Matikan semua lampu RGB (R=0, G=0, B=0), dan skrin menjadi hitam kerana tiada cahaya yang dipancarkan.

Sebagai pereka grafik ketika itu, anda perlu menentukur skrin anda kerana warna yang anda lihat pada skrin dan warna yang anda lihat dalam cetakan selalunya sangat berbeza!

---

Visualisasi RGB

RGB mewakili tiga sumber cahaya: merah, hijau dan biru. Apabila lampu dimatikan, nilainya ialah 0; apabila dihidupkan sepenuhnya, nilainya ialah 255. Apabila lampu ini bertindih, ia menghasilkan warna yang berbeza.

Untuk lebih memahami cara RGB berfungsi, mari bina alat kecil:

---

HTML

<fieldset class="rgb">
  <label class="r">
    R:<input
      type="number"
      name="r"
      min="0"
      max="255"
      value="255"
  /></label>
  <label class="g">
    G:<input
      type="number"
      name="g"
      min="0"
      max="255"
      value="255"
  /></label>
  <label class="b">
    B:<input
      type="number"
      name="b"
      min="0"
      max="255"
      value="255"
  /></label>
  <output class="rg">R+G</output>
  <output class="rb">R+B</output>
  <output class="gb">G+B</output>
</fieldset>

Gaya

Mula-mula, mari buat grid 9x8:

.rgb {
  all: unset;
  aspect-ratio: 9 / 8;
  container-type: inline-size;
  display: grid;
  font-size: 1.75cqi;
  grid-template-columns: repeat(9, 1fr);
  grid-template-rows: repeat(8, 1fr);
  width: 100%;
}

Saiznya luar biasa, tetapi itu kerana bulatan R, G dan B kami ialah 5x5 dan bertindih:

.r, .g, .b {
  aspect-ratio: 1 / 1;
  border-radius: 50%;
  display: grid;
  font-size: 5cqi;
  mix-blend-mode: difference;
}

CSS untuk .r, .g dan .b ialah:

.r {
  background-color: rgb(var(--r), 0, 0);
  grid-area: 1 / 3 / 6 / 8;
}

.g {
  background-color: rgb(0, var(--g), 0);
  grid-area: 4 / 1 / 9 / 6;
}

.b {
  background-color: rgb(0, 0, var(--b));
  grid-area: 4 / 5 / 9 / 10;
}

Saya telah banyak menggunakan kawasan grid kebelakangan ini. Ia membolehkan anda meletakkan item grid pada lokasi yang sangat khusus:

baris-mula / col-start / row-end / col-end

Lebih mudah untuk menggambarkan ini jika anda mendayakan penggambar grid Alat Dev:

Adakah anda perasan tiga Sifat Tersuai CSS, --r, --g dan --b? Kami akan mengemas kini ini dalam coretan JS kecil:

const rgb = document.querySelector('.rgb');
rgb.addEventListener('input', e => {
  const N = e.target;
  document.body.style.setProperty(`--${N.name}`, N.value);
})

Dan itu pada asasnya. Saya telah menambahkan beberapa

-elemen dan pelarasan kecil … tetapi saya hampir terlupa untuk menyebut baris paling penting tunggal untuk menjadikan visualizer berfungsi:

mod campuran-campuran: perbezaan

Baca tentangnya di sini — sangat menyeronokkan untuk mengulangi semua mod.

---

Demo

Inilah Codepen. Klik dan edit nombor di bawah R, G dan B, dan perhatikan bagaimana latar belakang halaman dan bahagian bertindih ketiga-tiga kalangan berubah.

Atas ialah kandungan terperinci Daripada Mesin Taip kepada Piksel: Perjalanan dengan CMYK, RGB dan Membina Penglihat Warna. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!